O guia definitivo para temas filhos do WordPress

Publicados: 2022-06-13

Você já encontrou um tema WordPress quase perfeito para o seu site, mas decidiu não usá-lo por causa de um elemento de design minúsculo e estressante que você não podia ignorar? É o estilo da fonte, a paleta de cores ou o posicionamento dos elementos de design, talvez?

O mercado de temas do WordPress está saturado com tantos ótimos temas, gratuitos e premium, mas além de contratar um desenvolvedor para criar um tema personalizado para o seu site, há poucas chances de você encontrar um que seja perfeito até o último pixel.

Os temas filhos do WordPress permitem que os webmasters modifiquem os arquivos de um tema, mantendo sua funcionalidade principal no lugar, sem correr o risco de perder as modificações cada vez que o tema é atualizado. Eles dão a você o poder de modificar a aparência de um tema de algo tão pequeno quanto a chamada à ação de um botão para alterar completamente cada elemento de design.

Este artigo cobrirá tudo o que você precisa saber sobre temas filhos, desde o que eles são até por que são tão importantes. Vamos encerrar com um tutorial sobre como usar temas filhos em seu site WordPress – do jeito certo.

Parece bom? Vamos começar!

Temas filhos do WordPress: o básico

Temas filho são temas separados que herdam ativamente a funcionalidade de seus temas pai. A funcionalidade de um tema filho substitui a do tema pai, o que significa que a funcionalidade do tema filho será aplicada ao seu site. Depois de ativar um tema filho, o WordPress verificará se ele possui alguma funcionalidade específica. No entanto, se a funcionalidade não existir, ela examinará os arquivos do pai e seguirá com o codificado lá.

Em inglês simples, os temas filho são arquivos de tema duplicados e toda vez que você sentir a necessidade de modificar aspectos de design ou alguma funcionalidade, você o edita nos arquivos do tema filho. Esse é um ótimo recurso porque permite que os webmasters façam alterações no tema sem o medo persistente de estragar os arquivos originais.

A maioria dos temas do WordPress hoje em dia vem com temas filhos (ou variações de seus temas filhos) imediatamente.

Por que você deve usar temas filhos?

Fazer modificações e alterações em seu tema por meio de temas filhos é uma prática recomendada amplamente aceita (e recomendada). Pense assim: se você errar na primeira vez, sempre pode tentar de novo. Além desse benefício proeminente, os temas filhos são importantes para a manutenção e o desenvolvimento do seu site WordPress.

Elimine o risco de perder modificações

Fazer alterações no seu tema pai (os arquivos do tema original) significa que as alterações serão perdidas quando você atualizar o tema. Isso deixa você em uma espécie de beco sem saída; se você atualizar o tema, você perde todas as modificações, mas se você não atualizar o tema, você terá bugs residentes em seu site que podem estar afetando-o negativamente.

Você pode copiar e colar o código associado às modificações em seu tema pai assim que terminar de atualizar. Embora isso seja totalmente possível, por que gastar tempo localizando as modificações que você fez e copiando e colando-as nos arquivos de tema atualizados toda vez que você atualiza seu tema? É um processo fácil, mas falível.

É aqui que a importância dos temas filhos é percebida pela primeira vez. Usando temas filhos, você pode reter todas as modificações e atualizar com segurança o tema do seu site.

Manter a organização do código

Um tema WordPress normalmente é composto por alguns milhares de linhas de código e vários arquivos diferentes – HTML, CSS, PHP, JavaScript e muito mais. E por causa disso, quaisquer pequenas alterações feitas aqui e ali se tornam difíceis de rastrear. Quando chegar a hora de voltar e editar o tema ou corrigir bugs imprevistos, será bastante caro (tanto em termos de tempo quanto de orçamento).

manter a organização do código
Os temas filhos ajudam os desenvolvedores da Web a manter um código organizado.

Conforme discutido acima, os temas filho são herdados ativamente dos temas pai. Quaisquer alterações feitas no tema filho permanecem lá (o que acontece nos temas filhos permanece nos temas filhos!) e são mais fáceis de rastrear porque terá apenas algumas centenas de linhas de código (nas circunstâncias mais agressivas) em oposição a um alguns milhares.

Como você já deve saber, não há desvantagens em usar temas filhos. Na verdade, eles protegem seu site de bugs acidentais.

Como criar um tema filho no WordPress

A maioria dos temas vem com temas filhos, mas se você achar um do seu agrado que não tenha, criar um tema filho sozinho não é difícil. Demonstrarei o tutorial criando um tema filho para o nosso tema Sparkling.

