Guia dos Temas Filho do WordPress

O que é um tema filho do WordPress

Um tema filho no WordPress é um tema que herda a funcionalidade, os estilos e os ficheiros de template de outro tema chamado tema principal (parent). Um tema filho permite-lhe alterar o design e a funcionalidade de um site sem modificar diretamente os ficheiros do tema principal. Por que isto é importante? Porque, ao atualizar o tema principal, todas as suas alterações aos seus ficheiros são apagadas e repostas para os valores predefinidos.

Imagine este cenário: comprou um tema premium do WordPress, personalizou os estilos CSS, adicionou funções personalizadas no functions.php e alterou ficheiros de template. Um mês depois, o autor do tema lança uma atualização com correções de segurança. Atualiza o tema e — todas as suas personalizações desaparecem. Tem de refazer tudo de raiz. Com um tema filho, este problema não existe, porque as suas alterações ficam guardadas em ficheiros separados que não são tocados durante as atualizações.

Por que utilizar um tema filho

Existem várias razões fundamentais para utilizar um tema filho em vez de modificar diretamente o tema principal.

Atualizações seguras

Esta é a razão principal. Os temas do WordPress são atualizados regularmente com correções de segurança, correções de erros e novas funcionalidades. Sem um tema filho, tem duas más opções: atualizar o tema e perder todas as personalizações, ou não atualizar o tema e expor o site a vulnerabilidades de segurança. Com um tema filho, atualiza o tema principal sem preocupações, porque as suas alterações estão seguras no tema filho.

Organização do código

Um tema filho separa claramente as suas personalizações do código original do tema. Quando olha para os ficheiros do tema filho, vê exatamente o que alterou face ao design original. Isto facilita a depuração, a documentação e a colaboração com outros programadores. Se algo não funcionar corretamente, basta eliminar o ficheiro do tema filho e reverter para o comportamento original do tema principal.

Aprender e experimentar

Um tema filho é um espaço seguro para aprender desenvolvimento WordPress. Pode experimentar com CSS, PHP e ficheiros de template sem receio de avariar o site. Se algo correr mal, desativa o tema filho e o site reverte para o aspeto original com o tema principal. Isto é especialmente útil para principiantes que estão a começar a aprender desenvolvimento WordPress.

Criar um tema filho passo a passo

Criar um tema filho é um processo simples que requer apenas dois ficheiros. Eis um guia detalhado.

Passo 1: Criar o diretório

No diretório wp-content/themes/ crie uma nova pasta para o tema filho. Aceda aos ficheiros através do Gestor de Ficheiros do cPanel ou por FTP. A convenção de nomenclatura é nome-do-tema-principal-child. Por exemplo, se utiliza o tema "flavor", crie a pasta "flavor-child". Isto não é obrigatório, mas facilita a identificação do tema filho. O nome da pasta tem de ser único entre todos os temas do site.

Passo 2: Criar o ficheiro style.css

Crie um ficheiro style.css no diretório do tema filho com o seguinte comentário de cabeçalho: Theme Name (obrigatório — o nome único do seu tema filho), Template (obrigatório — o nome do diretório do tema principal, exatamente como a pasta está nomeada), Version, Description e Author. O campo Template é crítico — tem de corresponder exatamente ao nome da pasta do tema principal. Se o tema principal estiver na pasta flavor, o Template tem de ser flavor. Um erro neste campo faz com que o tema filho não funcione.

Passo 3: Criar o ficheiro functions.php

Crie o functions.php no tema filho e adicione uma função que carregue (enqueue) os estilos do tema principal. Isto é necessário para que o tema filho herde o design do tema principal. Utilize wp_enqueue_style() dentro de uma função associada à ação wp_enqueue_scripts. Carregue parent-style com get_template_directory_uri() para o caminho do tema principal e child-style com get_stylesheet_directory_uri() para o caminho do tema filho, com parent-style como dependência para que seja carregado primeiro.

Passo 4: Ativação

Aceda ao painel de administração do WordPress, Aparência → Temas, e ative o seu tema filho. Deverá ver um site idêntico ao anterior — todos os estilos e funcionalidades do tema principal. Se o site parecer completamente diferente (sem estilos), verifique se o functions.php carrega corretamente os estilos do tema principal e se o cabeçalho Template no style.css está correto.

Personalizar o tema filho

Agora que tem um tema filho funcional, pode começar com as personalizações.

Personalizações de CSS

Adicione as suas alterações de CSS ao ficheiro style.css do tema filho. Como o tema filho é carregado DEPOIS do tema principal, os seus estilos têm prioridade (o princípio da cascata do CSS). Por exemplo, se quiser alterar a cor do título, adicione a regra no style.css do tema filho e esta substituirá o estilo do tema principal. Utilize as Ferramentas de Programador do navegador (F12) para identificar os seletores CSS exatos que precisa de alterar.

