Hoje aprenderemos um conceito básico da criação de temas: como criar um tema filho para WordPress.
O que são temas filho e qual a sua importância?
Começando do começo… Um tema filho WordPress é um tema do WordPress que herda sua funcionalidade de outro tema chamado, claro, tema pai.
Os temas filho são freqüentemente usados quando você deseja personalizar ou ajustar um tema existente do WordPress sem perder a capacidade de atualizar esse tema. Vamos supor que você queira fazer modificações em um dos temas padrões do WordPress, como o Twenty Seventeen, por exemplo. Você pode pensar que a maneira mais fácil é sair editando os arquivos do tema. Você até resolverá seu problema de imediato, mas se verá em apuros quando necessitar de atualizar o tema, pois todas as suas alterações serão perdidas.
No passado, não havia nenhuma maneira fácil de atualizar temas do WordPress sem perder todo o estilo personalizado e as alterações que você tinha feito. Atualizações de segurança não são tão raras e, se você tiver feito alterações no tema, mesmo que mínimas, perderá elas todas. É aí que reside a importância de criar um tema filho ao modificar um tema já existente.
Um tema filho no WordPress herdaria todas as funcionalidades, recursos e o código do tema pai sem fazer nenhuma alteração no próprio tema pai.
Na teoria, qualquer tema do WordPress pode ter temas filhos, mas nem todos os temas WordPress são bons temas pai. Via de regra, os temas nativos do WordPress, cujos nomes começam com a palavra Twenty , são bons pontos de partida como temas pai. Já um tema pai com funcionalidades e recursos limitados não é exatamente um candidato ideal para o tema pai na maioria dos casos. Outros candidatos bom são os frameworks, como o Genesis, que geralmente contém suas próprias ações, ganchos e filtros. Isso permite que designers e desenvolvedores criem um site WordPress robusto personalizado usando temas filho em muito pouco tempo.
Além de todas as vantagens, usar temas filho no desenvolvimento de um tema é uma ótima maneira de conhecer melhor a estrutura do próprio WordPress.
Como escolher um tema pai?
Nem todos os temas pai são bons candidatos para você criar seus temas filhos. Eu mesmo já caí na besteira de pegar o tema Twenty Fifteen, criar um tema filho a partir dele e desfigurá-lo totalmente para conseguir o visual que eu queria. Isso é totalmente contraproducente. Apenas crie um tema filho se você quer fazer pequenas modificações no tema pai, usando todas as funcionalidades que você acha legal nele, mas não a ponto de reescrevê-las totalmente.
Então, se você estiver criando um tema filho e se ver substituindo muitos dos arquivos do tema pai, então você deve repensar o que está fazendo. Por exemplo, você realmente gosta do tema Twenty Fifteen e decidiu criar um tema filho a partir dele. Você decidiu que não gosta da maneira como o rodapé aparece, daí adiciona um footer.php ao tema filho. O mesmo acontece para o cabeçalho, que você decide também reescrever. Se este for o caso, então você não deveria estar usando o Twenty Fifteen como um tema pai. Em vez disso, você deve usá-lo como um tema base para o seu próprio tema personalizado.
Era o que eu fazia num passado distante… Criava temas filhos personalizados que deveriam ser temas totalmente independentes porque eles substituíam quase todos os arquivos de tema pai. Não faça isso!
Afinal, como criar um tema filho para WordPress?
Primeiramente, se você não tem paciência para ler, pode ver a versão em vídeo deste tutorial.
Bom, agora que você entendeu o que é e qual a importância de um tema filho, vamos pôr a mão na massa. Vamos usar como exemplo o tema Twenty Fifteen do WordPress, que você deve ter instalado, pois ele já vem por padrão no WordPress.
Comece criando uma pasta em seu diretório wp-content/themes/ e coloque o nome dele como twentyfifteen-child. Depois, crie um arquivo em branco nesta pasta chamado style.css e adicione o seguinte:
/* Theme Name: Twenty Fifteen Child Template: twentyfifteen */
Alguns pontos para observar:
- O nome da pasta pode ser qualquer nome. Usamos twentyfifteen-child, mas poderia ter sido twentyfifteen-filho, ou qualquernomequequiser. Só não use acentuação, espaços ou caracteres especiais
- O arquivo style.css tem que iniciar com o comentário mostrado acima. Você pode usar outras tags como Description, Theme URI etc
- A tag Theme Name refere-se ao nome do seu tema filho. Você pode também dar o nome que quiser
- A tag Template obrigatoriamente tem que ter o nome da pasta onde está o tema pai. No nosso caso, a pasta se chama twentyfifteen
O passo final é definir as folhas de estilo do tema pai e filho. Antigamente tínhamos que importar a folha de estilo do tema pai usando @import: isso não é mais uma prática recomendada, pois aumenta o tempo necessário para carregar folhas de estilo. O método correto de enfileirar a folha de estilo do tema pai é adicionar uma ação wp_enqueue_scripts e usar wp_enqueue_style() no arquivo functions.php do seu tema filho.
Logo, o próximo passo será criar um arquivo chamado functions.php na pasta do tema filho. A primeira linha do functions.php do tema do seu filho será uma tag de abertura PHP (<? php). Tendo isso, você poderá enfileirar as folhas de estilo do tema pai e as específicas que você criará para seu tema filho.
Abaixo temos uma função chamada enfileira_estilos(). Ela será a responsável por identificar e carregar (enfileirar) a folha de estilo do tema pai quando o tema filho estiver ativo. Mas observe que ela só funcionará se o tema pai usar apenas um style.css principal para armazenar todas as regras css.
<?php
add_action( 'wp_enqueue_scripts', 'enfileira_estilos' );
function enfileira_estilos() {
wp_enqueue_style( 'estilo-tema-pai', get_template_directory_uri() . '/style.css' );
}
Se o seu tema filho style.css tem folhas de estilo adicionais, você precisará enfileirá-las também. Você pode definir ‘estilo-tema-pai’ como uma dependência para que a folha de estilo do tema filho carregue depois da do pai (identificada como ‘estilo-tema-pai’ no código). Um exemplo:
<?php
function enfileira_estilos() {
$estilo_do_pai = 'estilo-tema-pai';
wp_enqueue_style( $estilo_do_pai, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'estilo-do-filho',
get_stylesheet_directory_uri() . '/estilos.css',
array( $estilo_do_pai ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'enfileira_estilos' );
?>
No caso acima, temos uma folha de estilos chamada estilos.css que pertence ao tema filho. Note que na segunda chamada do wp_enqueue_style estamos passando a variável $estilo_do_pai no terceiro argumento para que ela seja usada como dependente e seja carregada antes da folha do tema filho. Com isso, com as CSS funcionam “em cascata”, qualquer regra css da folha do filho sobrescreverá as do pai.
Testando
Vá em Aparência->Temas e ative o seu tema filho. A princípio, se você já estivesse usando o tema Twenty Fifteen, não haverá nenhuma mudança quando você visualizar sua página. Caso contrário, você verá agora o visual do Twenty Fifteen.
Vamos fazer um teste criando a folha de estilos do filho. Como você já percebeu, o nome dela será estilos.css. Crie esse arquivo dentro da pasta twentyfifteen-child (ou o nome que você escolheu para a pasta). Vamos dizer que o fundo do tema agora será verde. Coloque isso dentro de estilos.css:
body:before {
background: green;
}
Notou? Agora você poderá modificar praticamente o que quiser no tema, bastando achar o elemento desejado e incluir a regra no arquivo estilos.css.
Uma dica importante! Caso necessite de indicar um arquivo ou qualquer outro recurso que esteja dentro da pasta do tema filho no arquivo functions.php, use a função get_stylesheet_directory_uri(). Por exemplo, para enfileirar um arquivo css que esteja numa pasta chamada “css” do tema filho, faça assim:
wp_enqueue_style( 'arquivo', get_stylesheet_directory_uri() . '/css/arquivo.css' );
Divirta-se!