Tema Sparkling do Colorlib
Tema cintilante do Colorlib

Passo 1: Crie um diretório para o tema filho em sua instalação do WordPress.

  1. Navegue até o diretório de temas do seu site WordPress ( /wp-content/themes ).
  2. Crie uma nova pasta e nomeie-a como sparkling-child . É uma prática recomendada dar ao seu tema filho o mesmo nome que o pai com -child anexado no final.
diretório de tema pai, diretório de tema filho
Tema pai – Tema filho

Adicionaremos todos os arquivos do tema filho a esta pasta. Dito isso, o único arquivo que um tema filho requer para funcionar corretamente é o arquivo style.css .

Etapa 2: Crie um arquivo style.css para seu novo tema filho.

  1. Navegue até o diretório do tema filho criado na Etapa 1, ou seja, /wp-content/themes/sparkling-child .
  2. Crie um novo arquivo .css no diretório e nomeie-o como style.css .
  3. Copie e cole o seguinte código no novo arquivo style.css :

https://gist.github.com/rafaysansari/59ab402cffc540d050ed

No código fornecido acima, as linhas mais importantes são as que começam com Theme Name , Template e @import . Você deve preencher essas linhas corretamente se estiver criando um tema filho para outro tema pai. A linha @import garante que você não precise reescrever as regras CSS do tema pai do zero. Sem a linha @import , o novo site terá apenas o conteúdo carregado nele, sem estilo.

Se o seu tema pai tiver várias folhas de estilo, pule esta etapa. Mostraremos como importar várias folhas de estilo usando uma função nativa do WordPress nas etapas a seguir.

Passo 3: Crie o arquivo functions.php (opcional).

O arquivo functions.php permite que os desenvolvedores da Web adicionem funcionalidades aos seus sites WordPress usando funções nativas do WordPress e código PHP.

  1. Navegue até a pasta do seu tema filho, ou seja , sparkling-child .
  2. Crie um arquivo .php e nomeie-o como functions.php .
  3. Adicione o seguinte código ao arquivo functions.php:

https://gist.github.com/rafaysansari/6c3cc1606823d56388f4

É importante notar que um tema filho não requer um arquivo functions.php para operar. Na verdade, você só deve adicionar este arquivo se pretender modificar a funcionalidade do tema pai. Na maioria dos casos, uma folha de estilo é suficiente, mas se seu tema pai tiver várias folhas de estilo, você terá que criar um arquivo functions.php .

Etapa 4: Importe várias folhas de estilo (opcional).

Se, por exemplo, o tema pai que você selecionou vier com mais de uma folha de estilo, importá-los para o seu tema filho @import diminuirá a velocidade do seu site em alguns segundos – o que não é bom. Você não deseja aumentar o tempo de carregamento da página do seu site se isso puder ser evitado com algumas linhas de código.

  1. Navegue até o diretório do seu tema filho e abra o arquivo functions.php em um editor de texto.
  2. Adicione as seguintes linhas de código ao arquivo functions.php sob a tag de abertura <?php :

https://gist.github.com/rafaysansari/9535343506d670226f4e

A função wp_enqueue_style() usada no código acima importará várias folhas de estilo para seu tema filho sem deixar seu site lento.

Observação: as práticas recomendadas para criar temas filho sugerem que você sempre deve importá-los usando o código fornecido acima, independentemente de quantas folhas de estilo seu tema pai tenha.

Etapa 5: faça upload do tema filho.

Agora que você criou com sucesso o tema filho, é hora de carregá-lo no seu site WordPress e ativá-lo.

  1. Compacte o diretório do tema filho em um arquivo .zip .
  2. Faça login no painel de administração do WordPress e navegue até Aparência > Temas .
  3. Clique no botão Adicionar novo na tela a seguir.
