MENU Mário Valney

Como criar um tema filho (Child Theme) para WordPress

WordPress 03 de maio de 2014 155 comentários
WordPress
  • 03 - 05 - 14
  •        
  • 155

E ae pessoal! Tudo bem?

Imaginem duas situações:

1 – Você está criando um site em WordPress e  utilizando um dos milhares de temas pagos ou gratuitos (muito cuidado com temas pagos-gratuitos, se é que me entende…). Até aí tudo bem, certo? Você mexe no style.css, functions.php e até no index.php e outros arquivos de páginas. O site está rodando do jeito que você quer: perfeito! Aí seu cliente clica em “atualizar” e BOOM! perdeu tudo. Todo o seu trabalho foi apagado!!

2 – Você tem uma rede de sites/blogs numa instalação Multisite e não quer todos os blogs iguais: vai criar um tema para cada site? Nossa… podem ser o que? 100 temas? Boa sorte!

Solução

Há várias soluções para esses problemas, mas entre elas a mais anti-gambiarra elegante é a utilização de um recurso do WordPress muito legal chamado Child Theme ou Tema Filho.

Um Child Theme (prefiro usar os termos em inglês para me acostumar na consulta do Codex) é um tema derivado. Ele “sobrescreve” um outro tema, ou seja, você não vai ativar o pai, mas sim o filho, no menu Aparência >> Temas.

Prática

É muito simples criar um Child Theme. Vamos por a mão na massa \o/

1º Passo: Criar o diretório

Crie uma pasta no seu diretório de temas (wp-content/) para guardar seu Child Theme, o Codex do WordPress e eu =D, aconselhamos que o nome seja nomedotema-child.

Por exemplo:

Vamos criar um Child Theme para o tema padrão do WP: Twenty Fourteen.
Vamos criar um Child Theme para o tema padrão do WP: Twenty Fourteen.

2º Passo: Criar os arquivos necessários

Os arquivos básicos de um Tema são o styles.css e o index.php!

Como um Child Theme utiliza os arquivos do Tema Pai, o index.php é dispensável, então o 2º passo, na verdade, é criar o único arquivo obrigatório: o style.css:

/*
Theme Name: Twenty Fourteen Child
Theme URI: http://wordpress.org/themes/fourteen
Description: Esse é um Child Theme!
Author: Mário Valney
Author URI: https://mariovalney.com
Template: twentyfourteen
Version: 1.0.0
*/

Se você já criou um Tema ou já fuçou algum Tema, sabe que esse comentário no início do arquivo style.css é obrigatório e responsável pelas informações do tema. A única diferença desse para o do Tema Pai é a linha “Template”.  É nessa linha que escrevemos o nome do tema o qual o Child Theme será subordinado.

3ª Passo: Ativar o Tema

Agora você só precisa ativar o Tema Filho e ser feliz =D

Como modificar seu tema

Agora que você já criou e ativou o seu Child Theme, vai perceber que o seu site perdeu o estilo (com perdão do trocadilho). Isso acontece, porque todos os arquivos do Tema Pai (que são chamados pelo WordPress), com exceção do functions.php, são sobrescritos, se houver um arquivo de mesmo nome (inclui-se a hierarquia de pastas) no Tema Filho.

Como existe um style.css no Child Theme, o original é descartado, por isso, se quisermos utilizá-lo, devemos incluí-lo.

A melhor forma de fazer isso é pelo functions.php do Tema Filho:

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

Isso vai carregar o CSS pai. Assim o site vai voltar exatamente ao que era antes, como se o Tema Pai estivesse ativado ainda.

Para todos os outros arquivos, basta criar um arquivo de mesmo nome e ele será chamado no lugar do correspondente no Tema Pai.

Quando usar?

Se os motivos de criar um Child Theme, no lugar de modificar os arquivos de um Tema, não ficaram claros, aqui vai uma lista:

  • Se você modificar um Tema e ele for atualizado, você perde todas as modificações. Usando um Child Theme o Tema Pai pode ser atualizado sem problemas (isso é um ganho de segurança e de possíveis melhorias).
  • Agiliza seu tempo de desenvolvimento.
  • Não há modo melhor de iniciar no estudo da criação de Temas para WordPress.

Voltando aos problemas do início do artigo, recomendei o uso desse recurso para a rede de sites, pois assim será possível criar um Tema Pai para a rede e um Tema Filho para cada blog/site. Afinal, criar uma pasta e um style.css, é o mínimo de trabalho que se espera ao querer que cada site seja diferente, né?

Além disso, você poderá mudar as funcionalidades de todos os sites ao mesmo tempo, alterando o Tema Pai. Ou mudar algo em algum site, alterando apenas o Tema Filho correspondente.

E é isso! Espero que tenham gostado e que achem usos cada vez mais interessantes para esse recurso. Não esqueçam de compartilhar a palavra e deixar seu comentário para fazer um Dev feliz :)

Por favor, considere desativar o AdBlock

Não perca nenhuma novidade, assinando nossa newsletter!



    Não se preocupe: não enviaremos muitos e-mails, nem mostraremos seu e-mail para ninguém. Dúvidas?


    Deixe seu comentário! Dúvida sobre como comentar
    ou vai postar código? Leia antes.