Child Theme

Child Themes: o que são e como cria-los

Publicado em Tempo de leitura: 4 minutos

Decidiu criar um website em WordPress e depois de escolher um tema começou a modificar o código-fonte para diferenciar o seu website dos restantes. As primeiras alterações foram realizadas nas folhas de estilo: mudou o tipo de letra, o espaçamento do texto nos parágrafos e a cor do menu de navegação. Seguiram-se modificações mais profundas com a edição dos ficheiros index.php, header.php e footer.php. Passadas algumas horas (ou dias), encosta-se satisfeito na sua cadeira ao observar que o seu website está tal como imaginava que ficaria. É o “website perfeito”… Pelo menos, até ao dia em que todas as suas modificações desaparecem porque o criador do tema que escolheu lançou uma actualização que repôs a programação anterior. No entanto, este dissabor teria sido facilmente evitado se tivesse criado um Child Theme (Tema Filho, em português).

O que é um Child Theme

Segundo o Códice do WordPress, um Child Theme é um tema que herda as funcionalidades e os estilos de outro tema existente (Parent Theme) sendo a forma recomendada de modificar um tema.

De certa forma, um Child Theme é comparável ao duplicado de um documento que pode ser riscado e emendado à mão sem grandes preocupações salvaguardando o documento original. Alguns temas incluem um Tema Filho mas a maioria não contempla esta característica. Deste modo, se queremos proteger o nosso trabalho de personalização, a criação de um Child Theme é vital.

Como criar um Child Theme

A criação de um Child Theme é bastante simples e envolve apenas 3 passos:

  1. Criar uma pasta em wp-content/themes;
  2. Nesta pasta, criar um ficheiro style.css cujo cabeçalho esteja de acordo com certos requisitos;
  3. Criar um ficheiro functions.php para enfileirar os arquivos corretamente.

Para compreender melhor estes procedimentos, nada melhor do que um exemplo prático.

Quando decidi criar um photoblog fui à procura de um tema que fosse ao encontro das minhas expectativas e acabei por escolher o Fukasawa. Deste modo, depois de ter instalado o WordPress e o tema em questão chegou o momento de criar o Tema Filho.

1. Através de um gestor de ficheiros criei uma pasta com o nome fukasawa-child no sub-directório wp-content/themes (apesar de não ser obrigatório, é recomendado que o nome da pasta seja procedido do sufixo -child).

2. De seguida, criei o ficheiro style.css com o seguinte conteúdo:

/*
 Theme Name:     Fukasawa Child
 Theme URI:      http://www.andersnoren.se/teman/fukasawa-wordpress-theme/
 Description:    Fukasawa Child Theme
 Author:         Anders Norén 
 Author URI:     http://www.andersnoren.se/
 Template:       fukasawa
 Version:        1.0.9
*/

Ao utilizar o modelo acima apresentado, tenha em conta que o campo Template deve corresponder ao nome da pasta onde o Parent Theme (o tema existente) está instalado. Os restantes campos podem ser livremente personalizados. Existem também outros campos que pode usar se assim o desejar (ex. License, License URI e Tags).

3. Por último, criei o ficheiro functions.php e adicionei-lhe o seguinte conteúdo:

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

}
?>

Depois de activar o Tema Filho no painel de administração do WordPress (Painel\Apresentação\Temas) estamos prontos para começar a personalizar o tema do nosso website sem modificar os ficheiros originais e independentemente das alterações serem realizadas nas folhas de estilo ou no conteúdo dos outros ficheiros incluídos no tema.

Se, por exemplo, eu quiser alterar a cor de fundo do website basta-me adicionar body {background: #f0f0f0} no ficheiro style.css que está na pasta do Tema Filho.

/*
 Theme Name:     Fukasawa Child
 Theme URI:      http://www.andersnoren.se/teman/fukasawa-wordpress-theme/
 Description:    Fukasawa Child Theme
 Author:         Anders Norén 
 Author URI:     http://www.andersnoren.se/
 Template:       fukasawa
 Version:        1.0.9
*/

body {background: #f0f0f0}

Agora, imagine que desejo fazer alterações no ficheiro header.php que está no tema existente. O procedimento que devo seguir é copiar este ficheiro para a pasta do Tema Filho e realizar as alterações neste ficheiro.

A imagem seguinte ilustra a estrutura que personaliza o tema do meu photoblog.

Estrutura de um Child Theme

Em resumo, uma pasta com o nome fukasawa-child foi criada no sub-directório wp-content/themes. Por outro lado, foram criados os ficheiros functions.php e style.css para dar corpo ao Child Theme.
O ficheiro style.css contem as alterações efectuadas ao nível das folhas de estilo. Por outro lado, os ficheiros footer.php, header.php e single.php foram copiados do Parent Theme para serem posteriormente editados por mim.
Para finalizar, uma breve referência ao ficheiro screenshot.png que tem como finalidade tornar mais apelativa a visualização dos temas instalados no painel do WordPress. A resolução recomendada para a imagem é de 880 x 660 pixeis.

Notas finais

Se ainda se sente pouco à vontade em criar, passo a passo, um Child Theme não desespere. Existem plugins que o podem auxiliar nesta tarefa. Encontre um no directório de Plugins do WordPress.

Tenha também em consideração que se apenas pretende fazer alterações nas folhas de estilo de um tema (deixando os restantes ficheiros inalterados) pode dispensar a criar de um Child Theme e utilizar um plugin que crie um ficheiro css personalizado (ex. Simple Custom CSS).

Não deixe de consultar o Códice do WordPress se quiser saber mais sobre os Temas Filhos.

E-mail Marketing

Se gostou deste artigo subscreva a newsletter e não perca a publicação de novos artigos.