Tutorial: Como criar um WordPress tema filho

O WordPress, que nasceu como uma simples pla­ta­forma de blogs, evoluiu para um CMS popular e fácil de usar, que abriga grande parte dos sites da internet. Entre as fa­ci­li­da­des deste sistema estão, jus­ta­mente, temas WordPress: modelos de design prontos para uso, com as prin­ci­pais fun­ci­o­na­li­da­des já in­cor­po­ra­das. Contudo, muitos usuários gostam de dar um toque pessoal e per­so­na­li­zar estes modelos, re­a­li­zando ajustes no código-fonte, que alteram a estética e o layout. Um tema filho é usado no WordPress jus­ta­mente para dar segurança às al­te­ra­ções, evitando que elas se percam após processos de atu­a­li­za­ção.

O que é um WordPress tema filho?

Para evitar que a atu­a­li­za­ção de um tema apague al­te­ra­ções feitas por você na versão anterior, crie um tema filho no seu WordPress. Como o nome já indica, o tema filho herda as ca­rac­te­rís­ti­cas do tema pai (versão original), assim como sua aparência e suas funções. Ao criar um tema filho no WordPress, também chamado de child theme WordPress, você garante que sua per­so­na­li­za­ção não se perca em processos de atu­a­li­za­ção, pois ela não será au­to­ma­ti­ca­mente apagada e subs­ti­tuída.

Com­po­nen­tes de um WordPress tema filho

Com­po­nen­tes de um tema filho do WordPress podem variar, a depender das al­te­ra­ções re­a­li­za­das por você e de onde (em que arquivos) elas se encontram. Em todo caso, alguns arquivos sempre devem ser criados para que um tema filho funcione cor­re­ta­mente. São eles:

• style.css (CSS style sheet)
• function.php
• scre­enshot.png (opcional)

Ex­pli­ca­re­mos, a seguir, a im­por­tân­cia de cada um deles.

Como funciona um WordPress tema filho

Um tema filho só fun­ci­o­nará no WordPress se você criar os três arquivos acima men­ci­o­na­dos. Cada um tem uma função:

• style.csscontém todas as regras e de­cla­ra­ções de CSS que controlam a aparência do tema. O trecho mais im­por­tante deste arquivo é o cabeçalho (header). Além de conter as in­for­ma­ções básicas mais im­por­tan­tes, este indica a exis­tên­cia do tema filho, assim como do tema pai.
• function.php determina a ordem de car­re­ga­mento das folhas de estilo e dos temas pai e filho. Para que al­te­ra­ções no tema filho sejam aplicadas ao tema pai, o navegador deve carregar pri­mei­ra­mente a folha de estilo do tema filho e somente depois a folha de estilo do tema pai.
• scre­enshot.pngapesar deste se tratar de um arquivo opcional, re­co­men­da­mos sua criação para que você reconheça ime­di­a­ta­mente seu tema filho no back-end (o WordPress exibe au­to­ma­ti­ca­mente o arquivoscre­enshot.png no menu do tema utilizado).

Vantagens e des­van­ta­gens de um WordPress tema filho

Um child theme WordPress tem diversas vantagens. Contudo, des­van­ta­gens devem ser con­si­de­ra­das antes de optar por esta solução. Por exemplo, criar um tema filho para armazenar somente pequenos ajustes no CSS pode não ser tão in­te­res­sante. Analise a tabela para tomar uma decisão:

Tutorial passo a passo para criar um WorPress tema filho

Agora que você já entendeu a im­por­tân­cia de um tema filho no WordPress, é hora de aprender a criá-lo. Para isso, siga nosso passo a passo.

Passo 1: Crie um diretório para o tema filho

Usando um cliente FTP como o Filezilla, faça login no seu servidor e encontre o seguinte diretório na ins­ta­la­ção WordPress:

caminho-para-sua-instalação-wordpress/wp-content/themes/

No diretório de temas, crie um sub­di­re­tó­rio onde seu child theme WordPress ficará ar­ma­ze­nado. Sugerimos que você dê a este diretório o mesmo nome dado ao tema pai, seguido do sufixo “-child”.

Passo 2: Crie uma folha de estilo para o tema filho

