Seu guia definitivo para trabalhar com temas filhos do WordPress

Se você deseja personalizar os temas que compra de nós na HeroThemes, talvez se estiver criando sites para você ou seus clientes usando um design sob medida, poder aproveitar o poder dos temas filhos do WordPress é algo que você precisará.

Na sua forma mais básica, o uso de temas filhos o tornará mais eficiente – manter o código que você usa para cada projeto em seu próprio tema pai ou usar um tema pai pronto para uso como um dos nossos, significa que você está aderindo a Princípios DRY (Não se repita).

Mas, indo além, você pode usar temas filho e pai para criar redes de sites com uma base de código principal, criar temas personalizados com base em estruturas de temas de terceiros ou até mesmo criar seu próprio tema pai avançado para uso como uma estrutura de temas . Neste artigo, darei uma rápida visão geral dos fundamentos dos temas filhos e, em seguida, mostrarei algumas técnicas mais avançadas. Você vai aprender:

• como usar um tema filho para adaptar um tema pai ou estrutura de tema de terceiros às necessidades do seu projeto
• como o WordPress prioriza os arquivos de modelo em cada um dos temas pai e filho
• como substituir as funções do tema pai no arquivo de funções do seu tema filho.

Entendendo os Temas Pais e Filhos

Em teoria, qualquer tema pode atuar como tema pai, embora alguns sejam mais bem projetados para esse papel (incluindo o nosso!). Se você estiver usando um de nossos temas e quiser ajustá-lo para seu próprio projeto, é muito melhor usar um tema filho para fazer isso do que hackear o tema principal, o que significa que você perderá todas as suas alterações ao atualizar o tema para versões futuras. Para criar um tema filho, basta criar um novo tema e adicionar o seguinte no início de sua folha de estilo. Meu exemplo abaixo usa o tema HeroThemes HelpGuru como pai, mas você pode usar qualquer tema, incluindo outro produto do HeroTheme, como o KnowAll.

Comece a construir sua Base de Conhecimento hoje!

Nosso tema KnowAll inclui um tema filho para ajudá-lo a personalizar seu site de base de conhecimento

Obter o tema

/*
Theme Name: My child theme
Theme URI: URL of the theme or site it's used for
Description: Description of what the theme is for and its main features.
Author: Your name
Template: helpguru
Version: 1.0
*/
@import url("../helpguru/css/style.css");

As linhas importantes são estas duas:

Template: helpguru
@import url("../helpguru/css/style.css");

A primeira seção especifica o modelo, que informa ao WordPress que este é um tema filho e que seu pai é o tema HelpGuru. Observe que você usa o nome da pasta do tema pai aqui e não o nome do tema (portanto, acima eu usei 'helpguru', não 'HelpGuru').

A segunda seção importa a folha de estilo do tema pai, o que significa que todo o estilo do tema pai será ativado em seu tema filho. Você então adiciona seu próprio estilo abaixo desta declaração @import – isso significa que o estilo de ambos os temas será usado, mas onde existir uma declaração em ambas as folhas de estilo para o mesmo elemento, o CSS do tema filho prevalecerá devido à cascata (como o seu tema filho o estilo vem depois do estilo do tema pai).

Um tema filho pode consistir em uma folha de estilo e nada mais, se você quiser; nesse caso, tudo o que você usará para fazer é substituir alguns dos estilos do tema pai. Alternativamente, você pode adicionar arquivos de modelo extras e/ou um arquivo de funções, nesse caso você precisará entender como o WordPress acessa arquivos de modelo de seus temas pai e filho.

Arquivos de modelo de tema pai e filho

A maneira como o WordPress usa arquivos de modelo em temas pai e filho é bastante simples. Quando uma determinada página (ou post, ou qualquer outro tipo de conteúdo) estiver sendo exibida, o WordPress usará o arquivo de modelo mais relevante do tema pai ou filho de acordo com a hierarquia do modelo. Se encontrar duas versões do mesmo arquivo de modelo, usará a do tema filho. Isso significa que os arquivos de modelo do seu tema filho substituirão os arquivos de modelo do tema pai em dois cenários:

• se o seu tema filho contém um arquivo de modelo que está mais acima na hierarquia do que os do tema pai;
• ou se o tema pai e filho contiverem uma versão do arquivo de modelo necessário.

Decidindo sobre os arquivos de modelo de tema pai ou filho

O WordPress usará a hierarquia de modelos para determinar qual arquivo de modelo usar, mas isso interage com os arquivos que você possui em cada um de seus temas pai e filho. Para simplificar, o WordPress passa por três etapas:

1. Ele identifica o tipo de conteúdo que está sendo exibido.
2. Ele funciona através da hierarquia de modelos até encontrar um arquivo para exibir esse conteúdo, seja no tema pai ou filho.
3. Se o arquivo estiver presente no tema pai e filho, ele usará o do tema filho.

Vamos ilustrar isso com um exemplo. A tabela abaixo mostra o conjunto de arquivos de modelo em dois temas hipotéticos, um dos quais é filho do outro. Os arquivos que destaquei têm precedência.

Então, no exemplo acima, vamos ver quais arquivos de modelo seriam usados ​​para exibir certos tipos de conteúdo:

• Postagens únicas para o tipo de postagem personalizada 'produto' seriam exibidas usando single-product.php do tema filho.
• Postagens únicas para outros tipos de postagem (incluindo postagens normais) seriam exibidas usando single.php do tema filho.
• Páginas estáticas seriam exibidas usando page.php do tema pai.
• As listagens para a categoria de widgets seriam exibidas usando category-widgets.php do tema filho.
• Outras listagens de categorias seriam exibidas usando category.php do tema pai.
• Outras listagens de arquivos seriam exibidas usando archive.php do tema pai.
• Os resultados da pesquisa seriam exibidos usando search.php do tema pai.
• 404 páginas seriam exibidas usando 404.php do tema pai.
• Outras páginas sem um arquivo de modelo específico seriam exibidas usando index.php do tema filho.

Indo além – Substituindo a funcionalidade do tema pai

Além de substituir ou complementar os arquivos CSS e/ou de modelo em um tema pai, você pode usar um tema filho para substituir a funcionalidade do tema pai ou adicionar funcionalidades extras.

Aviso! Se tudo o que você está usando para o seu tema filho é adicionar funcionalidades extras, talvez seja melhor escrever um plugin. Infelizmente os arquivos de funções nos temas pai e filho não interagem da mesma forma que as folhas de estilo, na verdade funcionam de maneira oposta (confuso, eu sei). O WordPress chama as funções do seu tema pai depois daquelas do seu tema filho, o que significa que elas podem substituir as funções do tema filho. Eu sei que isso parece um pouco chato: você criou um tema filho, pois é isso que você quer em seu site, certo? Bem, felizmente existem maneiras de superar isso. O primeiro método é aquele que você usa em seu tema filho, e é definir a prioridade ao anexar suas funções à ação relevante ou aos ganchos de filtro. O segundo é feito no tema pai, e é para tornar suas funções conectáveis. Eu chegarei a isso em um momento, mas primeiro vamos olhar para o método em seu tema filho.

Usando a prioridade para substituir a funcionalidade do tema pai

Para ativar cada função que você adiciona em seu tema filho, você precisará anexá-la a um gancho de ação ou gancho de filtro usando add_action() ou add_filter() . As add_action() e add_filter() possuem três parâmetros:

• $tag – o identificador exclusivo para a ação ou gancho de filtro
• $function_to_add – o nome da sua função
• $priority – a prioridade com a qual você deseja vincular sua função (mais do que em breve)

