Como criar um tema filho no WordPress (passo a passo)

Você já atualizou seu tema WordPress apenas para descobrir que todas as alterações personalizadas que você fez no próprio tema foram perdidas? Um tema filho do WordPress é a solução para evitar esse problema e neste artigo vamos mostrar exatamente como criar um.

Vamos indo!

O que é um tema filho do WordPress

Um tema filho do WordPress não é considerado um tema completo como os que podem ser encontrados no diretório de temas do WordPress. Em vez disso, depende completamente de outro tema (chamado Tema pai) para poder ser ativado e funcionar corretamente.

Quando ativado, ele herda toda a funcionalidade, recursos e código de seu tema pai sem fazer alterações nos arquivos do tema pai.

O WordPress servirá o código do tema pai, exceto as partes que são substituídas pelo tema filho, que serão servidas a partir da pasta do tema filho. O resultado disso significa que quando o tema pai é atualizado, quaisquer modificações/adições e assim por diante feitas no tema filho não são perdidas.

Criando um tema filho (passo a passo)

Antes de prosseguir, certifique-se:

• Você tem acesso aos arquivos do seu site através de um cliente FTP (como WinSCP ou Filezilla)
• Você tem um editor de texto disponível (como o notepad++).

Para começar, vamos ativar um tema padrão que também é chamado de Tema Pai. Neste exemplo, esse será o tema Twenty Twenty. Se formos para o front-end do nosso site, veremos algo assim:

Agora vamos criar e ativar um tema filho 'Twenty Twenty'.

Adicione o diretório

Primeiro, temos que criar um novo diretório 'twentytwenty-child'' dentro de /wp-content/themes. Observe que a pasta filha pode ter o nome que você quiser, desde que não use espaços ou pontuação.

Adicione o arquivo style.css

Em seguida, temos que criar um arquivo style.css e adicionar os cabeçalhos de tema apropriados. Antes de continuar vamos dar uma olhada no style.css do tema pai .

Vamos ver onde essas informações refletem na área de administração.

Primeiro, abra os detalhes do tema em Aparência > Temas e dê uma olhada na coluna da direita.

Se compararmos isso com a folha de estilo, veremos de onde vários elementos dessa informação são extraídos.

Precisamos começar a adicionar algumas dessas informações à nossa folha de estilo do tema filho. As informações mínimas exigidas que devem ser inseridas como cabeçalhos são o 'Nome do Tema' e o 'Modelo'.

 /* Theme Name: Twenty Twenty - Child Template: twentytwenty */

• Nome do Tema: O nome desejado do seu Tema Filho que será exibido no back-end do WordPress.
• Modelo: Deve ser idêntico ao nome do diretório do tema pai. É o cabeçalho mais importante para o tema filho, pois realmente informa ao WordPress qual tema é o pai e, portanto, define a dependência. Sem ele, seu tema filho não funcionará.

Assim que o tema filho for ativado, o que você verá no backend é o seguinte:

Você também pode inserir as seguintes informações opcionais:

• Versão (versão do tema)
• Requer pelo menos (versão WP mínima necessária para o tema funcionar corretamente)
• Requer PHP (versão mínima do WP PHP para que o tema funcione corretamente)
• Descrição (detalhes relacionados ao tema)
• Tags(tags do tema)
• Autor(nome do desenvolvedor do tema)
• etc.

Neste ponto, se você abrir o front-end do seu site, poderá descobrir que ele está quebrado e se parece com isso:

Isso é totalmente normal, pois a folha de estilo (style.css) que o WordPress está referenciando agora é do tema filho e esta folha de estilo está vazia, exceto as informações que você digitou acima. Você pode iniciar seu próprio estilo do zero ou carregar o estilo do tema pai e começar por aí. Se você deseja importar a folha de estilo do tema pai, você pode fazer isso de duas maneiras.

Opção um: importar a folha de estilo pai da maneira clássica

Tudo o que você precisa fazer é simplesmente adicionar esta linha ao arquivo style.css do seu tema filho:

 @import url('../twentytwenty/style.css');