Botão Carregar Tema
Clique no botão Carregar Tema.
  • Clique no botão Carregar Tema para continuar.
  • Carregar tema filho
    Encontre o arquivo .zip do tema filho em sua unidade e carregue-o.
  • Procure o arquivo .zip do seu tema filho e carregue-o.
  • Depois que o tema filho for carregado, clique em Ativar .
  • Você também pode carregar o tema filho através do seu cliente FTP copiando e colando diretamente o arquivo .zip no diretório de temas. Se você estiver criando um tema filho para outro tema, faça as alterações necessárias no código fornecido acima.

    Este tutorial destina-se apenas a demonstrar como um tema filho é criado. Criamos um tema filho para Sparkling que você pode baixar diretamente se preferir não perder tempo criando o seu próprio.

    Personalizando seu tema filho

    Assumindo que tudo correu conforme o planejado, quando você ativa o tema filho, seu site deve ter a mesma aparência de quando o tema pai é ativado. Mas espere! O objetivo de criar um tema filho não é fazer seu site parecer diferente?

    Nesta seção, mostraremos como você pode começar a personalizar o tema filho para fazer modificações.

    Aplicando estilos personalizados

    Como o primeiro arquivo (e o arquivo obrigatório) que criamos foi , style.css , só faz sentido começar adicionando estilos personalizados ao tema filho usando-o. Ao adicionar código CSS personalizado à folha de estilo, você poderá substituir a folha de estilo do tema pai.

    Com CSS, você pode modificar todos os aspectos de design e estilo do tema ativado, desde cores e botões até dimensões e estilos de fonte. Desenvolvedores da Web com um talento real para CSS modificam todo o layout do tema filho para torná-lo único.

    Navegue até Aparência > Editor e adicione o código CSS diretamente de lá.
    Navegue até Aparência > Editor e adicione o código CSS diretamente de lá.

    Tudo o que você precisa fazer é adicionar o código CSS personalizado ao final do arquivo style.css do seu tema filho e pronto. Aqueles de vocês que não querem acessar o cliente FTP de seu site cada vez que uma simples mudança precisa ser feita podem navegar até o editor padrão do WordPress ( Appearance > Editor ) e adicionar o código CSS diretamente de lá. Navegue até Aparência > Editor e adicione o código CSS diretamente de lá.

    Tudo o que você precisa fazer é adicionar o código CSS personalizado na parte inferior do arquivo do seu tema filho e pronto.

    Técnicas alternativas de modificação de tema

    Adicionar código CSS ao arquivo style.css é a maneira mais simples de fazer modificações no tema filho. No entanto, se você quiser levar as coisas para o próximo nível e talvez adicionar alguma funcionalidade nova e personalizada ao tema filho, é aí que as coisas ficam sérias. Existem diferentes tipos de modificação que você pode fazer (além de alterar os elementos de design), como:

    • Adicione novas funções ao arquivo functions.php . Nós já criamos o arquivo functions.php para seu tema filho, então tudo que você precisa fazer agora é adicionar algumas funções personalizadas a ele, dependendo da funcionalidade que você deseja alcançar. Você pode codificar em PHP ou usar funções nativas do WordPress.
    • Edite os arquivos de modelo. Se style.css e functions.php simplesmente não funcionarem e você ainda precisar modificar o tema, você pode copiar e colar os arquivos de modelo do tema pai e editá-los de acordo.
    • Adicione novos arquivos de modelo. Se você encontrou modelos de que gosta em outro lugar (não no diretório do tema pai) ou se deseja criar seus próprios modelos, pode adicioná-los diretamente ao tema filho e partir daí.

    Você pode ficar tranquilo sabendo que seu site WordPress estará protegido contra bugs prejudiciais e não intencionais, independentemente do(s) método(s) que você adotar para fazer modificações no seu tema ativado. Se por acaso, algo com o código der errado, você saberá exatamente onde ocorreu o erro e poderá corrigi-lo. (Dica: geralmente está nas últimas linhas que você adicionou!)

    Uma das melhores coisas sobre os temas filhos é que eles permitem que os usuários personalizem totalmente o tema pai para corresponder à marca do site, o que é especialmente útil para empresas novas e estabelecidas. E se você quiser reprojetar completamente seu site mais tarde com base no mesmo tema pai ou em um novo tema pai, sempre poderá criar um novo tema filho e partir daí!

    Embrulhando-o

    Temas filhos são a maneira recomendada de fazer modificações em um tema do WordPress. Eles evitam que os usuários cometam erros potencialmente prejudiciais em seus arquivos de tema originais e correm o risco de perder as modificações cada vez que o tema for atualizado.

    Cobrimos tudo o que você precisa saber sobre temas filhos no WordPress, discutimos por que eles são tão importantes e orientamos você em um tutorial detalhado sobre como criar seu próprio tema filho do zero. Para ajudá-lo a começar a fazer modificações, concluímos com uma breve seção sobre como você pode começar a personalizar o tema filho.

    Você concorda que todas as modificações de design e funcionalidade devem ser feitas por meio de temas filhos? Você conseguiu criar um tema filho e ativá-lo com sucesso em seu site WordPress? Gostaríamos muito de ouvir sobre sua experiência, então deixe-nos saber comentando abaixo!

    Deixe-nos saber se você gostou do post.