Como Editar e Personalizar Qualquer Tema WordPress com HTML, CSS, Modelos PHP e o Inspector do Chrome

Neste tutorial passo a passo, você vai aprender exatamente como editar o seu tema WordPress usando código personalizado. Se você entender como o WordPress usa os arquivos PHP dos temas para gerar suas páginas web com base no sistema de hierarquia de templates, poderá editar o design com HTML, PHP e CSS.

A melhor forma de apoiar ou dizer "obrigado" é começar o seu próprio projeto de site!

Você é profissional de WordPress? Ganhe dinheiro com suas habilidades no site!

Vamos adicionar um banner personalizado na nossa página inicial com um forte *call-to-action*. Para isso, você precisa editar os arquivos PHP dentro da pasta do seu *child theme* (tema filho), para que eles tenham precedência sobre os arquivos PHP do tema pai.

Dentro do painel administrativo do WordPress, vá em *Apariência → Editor de Temas* para ver os arquivos que compõem o seu tema instalado. Você pode copiar um arquivo do tema pai para o tema filho e, em seguida, editar para personalizar.

Assim que atualizar o arquivo de template PHP, poderá ajustar o design usando código CSS. Adicione CSS personalizado ao *style.css* do tema filho ou vá para *Apariência → Personalizar*.

Meu método preferido de design é testar pequenas alterações em tempo real usando o botão *Inspecionar* do Google Chrome (que aparece ao clicar com o botão direito em qualquer site). Isso mostra o código por trás do design, e você pode mexer nas configurações de CSS para alcançar exatamente o visual que quer.

Depois que faço isso, copio e cole o código CSS para o tema WordPress.

Em vez de fazer mudanças radicais, sou fã de fazer ajustes incrementais para…