Tutorial: Como criar um WordPress tema filho

O WordPress, que nasceu como uma simples plataforma de blogs, evoluiu para um CMS popular e fácil de usar, que abriga grande parte dos sites da internet. Entre as facilidades deste sistema estão, justamente, temas WordPress: modelos de design prontos para uso, com as principais funcionalidades já incorporadas. Contudo, muitos usuários gostam de dar um toque pessoal e personalizar estes modelos, realizando ajustes no código-fonte, que alteram a estética e o layout. Um tema filho é usado no WordPress justamente para dar segurança às alterações, evitando que elas se percam após processos de atualização.

O que é um WordPress tema filho?

Para evitar que a atualização de um tema apague alteraçõ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 características 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 personalização não se perca em processos de atualização, pois ela não será automaticamente apagada e substituída.

Componentes de um WordPress tema filho

Componentes de um tema filho do WordPress podem variar, a depender das alterações realizadas 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 corretamente. São eles:

• style.css (CSS style sheet)
• function.php
• screenshot.png (opcional)

Explicaremos, a seguir, a importância de cada um deles.

Como funciona um WordPress tema filho

Um tema filho só funcionará no WordPress se você criar os três arquivos acima mencionados. Cada um tem uma função:

• style.csscontém todas as regras e declarações de CSS que controlam a aparência do tema. O trecho mais importante deste arquivo é o cabeçalho (header). Além de conter as informações básicas mais importantes, este indica a existência do tema filho, assim como do tema pai.
• function.php determina a ordem de carregamento das folhas de estilo e dos temas pai e filho. Para que alterações no tema filho sejam aplicadas ao tema pai, o navegador deve carregar primeiramente a folha de estilo do tema filho e somente depois a folha de estilo do tema pai.
• screenshot.pngapesar deste se tratar de um arquivo opcional, recomendamos sua criação para que você reconheça imediatamente seu tema filho no back-end (o WordPress exibe automaticamente o arquivoscreenshot.png no menu do tema utilizado).

Vantagens e desvantagens de um WordPress tema filho

Um child theme WordPress tem diversas vantagens. Contudo, desvantagens devem ser consideradas 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 interessante. Analise a tabela para tomar uma decisão:

Tutorial passo a passo para criar um WorPress tema filho

Agora que você já entendeu a importância 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 instalação WordPress:

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

No diretório de temas, crie um subdiretório onde seu child theme WordPress ficará armazenado. 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 informaçõ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 informações nos trechos entre colchetes. Não é necessário, contudo, inserir todas as linhas ao arquivo. As obrigató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 instalaçã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 informações necessárias, carregue-o no diretório do tema filho, via FTP.

Passo 3: Certifique-se de que a folha de estilo será carregada corretamente no function.php

Idealmente, seu tema principal já conterá instruções para carregar a folha de estilo de um possível tema filho. Entretanto, nem sempre isso acontece. Por isso, verifique como seu tema pai está configurado. São três as possibilidades:

1. O tema pai está configurado 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 identificador 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_stylesheet_directory() ou get_stylesheet_directory_uri(). Neste caso, o tema filho precisará carregar ambas as folhas de estilo no function.php. Certifique-se de usar o mesmo nome de identificador que o tema pai usa para os estilos dele.

Abaixo, apresentamos um exemplo de código relativo à segunda possibilidade:

<?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 possibilidade, você encontrará 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 alterações em outro arquivo de template, primeiramente copie este arquivo do diretório do tema pai e cole-o no diretório do tema filho — o caminho deve corresponder ao do tema pai. Assim, o arquivo modificado no diretório do tema filho substituirá automaticamente o arquivo existente no tema pai.