Com add_filter() você pode usar um quarto parâmetro opcional, $arguments , mas isso não é particularmente relevante para temas filhos. Na maioria dos casos, apenas os dois primeiros parâmetros (ambos obrigatórios) são usados, mas você pode usar o parâmetro opcional $priority para substituir uma função no tema pai pela função em seu tema filho. Quanto maior a prioridade, mais tarde ele carrega: o padrão é 10 , então se o tema pai não especificar uma prioridade, você simplesmente defina a prioridade em seu tema filho para um número maior que 10. Vamos dar uma olhada em como isso funciona. Imagine que você está trabalhando com um filho do tema HelpGuru e deseja substituir a funcionalidade do menu e adicionar a sua. Este tema inclui a função ht_theme_setup() para configurar o tema (incluindo o registro de menus, a adição de suporte a imagens em destaque e muito mais), que é anexado ao gancho de ação after_setup_theme . O código no arquivo de funções do HelpGuru é o seguinte:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}
add_action( 'after_setup_theme', 'ht_theme_setup' );

Para sobrescrever elementos da função ht_theme_setup() (mas não todos: trataremos disso em breve) em seu tema filho, você escreveria uma função que substituisse elementos da funcionalidade fornecida pelo HelpGuru e a anexasse à ação after_setup_theme hook, especificando uma prioridade maior que 10:

function my_theme_setup() {
// contents of function
}
add_action( 'after_setup_theme', 'my_theme_setup', 15 );

Quando o WordPress encontra essas funções anexadas ao mesmo gancho, ele disparará a de menor prioridade primeiro, ou seja, a do tema pai. Ele então disparará o de maior prioridade do seu tema filho, o que significa que ele pode substituir a função do tema pai. Como mencionei acima, há outro método, que é uma boa prática escrever em seus temas para que eles possam ser usados ​​mais facilmente como temas pai, e isso é tornar suas funções conectáveis.

Usando funções conectáveis ​​para permitir uma substituição de tema filho

Como o WordPress passa a função no tema pai depois daquelas no tema filho, você pode codificar as funções do tema pai para que elas verifiquem uma função com o mesmo nome no tema filho e, se existir, a função do tema pai não é passado. Você faz isso com uma declaração condicional, como a que vimos acima no HelpGuru:

if ( ! function_exists( 'ht_theme_setup' ) ) :
function ht_theme_setup() {
// contents of function
}
}

Se nenhuma função com o mesmo nome já foi passada (por exemplo, no tema filho), a função do tema pai será passada. Mas se o WordPress já encontrou uma função com este nome, ele irá ignorar a função conectável (ou seja, a do tema pai). Para fazer isso funcionar, basta criar funções em seu tema filho com o mesmo nome daquelas em seu tema pai que você deseja substituir. Então, para substituir a função ht_theme_setup() em sua totalidade, você usaria isso em seu tema filho:

function ht_theme_setup() {
// contents of function
}

É isso! Basta escrever outra função com o mesmo nome e ela substituirá a do tema pai. Nota: Esta técnica só funcionará se você estiver criando seu próprio tema pai – não fique tentado a editar o arquivo de funções em um tema pai de terceiros para torná-los conectáveis. Afinal, o objetivo de criar um tema filho é que você não toca no pai!

Resumo

Como espero ter demonstrado, trabalhar com temas filhos pode aumentar sua eficiência e eficácia como desenvolvedor do WordPress, especialmente se você desenvolver sites personalizados para clientes ou para você mesmo. No mínimo, usar um tema filho de um tema existente, como um de nossos HeroThemes, pode tornar seu fluxo de trabalho de desenvolvimento mais rápido e eficiente, pois evita que você faça o mesmo trabalho repetidamente.

Você pode levar isso adiante usando os arquivos de modelo e o arquivo de funções do tema filho para substituir ou complementar a funcionalidade do tema pai. E se você realmente quiser levar os temas filhos ao máximo, você pode criar seu próprio tema pai, dando-lhe um ponto de partida rápido para todos os novos projetos e permitindo que você adicione muito mais aos seus temas filhos com menos esforço do que começar do zero .