Este comando informa ao WordPress onde procurar para recuperar o arquivo CSS original. Agora, se você atualizar sua página inicial, parece que voltou ao normal. O que quer que você adicione agora no style.css substituirá o estilo pai importado. Tente, por exemplo, adicionar um tamanho de fonte diferente para o título h2 “Hello world!”.

Atualize a página e observe o inspetor de elementos das guias do desenvolvedor.

Você notará que o valor adicionado é contado e o padrão (estilo pai) “font-size: 6.4rem;” foi substituído.

O que você deve levar em consideração é que usar esse método tem uma influência negativa na velocidade do seu site, pois os arquivos são forçados a carregar um após o outro e não em paralelo. Mais especificamente, o navegador precisa baixar, analisar e executar o primeiro arquivo antes de ser “informado” de que precisa baixar o segundo arquivo.

Por esse motivo, a importação do arquivo pai style.css dessa maneira não é mais recomendada.

Opção dois: importar a folha de estilo pai da maneira certa

Para importar o arquivo pai style.css 'do jeito certo', primeiro precisamos adicionar um arquivo functions.php vazio dentro da pasta do seu tema filho.

Depois de fazer isso, abra-o com seu editor e adicione uma tag PHP de abertura (<?php), após a qual você pode adicionar o seguinte código PHP:

 function twentytwenty_scripts() { wp_enqueue_style('parent-theme-style', get_template_directory_uri() . '/style.css'); } add_action('wp_enqueue_scripts', twentytwenty_scripts);

Se você verificar as ferramentas de desenvolvedor do seu navegador agora, notará que os resultados são os mesmos da maneira 'tradicional' descrita na Opção Um acima, exceto que agora é muito mais rápido.

Algumas notas adicionais sobre o código PHP:

• O 'parent-theme-style' é o nome do identificador e deve ser exclusivo
• O get_template_directory_uri() . '/style.css' get_template_directory_uri() . '/style.css' informa ao WordPress o local de origem do local style.css pai
• O get_template_directory_uri() recupera o URI do diretório de template para nosso tema pai. No nosso caso, ele gera 'http://mywebsite.onpressidium.com/wp-content/themes/twentytwenty'

Adicione funcionalidade ao seu tema filho

Agora que você criou um tema filho, você pode começar a adicionar algumas funcionalidades adicionais. Vamos primeiro ver como você editaria o arquivo functions.php em seu tema filho e como isso funciona na prática.

Funções do Tema Filho.php

Ao contrário do arquivo style.css , quando você coloca functions.php no tema filho, o código functions.php do tema pai ainda estará em execução. Tudo o que você adicionar no arquivo functions.php do filho será executado além do conteúdo do arquivo functions.php do pai.

Por exemplo, vamos ver como podemos alterar o texto “Leia mais” para a visualização de postagens:

Etapa um: crie uma categoria de postagem de teste:

Etapa dois: crie duas novas postagens nesta categoria. Vamos adicionar algum conteúdo de exemplo. Neste ponto, se você visitar a página da categoria, verá isso:

Neste exemplo, queremos alterar o texto 'Continuar lendo' exibido no botão que carrega o post completo.

Vamos recuar um pouco para entender como esse texto é exibido. No WordPress, para modificar uma determinada função, usamos filtros.

Neste exemplo, para obter o que queremos, temos que personalizar o filtro 'the_content_more_link' que é inicialmente introduzido no arquivo principal wp-includes/post-template.php na linha 369 assim:

 $output .= apply_filters( 'the_content_more_link', ' <a href="' . get_permalink( $_post ) . "#more-{$_post->ID}\" class=\"more-link\">$more_link_text</a>", $more_link_text );

