WordPress.org

Ready to get started?Download WordPress

Codex

Attention Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

pt-br:Temas Filhos

Tema Filho é um tema que herda a funcionalidade de um outro, chamado Tema pai ou tema principal e lhe permite modificar ou acrescentar a funcionalidade do tema principal. Este artigo mostra como criar um tema filho e explica o que você pode fazer com ele. Como exemplo de tema principal usamos o WordPress Twenty Fourteen theme.

Fazer um tema filho é muito simples. Crie um diretório, coloque dentro um arquivo style.css formatado corretamente e você tem um tema filho! Com um pouco de compreensão da linguagem HTML e CSS, você pode modificar totalmente o tema principal sem editar os arquivos do tema original em si. Dessa forma, quando o tema principal é atualizado, as modificações são preservadas.

Por esta razão, os temas filho são a maneira recomendada de fazer modificações em um tema.

Com uma compreensão básica de PHP, Modelos WordPress e API de Plugin, você pode fazer o tema filho cobrir virtualmente todos os aspectos de um tema principal e, novamente, sem alterar os arquivos do tema principal.

Contents

Estrutura de diretórios

Um tema filho reside em seu próprio diretório no wp-content/themes. O esquema abaixo mostra a localização de um tema filho, juntamente com o seu tema principal (exemplo em WordPress Twenty Fourteen theme) em uma estrutura típica diretório WordPress:

  • public_html
    • wp-content
      • themes (diretório onde ficam os temas)
        • twentyten (diretório do nosso tema principal exemplo, WordPress Twenty Fourteen theme
        • twentyten-child (diretório do nosso tema filho, pode ser qualquer nome)
          • style.css (arquivo necessário em um tema filho, deve ser style.css)

Este diretório deve conter no mínimo o arquivo style.css, e no máximo qualquer outros arquivo que seja necessário.

  1. Style.css (obrigatório)
  2. Functions.php (opcional)
  3. Os arquivos de modelo (opcional)
  4. Outros arquivos (opcional)

Arquivo style.css

É o único arquivo obrigatório em um tema filho. Ele fornece as informações de cabeçalho, através da qual WordPress reconhece o tema filho, e o arquivo style.css do tema principal.

Como acontece com qualquer tema WordPress, o cabeçalho de informação deve estar no início do arquivo, a única diferença é que no arquivo do tema filho a linha Template: é necessária, de modo que o WordPress saiba qual é o tema pai.

Aqui está um exemplo de cabeçalho de informações para arquivo style.css de um tema filho.

/*
Theme Name:     Twenty Ten Filho
Theme URI:      http: //example.com/
Description:    Tema filho para o Twenty Ten
Author:         Seu nome aqui
Author URI:     http: //exemplo.com/sobre/
Template:       twentyten
Version:        0.1.0
*/

Uma rápida explicação de cada linha:

  • Theme Name. (Obrigatório) Nome do tema filho
  • Theme URI. (Opcional) Site do autor do tema filho
  • Description. (Opcional) Um descrição sobre o tema filho
  • Author URI. (Opcional) Site do autor
  • Author. (Opcional) Nome do autor
  • Template. (Obrigatório) Nome do diretório do tema principal
    • NOTA. Você tem que mudar para um tema diferente e voltar para o tema filho quando modificar essa linha.
  • Version. (Opcional) Versão do tema filho Ex.: 0.1, 1.0, etc.

A parte depois do fechamento */ no cabeçalho funciona como um arquivo de estilo regular. É onde você coloca as regras de estilo que deseja aplicar ao WordPress.

Note que o estilo de um tema filho substitui o estilo do tema principal completamente. O arquivo de estilo do tema pai não será lido. Então, se você simplesmente deseja modificar algumas coisas no estilo e layout de um dos arquivos do tema principal, ao invés de fazer algo novo a partir do zero, você tem que importar explicitamente o estilo do tema principal e depois adicionar as suas modificações. O exemplo a seguir mostra como usar a regra @import para fazer isso.

Exemplo de um tema filho básico

Nosso tema principal para este exemplo é WordPress Twenty Fourteen theme. Nós gostamos de quase tudo nele, exceto a cor do título do site, que queremos mudar de preto para verde. Usando um tema filho, tudo o que temo a fazer é seguir três passos simples:

  1. Crie um novo diretório nowp-content/themes, e nomeie para WordPress Twenty Fourteen theme(ou qualquer coisa que quiser).
  2. Salve o código abaixo em um arquivo chamado style.css, e salve o arquivo no novo diretório.
  3. Vá para o Painel > Aparência > Temas e ative o novo tema, o WordPress Twenty Fourteen theme Filho.
/*
Theme Name: Twenty Ten Child
Description: Tema filho para Twenty Ten theme 
Author: Seu nome
Template: twentyten
*/

@import url("../twentyten/style.css");

#site-title a {
    color: #009900;
}