Crie um arquivo style.css e use um editor de texto para adicionar as seguintes in­for­ma­ções ao cabeçalho:

/* 
 Theme Name:	[Nome do tema pai] Child 
 Theme URI:	[http://exemplo.com/parent-theme/] 
 Description:	[Nome do tema pai] Child Theme 
 Author:	[Seu nome] 
 Author URI:	[O URL do seu site] 
 Template:	[Nome do diretório onde está o tema pai]  
 Version:	1.0.0 
Text Domain:	[Nome do tema pai] -child 
*/

Coloque suas próprias in­for­ma­ções nos trechos entre colchetes. Não é ne­ces­sá­rio, contudo, inserir todas as linhas ao arquivo. As obri­ga­tó­rias são:

• Theme name: Todo tema (pai ou filho) precisa ter um nome. Este nome deve serexclusivo, não utilizado por nenhum outro tema da sua ins­ta­la­ção WordPress.
• Template: Informa ao WordPress a qual tema pai o tema filho está ligado.

Depois de criar o arquivo style.css e adicionar as in­for­ma­ções ne­ces­sá­rias, carregue-o no diretório do tema filho, via FTP.

Passo 3: Cer­ti­fi­que-se de que a folha de estilo será carregada cor­re­ta­mente no function.php

Ide­al­mente, seu tema principal já conterá ins­tru­ções para carregar a folha de estilo de um possível tema filho. En­tre­tanto, nem sempre isso acontece. Por isso, verifique como seu tema pai está con­fi­gu­rado. São três as pos­si­bi­li­da­des:

1. O tema pai está con­fi­gu­rado para carregar ambas as folhas de estilo. Neste caso, o tema filho não precisará fazer nada.
2. O tema pai carrega a própria folha de estilos por get_template_directory() ou get_template_directory_uri(). Neste caso, o tema filho precisará carregar a própria folha de estilo usando o iden­ti­fi­ca­dor da folha de estilo do tema pai como parâmetro, no function.php.
3. O tema pai carrega a própria folha de estilo por get_sty­lesheet_directory() ou get_sty­lesheet_directory_uri(). Neste caso, o tema filho precisará carregar ambas as folhas de estilo no function.php. Cer­ti­fi­que-se de usar o mesmo nome de iden­ti­fi­ca­dor que o tema pai usa para os estilos dele.

Abaixo, apre­sen­ta­mos um exemplo de código relativo à segunda pos­si­bi­li­dade:

<?php 
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); 
function my_theme_enqueue_styles() { 
wp_enqueue_style( 'child-style', get_stylesheet_uri(), 
array( 'Nome da folha de estilo do tema pai'),  
wp_get_theme()->get('Version') // Só funcionará se seu cabeçalho contiver a linha de versão (version)
); 
} 
?>

Se o tema filho precisar carregar ambas as folhas de estilo no function.php, como na terceira pos­si­bi­li­dade, você en­con­trará o seguinte código:

<?php 
function child_theme_styles() { 
wp_enqueue_style( 'Nome da folha de estilo do tema pai', get_template_directory_uri() . '/style.css');  
wp_enqueue_style( 'child-theme-css', get_stylesheet_directory_uri() .'/style.css' , array('Nome do identificador da folha de estilo do tema pai')); 
} 
add_action( 'wp_enqueue_scripts', 'child_theme_styles' ); 
?>

Coloque tanto o arquivo function.php quanto o arquivo style.css no diretório do tema filho do WordPress.

Passo 4: Habilite seu WordPress tema filho

Depois de criar um tema filho no seu WordPress, você precisa ativá-lo no back-end, como deve fazer com qualquer outro tema. Faça login, localize o tema filho em “Aparência” > “Temas” e ative-o.

Se você seguiu os passos deste tutorial, seu child theme WordPress estará pronto para ser usado. Se quiser fazer al­te­ra­ções em outro arquivo de template, pri­mei­ra­mente copie este arquivo do diretório do tema pai e cole-o no diretório do tema filho — o caminho deve cor­res­pon­der ao do tema pai. Assim, o arquivo mo­di­fi­cado no diretório do tema filho subs­ti­tuirá au­to­ma­ti­ca­mente o arquivo existente no tema pai.