Atualmente, isso é substituído pelo tema pai vinte e vinte em seu arquivo function.php (linha 571) por este pedaço de código:

 function twentytwenty_read_more_tag( $html ) { return preg_replace( '/<a(.*)>(.*)<\/a>/iU', sprintf( '<div class="read-more-button-wrap"><a$1><span class="faux-button">$2</span> <span class="screen-reader-text">"%1$s"</span></a></div>', get_the_title( get_the_ID() ) ), $html ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' );

Portanto, se você deseja alterar o texto 'Continuar lendo' no botão, isso pode ser substituído no functions.php do seu tema filho se você adicionar este código:

 function modify_read_more_link() { return '<a class="more-link" href="' . get_permalink() . '">My Custom Read More text</a>'; } add_filter( 'the_content_more_link', 'modify_read_more_link' );

O gancho ''the_content_more_link'' é comum entre esses arquivos, caso em que o gancho do filho sempre prevalece.

Em seguida, atualize a página e pronto:

Como personalizar modelos PHP

A captura de tela acima mostra o conteúdo do modelo do tema vinte e vinte para a visualização da categoria de postagem. Então, como podemos alterar seu design ou adicionar/remover informações usando o tema filho?

Aqui está como você pode fazer isso:

1. Encontre o arquivo php relacionado
2. Copie o arquivo apropriado para a pasta do tema filho e edite
3. Personalize-o como achar melhor

O primeiro e mais comum problema aqui é que temos que descobrir qual arquivo php contém a saída que queremos editar. Algo que definitivamente o ajudará a encontrar o caminho para isso é a hierarquia de modelos do WordPress.

Em poucas palavras, os únicos arquivos que um tema WordPress realmente requer são os arquivos index.php e style.css. Os arquivos e pastas extras são, na verdade, arquivos chamados de dentro do index.php . Eles são os fragmentos do que você verá eventualmente como uma saída do arquivo index.php .

Com relação ao tema Twenty Twenty, se visualizarmos seu arquivo index.php , podemos ver na linha 79 que, quando o conteúdo é um ou mais posts, então os arquivos php do diretório template-parts/ são usados.

 if ( have_posts() ) { $i = 0; while ( have_posts() ) { $i++; if ( $i > 1 ) { echo '<hr class="post-separator styled-separator is-style-wide section-inner" aria-hidden="true" />'; } the_post(); get_template_part( 'template-parts/content', get_post_type() ); }

No nosso caso teremos que copiar o arquivo content.ph p de dentro da subpasta do tema template-parts.

Além disso, certifique-se de copiar apenas os arquivos PHP que planeja personalizar. Não copie todos os arquivos PHP no tema pai.

NOTA: A estrutura de pastas deve ser a mesma do tema filho para que as alterações sejam refletidas no front end.

Então, primeiro criamos a subpasta 'template-parts' e colocamos uma cópia de content.php nela.

Agora você pode abrir o arquivo em seu editor e personalizá-lo.

Tente alterar algo trivial no início para garantir que tudo funcione bem, por exemplo, altere uma classe div e atualize seu frontend para verificar os resultados.

Personalize o modelo de categoria de postagem

Já temos dois posts na categoria 'categoria de teste'. Agora você pode criar um menu de item “'Post Category”' e vinculá-lo à 'categoria de teste'. Se você clicar no novo item de menu, deverá ver a página de visualização da categoria de postagem.

Agora você pode modificar ainda mais o arquivo content.php e alterar a visualização da categoria de postagem para seu próprio estilo. Como dica, encontre as referências dos arquivos extras incluídos como na linha 23:

 get_template_part( 'template-parts/featured-image' );

Isso significa que o arquivo que gera a imagem em destaque é template-parts/featured-image.php

Assim, você pode copiar o arquivo no diretório do tema filho e editá-lo. Fantástico!

Conclusão

Um tema filho permite que os usuários modifiquem o layout, o estilo e a funcionalidade do tema pai sem perder a capacidade de atualizar o tema pai. Freqüentemente, os web designers relutam em atualizar o tema de seu site, pois sabem que, se o fizerem, perderão as alterações feitas diretamente no tema pai. Este é um problema sério, pois é tão importante manter seu tema atualizado quanto seus plugins e núcleo do WordPress. Trabalhar com um tema filho desde o início remove esse problema e permite que você atualize o tema pai conforme necessário, sem medo de substituir todas as edições feitas no tema como um todo.