Como criar um tema filho do WordPress

Normalmente, é quase impossível encontrar o tema perfeito; sempre há algumas modificações que precisam ser feitas. Então, por que não pegar um bom tema padrão do WordPress, como Twenty Fifteen, e torná-lo seu para que pareça e funcione do jeito que você deseja? Criar um tema filho economizará muito tempo e dores de cabeça no caminho (confie em mim).

Posso falar por experiência própria. Eu “herdei” um site WordPress onde o desenvolvedor havia acabado de hackear o tema pai, e ainda me lembro de como foi frustrante não poder atualizar o tema com medo de substituir as personalizações que deram ao site sua funcionalidade. Eu não sabia o que era código original e o que era customizado, então lá estava ele, sem possibilidade de atualizações.

A história tem um final feliz, no entanto. Eu era mais novo no WordPress na época, então ele me ensinou desde cedo que alterar um tema pai não era uma boa ideia. Quando o site foi finalmente redesenhado, o primeiro item do negócio foi pegar as customizações e colocá-las em um tema filho.

Um tema filho permite que você trabalhe em um local separado sem que seu trabalho seja substituído por uma atualização futura do tema pai. Tecnicamente falando, ao criar um tema filho, você cria um conjunto separado de arquivos que pode usar para personalizar o tema sem afetar o tema pai original. Se você fizer alterações nos arquivos de um tema pai, essas alterações serão substituídas na próxima atualização do tema. Isso é importante porque as atualizações podem incluir modificações de recursos, correções de bugs e medidas de segurança importantes. É crucial manter o tema pai atualizado e usar um tema filho para qualquer personalização.

Noções básicas do tema filho

Temas filho são temas separados que você cria e que dependem de um tema pai para sua funcionalidade básica. Quando você usa um tema filho, o WordPress sabe fazer referência a ele e procurar por qualquer funcionalidade incluída. Isso é ótimo porque permite que você modifique apenas as partes do tema pais que você precisa alterar, tornando essa uma maneira muito eficiente de adicionar personalizações ao seu site WordPress.

Para aprofundar um pouco mais, veja como os temas filhos funcionam no nível do arquivo. O WordPress verifica se um arquivo necessário está incluído no tema filho. Se estiver incluído, esse arquivo de tema filho será carregado. Se não houver um no tema filho, o arquivo no tema pai será carregado. A única exceção a isso é o arquivo functions.php, no qual as versões pai e filho são carregadas. Normalmente, há informações cruciais no arquivo functions.php. Se o WordPress carregasse apenas a versão do tema filho (a menos que você copiasse tudo), o site não funcionaria direito. Felizmente, o WordPress carrega os dois arquivos, então você não precisa se preocupar em copiar o arquivo functions.php inteiro para o seu tema filho.

Lembre-se, você sempre pode desativar o tema filho e voltar ao original, se necessário. É uma rua de mão única; você não pode desligar o pai e confiar no tema filho.

Se você estiver adicionando personalizações a um tema do WordPress, é melhor usar um tema filho. Pronto para criar o seu próprio? Agora vamos passar pelo processo, passo a passo.

Criando um tema filho

Não é tão complexo como pode parecer criar um. Na verdade, tecnicamente tudo que você precisa são apenas dois arquivos: um style.css e um arquivo functions.php . A maioria dos temas filhos tem mais do que isso, mas tecnicamente falando, esses são os dois únicos necessários.

Para criar um tema filho, você precisa ter o WordPress instalado junto com um tema pai que gostaria de usar.

Crie um diretório de temas

Primeiro, vá para o diretório do seu tema e crie uma pasta para o seu novo tema. Dê-lhe um nome reconhecível. Para este exemplo, vou nomear meu tema child-example para que seja fácil de encontrar.

Faça a folha de estilo do tema filho

A próxima etapa crucial é criar a folha de estilo do tema filho. Crie um arquivo style.css . Tenha em mente que tem que ser nomeado style.css para que as coisas funcionem corretamente.