Aqui está o que o código acima faz, passo a passo:

  1. /* abre o cabeçalho com informações do tema filho.
  2. Theme Name: declara o nome do tema filho.
  3. Description: descreve o que o tema é. (Opcional, pode ser omitido.)
  4. Author: declara o nome do autor. (Opcional, pode ser omitido.)
  5. Template: declara o pai do tema filho, ou seja, o diretório do tema cujos modelos o tema filho usa.
  6. */ fecha o cabeçalho com informações do tema filho.
  7. @import regra para trazer estilo do tema pai.
  8. #site-title a define a cor verde para o nome do site, substituindo a regra correspondente do tema pai.

Nota sobre a regra @import

Não deve haver outras regras CSS acima de@import. Se você colocar outras regras acima, esta será invalidada e o estilo do tema pai, não será importado.

Arquivo functions.php

Ao contrário de style.css, o arquivo functions.php de um tema filho não substitui o arquivo do tema pai. Em vez disso, é carregado ao mesmo tempo.Especificamente, ele é carregado antes do arquivo do functions.php do tema pai.

Dessa forma, o functions.php de um tema filho oferece um método inteligente e livre de problemas de modificar a funcionalidade de um tema principal. Digamos que você deseja adicionar uma função PHP para o seu tema. A forma mais rápida seria a abertura de seu functions.php e colocar a função lá. Mas isso não é inteligente: A próxima vez que seu tema é atualizado, a função irá desaparecer. A forma inteligente: você pode criar um tema filho, adicionar um arquivo functions.php nele e adicionar a função para esse arquivo. A função vai fazer exatamente o mesmo trabalho com a vantagem de que não será afetado por futuras atualizações do tema principal.

A estrutura do arquivo functions.php é simples: Uma tag de abertura do PHP na parte superior, uma tag de fechamento PHP, na parte inferior e, entre eles, seus blocos de PHP. Nele você pode colocar tantas ou nenhuma função, como você desejar. O exemplo abaixo mostra um arquivo functions.php fundamental que faz uma coisa simples: Adiciona um link para do favicon no cabeçalho head das páginas:

function favicon_link() {
    echo '<link rel="shortcut icon" type="imagem/x-icon" href="/favicon.ico" />' . "\n";
}
add_action('wp_head', 'favicon_link');
Dica para desenvolvedores de temas

O fato do arquivo functions.php do tema filho ser carregado primeiro permite fazer com que as funções de usuário do seu tema seja "plugável" - isto é, substituível por um tema filho - ao declará-los condicionalmente. Por exemplo:

if (!function_exists('theme_special_nav')) {
    function theme_special_nav() {
        //  Fazer isso e aquilo etc
    }
}

Dessa forma, um tema filho pode substituir uma função PHP do tema pai, simplesmente declarando-o novamente.

Incluindo Arquivos para Manter a Ordem

Quando incluir arquivos no functions.php de uma tema filho, para mantê-lo legível você precisará usar a constante STYLESHEETPATH em vez de TEMPLATEPATH mais tipicamente vistos.

require_once( STYLESHEETPATH . '/path/to/file/in/child/theme.php' );


Arquivo de Modelo

Os Arquivos de Modelo de um tema filho se funcionam como style.css: eles substituem os arquivos do tema principal. Um tema filho pode substituir qualquer arquivo do tema pai, basta utilizar um arquivo com o mesmo nome. (Nota:index.php pode ser substituído somente em WordPress 3.0 e superior).

Novamente, esse recurso do WordPress permite modificar os modelos de um tema pai sem realmente editar os arquivos dele, de modo que suas modificações sejam preservados quando o tema principal é atualizado.

Aqui estão alguns exemplos de casos de uso de arquivos de modelo em um tema filho:

  • Para adicionar um modelo que não é oferecido pelo tema pai (por exemplo, um modelo para uma página de sitemap, ou para páginas de coluna única, que estará disponível para selecionar na tela de edição de páginas.
  • Para adicionar um modelo mais específico, por exemplo, um arquivo tag.php para mostrar a lista de postagens sobre tags.
  • Para substituir um modelo do pai (por exemplo, fazer a sua própria home.php e substituir o arquivo do tema pai.

Outros arquivos

Além de style.css, functions.php e arquivos do modelo como index.php,single.php etc um tema filho pode usar qualquer tipo de arquivo de temas, contanto que o arquivo esteja corretamente ligado. Por exemplo, um tema filho pode usar ícones e imagens que estão vinculadas a partir da sua folha de estilo, arquivos JavaScript etc.

Recursos

  • Thematic - Sobre o tema Thematic no site da Comunidade WordPress Brasil.
A documentação do WordPress em Português do Brasil.
Todas as comunidades lusófonas também são bem-vindas! Adicione {{Codex-pt}} em seus artigos.