Como criar um tema filho do WordPress

Publicados: 2022-06-17

Presumivelmente, você já viu pessoas sugerirem que você use um tema filho do WordPress quando começar a fazer alterações no tema do seu site WordPress, mas o que é um tema filho e qual a importância dos temas filho em seu site?

Nós lhe daremos algumas explicações e um tutorial passo a passo sobre como instalar um tema filho e esperamos que isso possa ajudá-lo a decidir usar um.

O que é um tema filho do WordPress e qual é o benefício de ter um

Um tema filho do WordPress é um filho de um tema pai existente que oferece a chance de fazer alterações com segurança em seu tema pai sem editar o próprio tema pai.

Um tema filho requer a instalação de um tema pai, portanto, um tema filho não pode ser um tema autônomo. Um tema filho herda a maioria/todas as configurações de design, puxando-as do tema pai, em uma situação em que você faz uma alteração no tema filho, essa alteração substituirá as configurações no tema pai.

Você pode se perguntar, por que não mudar diretamente para o tema pai?

Você precisa manter seu tema atualizado se quiser manter seu site WordPress seguro e com melhor desempenho. Se você personalizar seu site editando seu tema diretamente, isso significa que toda vez que uma atualização for lançada e aplicada, você substituirá todas as suas alterações, e essa é uma experiência horrível, certo?

Além disso, você não precisa se preocupar com a atualização do tema, se você tiver um tema filho, isso também significa:

  • Você pode fazer todas as alterações no tema filho sem se preocupar em perder nenhum trabalho seu
  • Mais fácil de acompanhar todas as suas modificações e ajustá-las conforme necessário no tema filho
  • Você pode facilmente voltar ao design do tema pai a qualquer momento desativando o tema filho

Como criar um tema filho do WordPress

Agora, vamos entrar na parte mais prática deste tutorial. Mostraremos como criar um tema filho do WordPress com dois métodos:

  1. Usando um plug-in
  2. Usando o método manual.

Criando um tema filho do WordPress usando o plug-in

Recomendamos que você faça um backup completo do seu site antes de continuar. Ou, idealmente, configure tudo em um site de teste.

Neste tutorial, escolhemos o plugin Child Theme Generator para criar nosso tema filho. Possui uma instalação ativa de mais de 300.000, o que o torna a opção mais popular para criar e personalizar um tema filho.

Vamos começar instalando e ativando o plugin do WordPress.org. Em seguida, no painel do WordPress, vá para o menu Ferramenta → Tema filho para criar o tema filho.

Selecione o tema para o qual você deseja criar o tema do seu filho na configuração Selecionar um tema pai e clique no botão Analisar .

Depois que o plugin analisar seu tema, algumas opções adicionais para configurar o tema do seu filho aparecerão abaixo do resultado analisado. Cada opção adicional tem uma breve explicação do que faz. No entanto, você pode deixá-lo como padrão se não tiver certeza sobre as opções.

Quando terminar de fazer sua escolha, clique no botão Criar novo tema filho para criar um novo tema filho.

Então, depois que você recebeu o aviso sobre a criação bem-sucedida do tema filho, ainda precisamos ativar o tema filho. Vá para Aparência → Temas para aplicar o tema filho.

Antes de ativá-lo, vamos dar uma olhada na Visualização ao vivo de como seu site se parece com seu tema filho para ter certeza de que está funcionando.

Quando estiver pronto, clique no botão Ativar para ativar o tema filho.

Você pode usar a ferramenta incluída no plug-in Child Theme Configurator para ajudá-lo a gerenciar seu tema filho, como visualizar todos os arquivos associados no tema filho e no tema pai e copiar arquivos do tema pai para o tema filho indo para a guia Arquivos das configurações do plug-in para substituir as configurações dos modelos pai.

Criando um tema filho do WordPress manualmente

Assumiremos que você conhece um pouco sobre PHP e CSS para esta seção ou pode usar o método de plug-in da seção anterior se não se sentir confortável com as instruções aqui.

Para criar manualmente um tema filho, você precisa ter pelo menos esses dois arquivos:

  • style.css ~ Folha de estilo principal do tema filho
  • functions.php ~ Este arquivo garantirá que o tema filho herde seu estilo de tema pai enfileirando a folha de estilo do tema pai.

