Imagine que você criou um site em WordPress, utilizou um tema pago (ou gratuito) e para atender todas as necessidades do cliente foi necessário alterar arquivos do tipo CSS ou PHP do tema. O serviço foi concluído e você criou um usuário para que o próprio cliente possa administrar o conteúdo do site. Ao acessar o painel do WordPress o cliente viu uma mensagem informando que havia uma atualização para aquele tema e imediatamente clicou no link e atualizou o tema, e nesse exato momento todas as alterações que você havia feito foram perdidas pois você não usou um child theme.
Use um Child Theme (tema filho) e evite que alterações feitas no tema sejam perdidas quando o mesmo for atualizado. A idéia é ter um tema principal onde as atualizações são feitas e um tema filho onde podemos fazer as alterações necessárias.
O que é tema filho?
Um tema filho é um tema que herda as funcionalidades e estilos de outro tema, chamado de tema pai. Os temas filhos são a forma recomendada de modificar um tema existente.
Por que usar temas filhos?
Há muitos motivos do porquê que você deve usar um tema filho:
- Se você modificar um tema diretamente e o tema for atualizado, suas modificações podem se perder. Ao usar um tema filho você se certifica de que suas modificações são preservadas.
- Usar um tema filho agiliza o desenvolvimento.
- Usar um tema filho é uma ótima maneira de aprender sobre o desenvolvimento de temas WordPress.
Como criar um tema filho?
Um tema filho consiste de ao menos um diretório (a pasta onde fica o tema) e dois arquivos (style.css e functions.php), que você precisa criar.
1º Passo: Criar o diretório
Crie a pasta ou diretório para o tema filho que será colocada em wp-content/themes. É recomendado (embora não obrigatório) que o nome do diretório de seu tema seja sucedido do sufixo ‘-child’. Você também deve se certificar de que não há espaços no nome da pasta do tema filho o que ocasionará erros.
Exemplo:
Vamos usar como base o tema twentyfifteen.
- Pasta do tema principal: twentyfifteen
- Pasta do tema filho: twentyfifteen-child
2º Passo: Criar o arquivo style.css
Crie o arquivo de folhas de estilo (style.css). O arquivo deve começar com um cabeçalho similar ao exemplo abaixo:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe 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: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentyfifteen-child */
Atenção:
- Substitua o texto de exemplo pelos detalhes relevantes ao seu tema.
- A linha Template corresponde ao nome do diretório ou pasta do tema pai. O tema pai de nosso exemplo é o tema Twenty Fifteen, então Template deve ser twentyfifteen. Se você está trabalhando com um tema diferente, você deve modificar isso para o nome do tema que estiver usando.
3º Passo: Criar o functions.php
O passo final é enfileirar as folhas de estilo do tema pai e do tema filho. Observe que o método anterior de criação de temas filhos usava @import:, este método não é considerado uma boa prática. Atualmente a prática adequada é enfileirar as folhas de estilo usando wp_enqueue_scripts action e wp_enqueue_style() no arquivo functions.php de seu tema filho. A seguinte função de exemplo funcionará somente se o seu tema pai usar apenas o estilo style.css para armazenar todos os estilos. Se o seu tema filho tiver mais de um arquivo .css (por exemplo, ie.css, style.css, main.css), você terá que se certificar de manter todas as dependências do tema pai.
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>
DICA: Se desejar copie o arquivo screenshot.png do diretório do tema pai para o diretório do tema filho. Dessa forma, quando você acessar Aparência >> Temas, uma imagem será apresentada para representar o seu tema filho.
Seu tema filho agora está pronto para ativação. Faça login no painel de administração e vá para Aparência >> Temas. Você deve ver seu tema filho listado e pronto para ativação. Ative o tema filho.
Atenção: Talvez seja necessário salvar novamente o seu menu (Aparência > Menus ou Aparência > Personalizar > Menus) e opções do tema (incluindo imagens de fundo e cabeçalho) depois de ativar o tema filho.
Modificando um tema filho?
Se você deseja mudar mais do que apenas o arquivo de folhas de estilo, seu tema filho pode substituir qualquer arquivo no tema principal, para isso basta incluir um arquivo com o mesmo nome no diretório do tema filho e ele substituirá o arquivo equivalente ao diretório do tema principal quando seu site carregar. Por exemplo, se você quiser alterar o código PHP para o cabeçalho do site, você pode incluir um header.php no diretório do seu tema filho e esse arquivo será usado em vez do header.php do tema pai. Se o arquivo que deseja alterar está dentro de um subdiretório do tema pai, crie um subdiretório com o mesmo nome no tema filho e inclua um arquivo com o mesmo nome do que deseja alterar dentro do subdiretório criado.
Você também pode incluir arquivos no tema filho que não estão incluídos no tema pai. Por exemplo, você pode querer criar um modelo mais específico do que o encontrado em seu tema principal, como um modelo para um arquivo específico de página ou categoria.
Usando functions.php
Ao contrário de style.css, o arquivo functions.php de um tema filho não substitui sua contrapartida do tema pai. Em vez disso, é carregado além das funções do arquivo functions.php do tema pai. Especificamente, é carregado logo antes do arquivo do pai.
Desta forma, o functions.php de um tema filho fornecem um método inteligente e sem problemas de modificar funcionalidades de um tema pai. Para adicionar uma função PHP ao seu tema, você deve criar um tema filho, adicionar um arquivo functions.php nele e adicionar sua função nesse arquivo. A função fará exatamente o mesmo trabalho a partir daí, com a vantagem de que não será afetada por futuras atualizações do tema pai. Não copie o conteúdo completo de functions.php do tema pai em functions.php no tema filho.
A estrutura de functions.php é simples: uma tag PHP de abertura no topo, e abaixo, seus códigos em PHP. Nela você pode colocar tantas funções como desejar. O exemplo abaixo mostra um arquivo functions.php elementar que faz uma coisa simples: adiciona um link favicon ao elemento principal das páginas HTML.
<?php
function my_favicon_link() {
echo '<link rel="shortcut icon" type="image/x-icon" href="/favicon.ico" />' . "\n";
}
add_action( 'wp_head', 'my_favicon_link' );
DICA PARA DESENVOLVEDORES DE TEMAS: O fato do functions.php de um tema filho ser carregado primeiro que o functions.php do tema pai, permite que você substitua funções do tema pai, para isso sempre declare as funções condicionalmente ao criar seus temas.
Por exemplo:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}
Dessa forma, um tema filho pode substituir uma função PHP do pai simplesmente declarando-o de antemão.
Referenciar / Incluir arquivos em seu tema filho
Quando você precisar incluir arquivos que se encontram no diretório do seu tema filho, você usará get_stylesheet_directory(). Quando você usa tema filho o get_stylesheet_directory() aponta para o diretório principal do tema filho, que é onde se encontra o arquivo estilo.css.
Aqui está um exemplo usando require_once que mostra como você pode usar o get_stylesheet_directory() para fazer referência a um arquivo armazenado no diretório raiz do seu tema filho.
require_once( get_stylesheet_directory() . '/my_included_file.php' );
Outras Informações Úteis
Usando formatos de postagem
Um tema filho herda os formatos de postagem do tema pai. Ao criar um tema filho, esteja ciente de que ao usar add_theme_support(‘post-formats’) você irá substituir os formatos definidos pelo tema pai e não adicionar novos formatos.
Suporte RTL
Para suportar idiomas RTL, adicione o arquivo rtl.css ao seu tema filho, contendo:
/* Theme Name: Twenty Fourteen Child Template: twentyfourteen */
rtl.css só é carregado pelo WordPress se is_rtl () retornar verdadeiro.
É recomendável adicionar o arquivo rtl.css ao seu tema filho, mesmo que o tema pai não tenha nenhum arquivo rtl.css.
Internacionalização
Os temas filhos, podem ser traduzidos para outros idiomas usando funções gettext.
Para internacionalizar um tema filho, siga estas etapas:
Adicione um diretório de idiomas
Algo como my-theme/languages/.
Adicione arquivos de idioma
Seus nomes de arquivos devem ser pt_BR.po e pt_BR.mo (dependendo do seu idioma), diferente dos arquivos de plugin que são domain-pt_BR.xx.
Carregue um domínio de texto
Use load_child_theme_textdomain() em functions.php durante a ação after_setup_theme.
O domínio de texto definido em load_child_theme_textdomain() deve ser usado para traduzir todas as strings no tema filho.
Use as funções GetText para adicionar suporte i18n para suas strings
Example: textdomain
<?php
/**
* Setup My Child Theme's textdomain.
*
* Declare textdomain for this child theme.
* Translations can be filed in the /languages/ directory.
*/
function my_child_theme_setup() {
load_child_theme_textdomain( 'my-child-theme', get_stylesheet_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_child_theme_setup' );
?>
Example: gettext functions
<?php esc_html_e( 'Code is Poetry', 'my-child-theme' ); ?>
Para resumir, todas as seqüências de caracteres que usam o domínio do texto “my-child-theme” serão traduzíveis. Os arquivos de tradução devem residir no diretório “/languages/“.
Referências
WordPress Codex – Child Themes