Atualmente o WordPress ainda é considerado uma das ferramentas mais populares para construção de sites no mundo. Entre muitos motivos estão o seu potencial quase que ilimitado de personalização, o que torna possível desenvolver muitos tipos diferentes de sites a partir do código principal do WordPress e sua infinidade de plugins e temas gratuitos e pagos.
É possível encontrar um tema de WordPress para atender a quase todas as necessidades, e os usuários com um pouco de experiência em desenvolvimento podem personalizar ainda mais qualquer tema trabalhando com os temas filhos no wordpress, derivados de um tema principal ou pai que podem ser alterados de várias maneiras sem afetar o código e a estrutura do tema pai. Aqui está uma visão geral de como e por que usar temas filhos para personalizar a aparência do seu site WordPress.
Como os temas de WordPress funcionam?
O código principal do WordPress é um pacote de arquivos de código aberto e gratuito que pode ser usado para criar um site e gerenciar o conteúdo que preenche o site. Para fazer a conexão entre estas funcionalidades da plataforma do WordPress e o frontend do seu site utilizamos os temas, um segundo conjunto de código que se sobreponha ao código-fonte e crie um modelo para definir sua aparência, o estilo e o layout do site.
Os temas podem ser instalados a partir do diretório de temas do WordPress ou adquiridos e baixados de uma longa e crescente lista de desenvolvedores por todo o mundo, e a maioria deles oferece algumas opções de personalização diretamente no painel de administração do site. No entanto, alguns usuários querem mais – e isso significa ir diretamente ao código do tema para fazer alterações, o que pode causar sérios problemas quando as alterações são feitas diretamente no tema ativo.
Quando as opções padrões não atendem as necessidades do seu site
Quando as opções de personalização padrão de um tema não atendem às necessidades específicas de um site, os usuários com experiência em codificação podem simplesmente alterar ou adicionar instruções no código do tema, mas essa é uma proposta arriscada. Se os desenvolvedores do tema atualizarem o tema, para por exemplo acompanhar alguma atualização necessária da plataforma do WordPress, qualquer personalização local feita diretamente no código fonte do tema utilizado será perdida.
Então é uma boa prática quando desejamos fazer alterações locais sem alterar o código original do tema, criar uma cópia deste tema e fazer todas as alterações na mesma. Esse tema “filho” como ficou popularmente conhecido pode então ser instalado e ativado no site como qualquer outro tema, e o código do tema “pai” permanecerá inalterado.
Por que criar um tema filho?
Praticamente qualquer tema pode servir como um tema pai para um ou mais temas filhos, mas alguns temas são projetados especificamente para servir como um tema pai capaz de criar vários temas filhos. Esses frameworks temáticos, como o conhecido framework Genesis, fornecem as estruturas básicas para o desenvolvimento de novos temas para que os designers não precisem desenvolver cada novo tema do zero.
Um tema filho tem seu próprio nome e funciona como um tema separado em seu diretório de temas, mas como existe apenas como uma modificação do tema pai, o tema pai também deve estar presente para que o tema filho funcione.
Mas quando devo usar?
Se as mudanças que você está planejando significarem uma revisão completa de todos os aspectos do tema, talvez seja melhor desenvolver um novo tema do zero ou adotar um tema existente que ofereça mais dos recursos que você precisa. Na maioria dos casos, porém, criar um tema filho oferece a flexibilidade de fazer ajustes personalizados na aparência do tema com o suporte de uma estrutura já existente.
Trabalhar com temas filhos também pode oferecer muitas oportunidades para aprender mais sobre como trabalhar com código e as linguagens de programação usadas para criar sites, temas e plugins do WordPress. Os temas filhos que você cria podem permanecer exclusivos para o seu site ou você pode licenciá-los e disponibilizá-los a outros usuários por meio do diretório de temas do WordPress e de uma variedade de mercados de temas em todo o mundo.
A criação de um tema filho requer alguma experiência com HTML e CSS e a capacidade de trabalhar com arquivos e pastas em sua instalação do WordPress, mas você não precisa ser um desenvolvedor experiente para criar os elementos necessários para desenvolver seu próprio tema filho a partir de um tema WordPress existente.
O básico sobre a criação de temas filhos
É possível criar seu tema filho diretamente nos arquivos wp-content/themes do seu site, mas especialistas em desenvolvimento web recomendam criar os arquivos necessários localmente antes de adicioná-los aos arquivos de tema WordPress ativos do seu site.
Isso permite que você faça todas as alterações necessárias – ou experimente novas opções – sem risco de afetar nenhum dos diretórios existentes em seu site dentro de um ambiente de testes controlados.
Nesta seção, mostraremos como criar um tema filho no WordPress manualmente. No entanto, se quiser poupar algum tempo, existem também algumas ferramentas/estratégias para automatizar o processo. Nós os compartilharemos na próxima seção.Em nosso exemplo usaremos o tema padrão do WordPress Twenty Twenty-One como exemplo, mas os passos básicos podem ser aplicados a qualquer tema.
Os primeiros passos a serem dados
Para criar um tema filho, você precisa de apenas uma pasta e dois arquivos. Crie uma nova pasta para o tema filho e dê um nome a ela. Pode ser qualquer nome que você escolher, mas é uma convenção entre os desenvolvedores simplesmente designá-lo como filho do tema pai existente, como por exemplo “Twenty Twenty-One-filho”. Adicione esta pasta ao arquivo wp-content/themes do seu site.
Em geral, você só precisa de dois arquivos para criar um tema filho básico:
- style.css
- functions.php
A aparência de um tema é ditada por suas folhas de estilo – um ou mais conjuntos de códigos que estabelecem as regras para todos os aspectos da aparência do site, como fontes e tamanhos de fonte, cores, espaçamento e layout dos elementos na página. Para criar uma nova folha de estilo para seu tema filho, crie um novo arquivo de texto e rotule-o como “style.css”. Coloque-o na pasta do tema filho. Para fazer a nova folha de estilo funcionar corretamente, você precisará inserir um código chamado cabeçalho da folha de estilo. O cabeçalho adiciona informações necessárias, como o nome do novo tema, o nome do modelo ou tema pai e informações de licenciamento.
Abaixo temos um exemplo.
| /* Theme Name: Twenty Twenty One Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Twenty One Child Author: John Doe Author URI: http://example.com Template: twentytwentyone Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentytwentyone */ |
Observe as barras e os asteriscos. Isso significa que esse código será “comentado” em CSS, para que o WordPress não tente executá-lo.
Você pode adicionar CSS personalizado mais tarde, quando estiver pronto para começar a personalizar seu tema filho.
Por enquanto, clique em Salvar para que esta folha de estilo seja salva no diretório do seu tema filho.
Enfileirando a folha de estilos do tema filho
Agora é hora de enfileirar as folhas de estilo dos temas pai e filho. Isso garantirá duas coisas:
1- Que o tema filho herda o estilo do tema pai. Portanto, quando você ativa seu tema filho, não está apenas olhando para um monte de texto sem estilo.
2- Que a folha de estilo do tema filho seja carregada antes do tema pai — sem substituí-la. Dessa forma, depois que você adicionar CSS personalizado e modificar seu tema filho, essas modificações aumentarão ou substituirão certos estilos e funções do tema pai.
Infelizmente, esta etapa pode ser um pouco mais complicada porque o código que você precisa usar dependerá em parte de como seu tema pai é codificado e para isso vamos editar o arquivo functions.php que criamos no tema filho. Vejamos o exemplo abaixo:
| <?php add_action( ‘wp_enqueue_scripts’, custom_theme_enqueue_styles); function custom_theme_enqueue_styles() { wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ ); } ?> |
Observações
No entanto, se esse código não estiver funcionando, seu tema pode estar codificado de maneira diferente ou pode não estar seguindo as convenções de código do WordPress. Nesse caso, você pode consultar o WordPress Codex ou tentar um dos outros métodos que compartilharemos mais adiante neste post.
Instalando o seu tema filho
Salvando os arquivos do Tema Filho em um arquivo zip
Depois de criar os dois arquivos necessários – “style.css” e “functions.php” – você tem tudo o que precisa para um tema filho básico.
Agora vamos criar um pacote do tema filho que criamos comprimindo a pasta do tema como um arquivo zip, que você pode instalar por meio do painel do WordPress, você precisa compactar a pasta do tema filho como um arquivo Zip.
No Windows e no macOS, você poderá fazer isso clicando com o botão direito do mouse na pasta do computador local e selecionando a opção de compactar como um arquivo Zip.
Instalando o tema no wordpress
Agora, você pode instalar este arquivo Zip como faria com qualquer outro tema do WordPress.
Para fazer o upload do arquivo, acesse o painel do WordPress e clique em Aparência > Temas > Carregar tema. Em seguida, use o seletor de arquivos para selecionar o arquivo Zip que você acabou de criar e clique em Instalar agora.
Depois de carregá-lo, você deve ver uma mensagem do WordPress informando que requer um tema pai e confirmando que o tema pai está instalado.
Ativando o Tema Filho
Se tudo estiver correto, clique no botão Ativar.
Boas notícias: seu tema filho já está ativo! Você deve ver os detalhes corretos ao abrir o tema em seu painel.
Principais formas de personalizar o seu tema filho
Existem três maneiras principais de usar seu tema filho para personalizar seu tema pai:
- CSS personalizado.
- Acrescentando trechos de código ao functions.php.
- Criando arquivos com templates personalizados.
Criando um CSS personalizado
Para personalizar seu tema filho, você provavelmente começará adicionando CSS ao arquivo style.css no diretório do tema filho. É uma das maneiras mais fáceis de fazer alterações na aparência do seu tema.
Se você deseja personalizar o esquema de cores, preenchimento, tipografia ou outros elementos de design fundamentais do tema pai, basta adicionar o código à folha de estilo do tema filho abaixo do comentário do cabeçalho. Este código substituirá o código na folha de estilo do seu tema pai.
Acrescentando trechos de código ao functions.php
Para modificar a funcionalidade do tema pai, você precisa adicionar funções ao arquivo functions.php no diretório do tema filho.
Por exemplo, se você quiser permitir que escritores e outros usuários formatem suas postagens de maneiras diferentes, você pode usar a função add_theme_support().
Para permitir que eles editem postagens como notas, links, uma galeria de imagens, citações, uma única imagem ou vídeo, adicione o seguinte ao seu arquivo functions.php no diretório do tema filho:
| add_theme_support( ‘post-formats’, array ( ‘aside’, ‘gallery’, ‘quote’, ‘image’, ‘video’ ) );
|
Você pode colocar quantas funções quiser entre as tags PHP de abertura e fechamento do seu arquivo.
Criando arquivos com templates personalizados.
Por fim, você também pode usar seu tema filho para modificar diretamente os modelos de seu tema pai, como o modelo para postagens de blog individuais ou para o cabeçalho do seu site.
No entanto, isso exigirá um conhecimento sólido de PHP e HTML, pois você trabalhará diretamente com essas linguagens. Você também vai querer entender a hierarquia de templates do WordPress.
Se você não se sentir confortável com essas tecnologias, pode pular isso ou usar um construtor visual como Elementor Pro ou Divi.
Para editar um arquivo de modelo, primeiro você precisa copiar esse arquivo de modelo da pasta do tema pai para a pasta do tema filho.
Por exemplo, para editar o modelo de postagem única, você deve copiar o arquivo single.php do tema pai para o tema filho.
Em seguida, você pode fazer edições de código diretas no arquivo single.php no diretório do seu tema filho. Quando existe um arquivo de modelo nas pastas do tema pai e do tema filho, o WordPress usará o arquivo do tema filho.
No entanto, como você adicionou o arquivo de modelo ao tema filho, ele não será substituído quando você atualizar o tema pai.
E é isso! Seu tema infantil está pronto. Teste seu site em um ambiente de preparação do WordPress e, em seguida, envie suas alterações ao vivo.
Outras maneiras de criar o seu tema filho
Embora as instruções acima demonstrem como é possível criar um tema filho do WordPress manualmente, talvez você não precise seguir este caminho.
Aqui estão outras opções para começar a trabalhar com um temas filhos no seu site.
Veja se o desenvolvedor do seu tema oferece um tema filho pré-criado
Como usar um tema filho é essencial se você quiser fazer modificações em seu tema, muitos desenvolvedores de temas fornecem um tema filho pré-criado que você pode usar junto com o tema pai.
Normalmente, você deve encontrar um link para esse tema filho na documentação de suporte do desenvolvedor do tema. Ou você pode entrar em contato com o desenvolvedor do tema para obter ajuda.
Por exemplo, o popular tema Astra oferece sua própria ferramenta geradora de tema filho do WordPress que criará os arquivos necessários para você.
O mesmo é verdade para a maioria dos outros temas populares.
Use um plugin criador de tema filho do wordpress
Se o desenvolvedor do seu tema não oferecer um tema filho pré-criado (e você não quiser usar o método manual), você também pode usar um plug-in de tema filho do WordPress para gerar seu tema filho.
Aqui estão alguns dos plugins de tema infantil gratuitos mais populares.
- Child Theme Wizard
- WP Child Theme Generator
- WPS Child Theme Generator
- Child Theme Creator by Orbisius
Use uma página geradora de temas filhos para o WordPress.
Além dos plugins, você também pode usar um site gerador de temas filhos do WordPress.
O site gratuito Child Theme Generator é uma das opções mais populares. Tudo o que você precisa fazer é inserir algumas informações básicas e o site permitirá que você baixe os dois arquivos principais para o seu tema filho.
Se o seu tema pai estiver listado no WordPress.org, o site também pode tentar preencher previamente as informações para você.
Seu tema filho não funciona?
Se o seu tema filho não está funcionando aqui estão algumas etapas que você pode verificar:
1 – Verifique o seu arquivo functions.php
Certifique-se de que você enfileirou a folha de estilo do seu tema filho em seu arquivo functions.php. Se você não o colocou na fila, seu tema filho não será carregado.
Seu site permanecerá no tema pai, então tudo ficará bem. O problema é que as alterações feitas no tema filho não aparecerão no front end. Consulte a etapa 3 acima para adicionar o código de enfileiramento ao seu arquivo PHP.
2 – Garanta que sua folha de estilos está com o nome “style.css”
Certifique-se de que nomeou sua folha CSS como “style.css” e não “stylesheet.css”. Como “style.css” é a convenção de nomenclatura padrão do WordPress, usar esse nome de arquivo permitirá que seu arquivo functions.php saiba automaticamente que essa é sua folha de estilo. Se você nomear sua folha de estilo com qualquer outra coisa, o arquivo functions.php não poderá recuperá-la e renderizá-la para o usuário final.
3 – Certifique-se de ter usado o nome do tema correto no header do seu style.css.
Se você não inserir o nome do tema pai adequado no header do seu arquivo style.css, o WordPress não saberá qual tema é o pai.
Novamente, o nome do modelo deve ser o nome da pasta que contém seu tema pai.
4 – Limpe o seu cache
Tente limpar o cache do WordPress – seu servidor WordPress pode estar mostrando uma versão mais antiga do seu site.
Também vale verificar se você instalou um plugin de cache para melhorar a velocidade do seu site, também pode desativá-lo enquanto estiver trabalhando em seu tema filho.
Além de limpar o cache do WordPress, você também deve limpar o cache do navegador pelo mesmo motivo. Como alternativa, abra seu site em uma janela anônima para ver as alterações publicadas.