O caminho de todos para se tornar um desenvolvedor web parece um pouco diferente. Para mim, como para muitas pessoas, comecei como designer. O WordPress facilita a instalação e execução de um site de aparência fantástica sem conhecer nenhum código. Como designer, você pode alterar temas, ajustar configurações, adicionar plug-ins e fazer muito para controlar a aparência do site. Mas no final das contas, muitos designers querem dar um passo adiante e ditar pixel por pixel como o site se parece.

Existem duas maneiras de fazer isso: contratar um desenvolvedor para implementar seu design ou adquirir algumas habilidades de desenvolvimento por conta própria. Mesmo se você contratar um desenvolvedor, haverá momentos em que saber como fazer algum desenvolvimento é um grande trunfo. Além disso, quando você pode lidar com as necessidades de desenvolvimento de seus clientes, você se torna ainda mais valioso para eles e pode aumentar sua taxa de acordo.

Passar de designer para desenvolvedor é um grande empreendimento. Vou sugerir algumas etapas simples a serem seguidas para que você possa começar a fazer a transição de alguém que cria os designs do site para alguém que também pode criar e implementar esses designs.

Boas notícias, você está no lugar certo

Provavelmente, se você está aqui lendo The Layout, você está pelo menos um pouco familiarizado com o WordPress. O WordPress abre a porta para alguém passar de designer para desenvolvedor melhor do que qualquer outra plataforma na web. Uma maneira de fazer isso é o Editor, que pode ser encontrado no painel do WordPress em Aparência > Editor.

Você pode visualizar todo o código do tema ali mesmo no Painel do WordPress sem nenhuma ferramenta especial ou acesso ao servidor. Ele também fornece recursos para editar o código, no entanto, eu não sugeriria fazer isso aqui (falaremos sobre melhores maneiras de fazer isso mais tarde). Este é um ótimo lugar para você dar uma olhada e ver o que está acontecendo. Então vá em frente e olhe sob o capô do seu tema e veja se você pode começar a entender o que está lá.

Você normalmente verá três tipos diferentes de arquivos aqui. Para simplificar as coisas, pense nesses arquivos como o “corpo” do seu site. Arquivos PHP (.php) contêm HTML (os ossos) e PHP (os nervos que conectam tudo ao cérebro, o banco de dados). As folhas de estilo (.css) são a capa do seu site, determinando sua aparência. JavaScript (.js) pode ser pensado como os músculos do site, normalmente controlando as partes móveis e reagindo e respondendo a como o site está sendo usado e interagindo. Vá em frente e explore um pouco. Você vê alguma palavra descritiva que indique para qual seção do site o código se destina? Ou palavras que descrevem alguns dos aspectos visuais do site?

A outra ótima maneira do WordPress fechar uma lacuna entre designer e desenvolvedor é quebrar as coisas em pedaços, permitindo que você identifique facilmente a seção que deseja editar e faça alterações em apenas uma parte do site. O WordPress separa o conteúdo dos templates das funções do site. Ele também usa uma estrutura consistente entre os arquivos, para que você possa alternar entre sites e ainda encontrar facilmente os arquivos que deseja editar.

Não tenha medo

Uma das frases que mais uso ao treinar outras pessoas é: “não tenha medo, você não pode estragar isso de uma maneira que eu não posso consertar”. Há muito pouco no mundo que não pode ser desfeito. Claro, você vai querer aproveitar as ferramentas que facilitarão a desfazer, caso suas edições não saiam conforme o planejado. Duas ótimas ferramentas que o Flywheel fornece são o recurso Staging e a capacidade de fazer backup e restaurar facilmente a partir dele. Quando você decidir pular para o código, use um site de teste para fazer edições. Dessa forma, você não está arriscando seu site ao vivo e pode redefinir facilmente seu ambiente de teste, se necessário. Se você fizer uma alteração inadvertidamente em seu site ativo, não tenha medo, apenas restaure seu backup mais recente e em menos de cinco minutos, você estará de volta aos trilhos. Essas ferramentas devem lhe dar confiança para começar a dar alguns passos de bebê na edição de algum código!

Dica profissional: quando você se sentir um pouco mais confortável com o código, eu o encorajaria a explorar o controle de versão, seja Git ou SVN, como uma terceira camada de segurança e a linha de frente para rastrear alterações e detectar falhas antes que seu código seja publicado.

Por onde começar?

Agora que abordamos alguns dos obstáculos mentais iniciais, por onde você deve começar? Se você é um designer, então o lugar mais natural para começar a trabalhar com código seria CSS. Como mencionamos anteriormente, esta é a skin do nosso site; ele controla a aparência do site e como ele é apresentado. Antes que possamos dissecar CSS, precisamos entender como ele funciona com HTML. HTML tem uma variedade de tags para diferenciar o conteúdo dentro. Essas tags podem ter muitos atributos diferentes, que fornecem algumas informações adicionais sobre a tag e seu conteúdo. Os dois atributos que veremos são id e class . Aqui está um trecho de código com três tags HTML diferentes. Você notará que nem toda tag tem um id ou classe. Eles não são obrigatórios, mas ajudam a diferenciar as tags na mesma página umas das outras. Os IDs devem ser usados ​​apenas uma vez em uma página, enquanto as classes podem ser repetidas e usadas várias vezes.

<article id="post-1" class="inset">
	<p class="highlight">Hello, <span>world!</span></p>
</article>

Portanto, temos as tags <article> , <p> e <span> . O artigo tem um id de post-1 e uma classe de inset. A tag p possui uma classe de destaque e a tag span não possui um id ou uma classe.

O CSS para acompanhar o HTML acima pode ser assim:

/* This is a comment, it doesn't affect the code. We can use it to make notes or write instructions */
article { /* These styles will apply to every <article> tag on the page */

background: #eaeaea;  /* This makes the background gray using a HEX color code */

padding: 20px; /* give the article 20 pixels of space around the inside */

margin: 10px; /* give the article 10 pixels of space around the outside */

}

#post-1 { /* These styles will apply to only the tag with id of post-1 */

border: 1px solid green; /* green solid line around the container */

}

.highlight { /* These styles will apply to anything with a class of highlight */

background: yellow; /* give this text a yellow background */

}

span { /* These styles will apply to every <span> tag on the page */

font-weight: bold; /* bold this text */

text-transform: uppercase; /* make this text ALL CAPS */

}

Para aprofundar o CSS e como ele funciona, existem muitos recursos fantásticos. Alguns ótimos lugares para começar são A List Apart Books, codeschool.coma, codecademy.com, lynda.com, css-tricks.com e wpbeginner.com. Cada um desses recursos é um pouco diferente; alguns oferecem uma abordagem geral, aprendem o básico e outros se concentram em casos de uso e fornecerão trechos de código ou tutoriais específicos sobre uma tarefa específica. Todo mundo aprende de maneiras diferentes, então encontre o que é certo para você.

Veja o código “In the Wild”

Falamos anteriormente sobre uma maneira de “espreitar por baixo do capô”, mas outra maneira é usar as ferramentas de desenvolvimento incorporadas ao seu navegador. A maioria dos navegadores permite que você explore o código em uma página da web. Vá em frente e clique com o botão direito ou clique com a tecla Ctrl neste texto e selecione “Inspecionar” ou “Inspecionar Elemento”. Aparecerá uma janela que deve mostrar a tag HTML e o CSS correspondente. Você pode até editar as propriedades e ver como elas ficam quando alteradas.

Google é seu amigo

Na dúvida, Google! Sério, há tantas pessoas escrevendo sobre código, é provável que alguém tenha escrito sobre o que você está tentando fazer. Então pesquise no Google e veja o que você encontra. Pode até haver várias maneiras de realizar o que você está buscando, e você pode encontrar a melhor maneira de acordo com seu próprio estilo e circunstâncias.

Colocando em prática

Você não precisa criar um tema do zero para usar algumas dessas novas habilidades de desenvolvedor encontradas. Eu encorajo você a começar pequeno. Tente fazer alguns ajustes em um tema existente, como alterar algumas cores ou usar uma fonte diferente. Como observei antes, existem maneiras melhores de editar o código de um tema do que usar o Editor. Os temas oferecem atualizações e, se você editou os arquivos do tema diretamente, uma atualização do tema substituirá suas alterações. Uma das maneiras mais fáceis de adicionar algum código personalizado a um tema existente é por meio de um plug-in. E o plugin perfeito para CSS é o Simple Custom CSS de John Regan e Danny van Kooten. Isso permite que você adicione alguns dos seus próprios CSS ao seu site sem bagunçar os arquivos do tema e é ótimo para fazer pequenas alterações visuais no seu site WordPress.

Formalize seu fluxo de trabalho

Depois de se sentir mais confortável trabalhando com alguns trechos de código menores por meio do Painel, você desejará um fluxo de trabalho mais formal para suas tarefas de desenvolvimento. Os fluxos de trabalho do desenvolvedor podem variar de muito simples a extremamente complexos. Existem boas razões para alguns fluxos de trabalho mais complexos, mas vamos começar com o básico. As duas coisas que você deve ter se quiser editar o código fora do Dashboard são um editor de código e um programa FTP, que permitirá colocar e obter arquivos do seu servidor. Elegant Themes tem um ótimo post comparando editores de código. É um excelente recurso ao tentar determinar qual editor é o certo para você. Alguns editores de código têm FTP integrado, mas também existem muitas opções gratuitas ou de baixo custo por aí.

Dica profissional: outra ótima ferramenta para o fluxo de trabalho de um desenvolvedor WordPress é o DesktopServer da ServerPress. Isso permite que você configure e construa um site WordPress no seu computador localmente com apenas alguns cliques.

Tente criar um tema filho

Agora que você tem um ambiente de edição mais formal, tente criar um tema filho. Este é um tema personalizado baseado em outro tema. Ambos os temas devem estar instalados em seu site para que funcionem, e o tema filho deve ser aquele que está ativado. As duas coisas necessárias para um tema filho são os arquivos style.css e functions.php . A estrutura Genesis aproveita essa funcionalidade extremamente bem e é um ótimo lugar para começar a desenvolver algumas de suas habilidades de desenvolvimento. Carrie Dils fez vários cursos no lynda.com sobre como usar temas filhos com o Genesis. É um próximo passo fantástico em sua jornada de designer para desenvolvedor.

Não desanime

É natural que, ao pular no aprendizado de código, em algum momento você fique desanimado, mas não fique. Todo mundo já esteve lá. Mesmo desenvolvedores experientes têm dias em que sentem que não sabem nada. Algumas das melhores maneiras de superar esses obstáculos são mantendo-se conectado com outras pessoas em sua mesma jornada. Twitter, Slack e participação nos fóruns do WordPress.org são ótimas maneiras de se manter conectado. Siga alguns blogs como o Layout, e você poderá cultivar relacionamentos e aprender ao longo do caminho. Algumas das minhas pessoas favoritas a seguir que me ajudaram em minha jornada de desenvolvimento são Carrie Dils, Tom McFarlin e John Regan.

Para onde devo ir a partir daqui?

Quando você sentir que tem um bom domínio sobre HTML e CSS, o próximo passo lógico é o JavaScript, ou você pode dar um passo adiante e mergulhar no WordPress Codex para aprender como inserir partes do conteúdo do WordPress em seu código. Boa codificação!