Substituir templates

O WordPress utiliza uma hierarquia de templates para determinar qual o ficheiro a usar para apresentar uma página. Um tema filho pode substituir qualquer ficheiro de template do tema principal criando um ficheiro com o mesmo nome. Por exemplo, se quiser alterar o aspeto de um artigo de blogue individual, copie o single.php do tema principal para o tema filho e modifique-o. O WordPress utilizará automaticamente a versão do tema filho. IMPORTANTE: copie o ficheiro inteiro, não apenas a parte que está a alterar, porque o ficheiro do tema filho substitui completamente a versão do tema principal.

Particularidades do functions.php

Ao contrário dos ficheiros de template, em que o tema filho substitui o principal, o functions.php do tema filho é carregado ANTES do functions.php do tema principal. Isto significa que ambos os ficheiros estão ativos ao mesmo tempo. Isto é útil porque pode adicionar novas funções sem copiar todo o functions.php do tema principal. Mas tenha cuidado — se definir uma função com o mesmo nome que existe no tema principal (e o tema principal utilizar uma verificação if(!function_exists())), a sua versão terá prioridade.

Adicionar novos ficheiros de template

Além de substituir ficheiros de template existentes, um tema filho pode adicionar ficheiros completamente novos. Por exemplo, pode criar um template de página personalizado que não existe no tema principal. Adicione um ficheiro PHP com um comentário Template Name no topo e ficará disponível como opção no editor do WordPress quando criar uma nova página. Esta é uma forma poderosa de adicionar layouts específicos para landing pages, páginas de portefólio ou outras necessidades personalizadas.

Técnicas avançadas

Remover ações e filtros do tema principal

Por vezes quer remover funcionalidade do tema principal em vez de adicionar nova funcionalidade. Utilize remove_action() e remove_filter() no functions.php do tema filho para remover os hooks que o tema principal registou. Isto requer conhecer o nome exato da função, o hook e a prioridade do tema principal. Analise o código-fonte do tema principal para encontrar esta informação. Nota: remove_action() tem de ser chamado depois de a ação ser registada — utilize o hook after_setup_theme com uma prioridade posterior.

Substituir templates do WooCommerce

Se utiliza o WooCommerce, o tema filho pode substituir os ficheiros de template do WooCommerce criando um diretório woocommerce/ dentro do tema filho. Por exemplo, para personalizar o aspeto da página de produto, copie o content-single-product.php de wp-content/plugins/woocommerce/templates/ para wp-content/themes/o-seu-tema-filho/woocommerce/ e modifique-o. O WooCommerce utilizará automaticamente a sua versão.

Utilizar um tema filho com page builders

Se utiliza o Elementor, o Divi ou outro page builder, um tema filho continua a ser recomendado. O page builder armazena o conteúdo na base de dados, pelo que não depende de ficheiros de template, mas as personalizações de CSS, as funções PHP personalizadas e as modificações de cabeçalho/rodapé devem estar no tema filho. A maioria dos temas populares (Astra, GeneratePress, OceanWP) tem temas filho oficiais disponíveis para download no site do autor do tema.

Erros comuns e como evitá-los

• Cabeçalho Template incorreto: o Template tem de corresponder exatamente ao nome do diretório do tema principal. Até uma diferença entre maiúsculas e minúsculas pode causar um problema.
• Falta de carregamento dos estilos do tema principal: sem o carregamento adequado, o tema filho não herda o design do tema principal e o site parecerá avariado.
• Copiar demasiados ficheiros: não copie todos os ficheiros do tema principal para o tema filho. Copie APENAS os ficheiros que efetivamente altera. Demasiadas cópias significam que não receberá atualizações do tema principal para esses ficheiros.
• Esquecer a tag PHP: o functions.php tem de começar com uma tag <?php. Sem ela, o WordPress não reconhece o ficheiro como PHP e ignora-o.
• Editar o tema filho em vez do Personalizador: para alterações simples (cores, tipos de letra, layout) utilize o Personalizador do WordPress, que armazena as definições na base de dados. Utilize o tema filho para alterações estruturais que o Personalizador não cobre.

Conclusão

Os temas filho do WordPress são uma ferramenta essencial para qualquer pessoa que personalize o aspeto ou a funcionalidade do seu site. Criam-se em 5 minutos (dois ficheiros), protegem as suas personalizações das atualizações do tema principal e proporcionam uma forma organizada de gerir código personalizado. Quer altere apenas algumas regras de CSS, quer construa substituições complexas de templates, utilize sempre um tema filho. Na BeoHosting, o nosso suporte pode ajudá-lo a criar e configurar um tema filho para o seu site WordPress, para que possa personalizar o design com segurança e sem receio de perder as alterações.