Em seguida, você precisará incluir algumas informações sobre o seu tema.

Copie e cole isso no style.css file :

/*
 Theme Name:   Child Example
 Theme URI:    http://example.com/child-exxample/
 Description:  Child Example Twenty Fifteen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyfifteen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
 Text Domain:  twenty-fifteen-child
*/

Isso pode parecer muito, mas na verdade existem apenas dois que são necessários, que são Theme Name e Template . O Theme Name informa ao WordPress o nome do tema filho. O Template informa ao WordPress qual tema ele deve considerar como tema pai, o que é muito importante.

A maioria dos outros é bastante autoexplicativa, mas há alguns que podem precisar de um pouco mais de esclarecimento. O Text Domain e as Tags podem ser um pouco confusos. O Text Domain é usado para traduzir strings para fins de internacionalização. Isso é exclusivo para seu tema e deve ser usado sempre que você usar funções de tradução. Há muito mais informações no Codex e podem ser encontradas no tópico I18n for WordPress Developers. A seção Tags é uma lista de tags que são específicas do tema WordPress. Para este exemplo, eu olhei para o pai Twenty Fifteen style.css , peguei as tags de lá e as coloquei no tema filho.

Utilize estilos pai

Lembre-se de como o WordPress procura os arquivos do tema filho primeiro? No momento, o tema filho funciona, mas não parece muito polido porque você ainda não fez nenhum estilo. Se você ativá-lo e recarregar a página, ficará um pouco confuso. Provavelmente será algo assim:

Vamos corrigir isso para que ele volte ao tema pai e haja pelo menos algum estilo aplicado. Você ainda usará seu tema filho para seu estilo personalizado, mas primeiro, vamos mostrar o estilo pai.

Para garantir que você carregue a folha de estilo do arquivo pai, precisaremos enfileirar o tema filho. Você precisará de um arquivo functions.php no tema filho para colocar o seguinte trecho.

<?php

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

Fazendo uma customização de CSS

Agora que os estilos pai estão sendo exibidos, vamos alterar alguns dos CSS para a personalização do seu tema filho. Para este exemplo, estilizar um elemento de plano de fundo para o conteúdo da página é uma boa maneira de ver o tema filho em ação. Ele foi estilizado como branco no CSS do tema pai, mas vamos alterá-lo para azul no tema filho. Lembre-se, os estilos pai são carregados primeiro e suas personalizações serão carregadas depois, então essas serão as que veremos.

Se você for um usuário do Chrome, as Ferramentas do desenvolvedor são muito úteis para ver o estilo e experimentar no navegador. Vá para Exibir > Desenvolvedor > Exibir código-fonte e selecione os elementos da página. Os estilos serão mostrados à direita. Inspecionei o artigo que tinha uma classe .hentry com fundo branco. Colei um valor hexadecimal para testá-lo primeiro no navegador.

Para fazer essa alteração, abra o arquivo CSS no tema filho e adicione as informações de CSS.

Como você pode ver, mudanças de estilo podem ser feitas facilmente no tema filho.

Modificando a funcionalidade do seu tema filho

Ajustar o estilo é muito fácil, mas e outras coisas como cabeçalho, rodapé, barra lateral, etc.? Digamos que há algumas modificações a serem feitas no rodapé. Copie e cole o rodapé do tema pai no filho. O arquivo footer.php pode ser aberto no editor de texto de sua escolha e modificado. Eu decidi remover a linha “Proudly powered by WordPress”, então eu deletei isso do arquivo no meu tema filho. Este é agora o arquivo que o WordPress carregará primeiro, para que a linha de texto não seja exibida.

Criar um tema filho é um bom hábito ao criar temas do WordPress. Com apenas alguns passos simples, eles são fáceis de criar e manter. Manter as personalizações separadas dos temas pai é bom para fins de organização e manter tudo atualizado, o que economizará muita dor de cabeça no futuro.