Criar um tema filho

Módulo 5: Temas e plugins · Tempo de leitura: 9 minutos

Objetivo de aprendizagem: Depois desta lição, consegue criar um tema filho e sabe quando precisa de um e quando não.

Conceitos-chave: tema filho, tema pai, Template: em style.css, functions.php, wp_enqueue_style, substituir um modelo, theme.json num tema filho, Create Block Theme

O problema que um tema filho resolve

Imagine que quer alterar ligeiramente o cabeçalho do seu tema clássico e, para isso, edita o header.php na pasta do tema. Funciona. Três semanas depois, surge uma atualização do tema, que deixa instalar automaticamente (como deve ser, lição 7.2). A atualização substitui todos os ficheiros do tema, e a sua alteração desaparece.

Um tema filho é um tema pequeno que diz: "usa tudo desse outro tema (o tema pai), exceto o que eu próprio tiver." Coloca as suas alterações no tema filho. O tema pai continua a ser atualizado normalmente, e as suas alterações mantêm-se.

Quando sim e quando não

Precisa de um tema filho se quiser adaptar ou complementar ficheiros de um tema:

• quiser um modelo diferente (num tema clássico um ficheiro PHP, num tema de blocos um modelo HTML);
• quiser CSS próprio demasiado extenso para a caixa de CSS;
• quiser código PHP próprio relacionado com o design (um formato de imagem adicional, uma localização de menu adicional).

Não precisa de um tema filho se:

• adaptar um tema de blocos no Editor do site: essas alterações ficam guardadas na base de dados e sobrevivem a uma atualização (lição 5.1);
• apenas acrescentar um pouco de CSS através do CSS adicional (no Personalizador num tema clássico, ou em Estilos no Editor do site);
• quiser acrescentar uma função que nada tem a ver com o design (um formulário, uma ligação). Essa deve ficar numa plugin, para sobreviver a uma mudança de tema.

Um tema filho para um tema clássico

Um tema filho é uma pasta em wp-content/themes/ com pelo menos um ficheiro: style.css. Imagine que o seu tema pai está em wp-content/themes/hoofdthema/. Crie então uma pasta wp-content/themes/hoofdthema-child/ com este style.css:

/*
Theme Name:   Hoofdthema Child
Template:     hoofdthema
Description:  Personalizações próprias para example.com
Version:      1.0.0
Text Domain:  hoofdthema-child
*/

/* O seu próprio CSS fica abaixo. */
.site-header { border-bottom: 3px solid #e8a33d; }

A linha mais importante é Template:. Aí indica o nome da pasta do tema pai (não o nome que vê no painel). Se não estiver exatamente correto (maiúsculas, hífenes), o WordPress indica em Aparência > Temas que o tema pai está em falta.

Além disso, cria um functions.php para carregar as folhas de estilo. A forma correta:

<?php
add_action( 'wp_enqueue_scripts', function () {
    wp_enqueue_style(
        'hoofdthema-child',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get( 'Version' )
    );
} );

Se o tema pai carrega a sua própria folha de estilo automaticamente ou não, varia consoante o tema. Consulte a documentação do seu tema pai; alguns pedem para também carregar, no tema filho, a folha de estilo do pai com get_template_directory_uri() . '/style.css'. Se o seu site ficar sem formatação depois de ativar, a folha de estilo do pai não está a ser carregada.

Se quiser adaptar um modelo, copie esse ficheiro específico (por exemplo header.php) do pai para o seu filho e edite a cópia. O WordPress procura primeiro no filho, depois no pai. Não copie todos os ficheiros: assim deixa de receber as melhorias do pai.

O functions.php do filho não substitui o do pai, mas é carregado antes dele. Ambos são executados.

Um tema filho para um tema de blocos

Num tema de blocos funciona da mesma forma, com ficheiros de blocos:

• style.css com o mesmo cabeçalho e Template:;
• eventualmente um theme.json próprio: este é combinado com o do pai, por isso só coloca aí o que quer alterar (por exemplo a paleta de cores);
• eventualmente modelos em templates/ e parts/ que substituem os do pai.

Um functions.php num tema de blocos muitas vezes não é necessário, porque o WordPress carrega os estilos a partir do theme.json automaticamente.

Existe uma plugin oficial, Create Block Theme, que cria um tema filho a partir do Editor do site, incluindo as suas alterações na base de dados. Útil se adaptou um tema de blocos e quer registar essas alterações em ficheiros (por exemplo para as levar para outro site).

Como configurar no seu site

1. Crie a pasta e os ficheiros no seu próprio computador e verifique a pasta do tema pai.
2. Carregue a pasta para wp-content/themes/ com o Gerenciador de arquivos ou via SFTP. Ou comprima a pasta num ficheiro zip e carregue-o em Aparência > Temas > Adicionar > Carregar tema.
3. Vá a Aparência > Temas. O seu tema filho aparece na lista. Ative-o.
4. Verifique o seu site: menus e widgets podem precisar de ser associados novamente ao mudar para um tema filho; as definições do Personalizador aplicam-se por tema, por isso volte a configurá-las ou exporte-as com uma plugin.
5. O tema pai tem de continuar instalado. Não o elimine; o filho não funciona sem ele.

Faça isto de preferência primeiro num ambiente de testes (staging) (lição 8.3), porque mudar de tema num site ativo em produção pode causar alguma confusão.

Resumo

• Um tema filho guarda as suas alterações aos ficheiros do tema fora do tema pai, para que as atualizações não as substituam.
• Não precisa de um tema filho para alterações no Editor do site ou um pouco de CSS adicional; as funções devem ficar numa plugin.
• No mínimo: uma pasta com style.css onde Template: indica exatamente a pasta do tema pai.
• Copie apenas os modelos que realmente adapta; o functions.php do filho é adicionado ao do pai, não o substitui.
• O tema pai continua instalado e continua a ser atualizado.

Questionário

Exercício

Exercício A5.2: Verificar o seu tema filho. Crie um tema filho para o seu tema, no seu site de testes ou em staging (lição 8.3), e ative-o. Indique o endereço do site e o nome da pasta do tema filho. O programa consulta wp-content/themes/<pasta>/style.css e verifica: o ficheiro existe, contém um Theme Name: e um Template:, o style.css do pai nessa pasta também existe, e a página inicial faz referência ao tema filho (ou seja, está ativo).

Exercício D5.2: O que alterou e porquê? Anote quais os ficheiros que tem no seu tema filho, o que alterou em cada ficheiro e por que razão isso não podia ser feito no Editor do site, em CSS adicional ou numa plugin. Confirme que o tema pai ainda está instalado e tem atualizações automáticas.

Leitura adicional

Estes artigos descrevem os passos nos painéis da WebOké; noutros painéis o funcionamento é semelhante.

• Manual DirectAdmin 11.1: Abrir o Gerenciador de arquivos: as pastas do seu pacote
• Manual DirectAdmin 11.2: Fazer upload e download de arquivos
• Manual DirectAdmin 11.7: Ligar com FileZilla (FTP, FTPS e SFTP)
• Child themes (developer.wordpress.org, em inglês): https://developer.wordpress.org/themes/advanced-topics/child-themes/