Vamos começar criando a pasta para o tema do seu filho. Abra o gerenciador de arquivos em seu serviço de hospedagem na web. Vá para o diretório de instalação do WordPress e abra a pasta / wp-content/themes/ .

Você pode nomear a pasta como quiser, no entanto, você pode nomear a pasta do tema filho com o nome da pasta do tema pai adicionando “filho” no final para ajudá-lo a se lembrar dela.

Continue abrindo a pasta e criando o primeiro arquivo, o arquivo style.css . Abra o arquivo e adicione o seguinte código: 

 Nome do tema: Twenty Twenty One Child Theme
URI do tema: https://www.wppagebuilders.com/
Descrição: Tema filho Twenty Twenty-One 
Autor: WPPagebuilders
URI do autor: https://www.wppagebuilders.com
Modelo: vinte e um
Versão: 1.0.0
Domínio do texto: vinte e vinte e um filho

O código acima contém informações sobre o tema filho, sinta-se à vontade para alterar tudo após os dois pontos, exceto a linha Template com suas informações reais. A linha do modelo deve ter a mesma linha que o nome da pasta do tema pai, pois o tema filho não funcionará sem isso.

Agora, vamos criar o segundo arquivo, o arquivo functions.php . Continue abrindo o arquivo e adicione os seguintes códigos: 

 <?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'estilo-pai', get_template_directory_uri().'/style.css' );
}
?>

Depois de criar os dois arquivos, você também pode adicionar uma imagem na pasta do tema filho para fornecer uma miniatura para ajudá-lo a reconhecer o tema filho ao pesquisá-lo. Você deve nomear a imagem com “ screenshot ” como seu nome para que a miniatura apareça na seleção do tema.

A próxima etapa é ativar o tema filho recém-criado. A ativação é como você faria em qualquer outro tema do WordPress, acessando Aparência → Temas no painel do WordPress. Você pode querer ver a Visualização ao vivo primeiro antes de ativá-la.

Mais sobre o tema filho do WordPress

Um Google rápido para um tema filho do seu tema pode deixar sua criatividade fluir. Por exemplo, temas como Divi têm um mercado para temas filhos em seu site, e o Astra tem uma ferramenta para gerar temas filhos.

Instalando um tema filho WordPress pré-fabricado

Para instalar um tema filho pré-fabricado é como você faria com qualquer tema do WordPress e isso é indo em Aparência → Temas → Adicionar Novo e depois clique em Carregar Tema para fazer o upload do tema filho.

Observação : o criador dos temas filhos pode fornecer mais instruções sobre como instalá-los para obter o mesmo estilo e aparência da visualização do tema.

Personalizando o tema filho

Você pode querer personalizar seu tema filho (na verdade, você está usando o tema filho para substituir o pai), assim como personalizar um tema WordPress regular, existem vários métodos para isso, aqui estão alguns dos métodos:

  • Usando o personalizador do WordPress na tela de administração do WordPress
  • Ao utilizar o construtor de temas do construtor de páginas de sua escolha
  • Ao adicionar um código CSS personalizado ao style.css do seu tema filho
  • Substitua o modelo do tema pai copiando o arquivo de modelo e editando-o no tema filho

Para os dois últimos métodos, você precisará ter algum conhecimento de CSS, HTML e PHP.

No entanto, se você quiser apenas colocar alguns trechos de código para adicionar alguma função da internet ao seu site WordPress, vamos pegar o código gerado pelo campo personalizado Metabox para o exemplo, então você pode colocá-los no arquivo functions.php do tema filho a qualquer momento sem se preocupar sobre quebrar ou atualizar o tema pai.

Removendo um tema filho do WordPress

Para parar de usar seu tema filho, você pode desativá-lo como faria em qualquer outro tema do WordPress, ativando outro tema em Aparência → Temas . Seja um novo tema WordPress ou volte para o tema pai, apenas um lembrete, se você voltar para o design padrão do tema pai, todas as alterações do tema filho desaparecerão até que você o ative novamente.