Personalizar um tema WordPress existente é uma necessidade comum, mas editar o tema diretamente pode causar problemas. 

Se o tema for atualizado, suas alterações serão substituídas! A melhor maneira é criar um tema filho herdado do tema pai. 

Os temas filhos permitem que você modifique e estenda um tema com segurança. 

Neste guia detalhado, discutiremos a criação de um tema filho no WordPress. Você aprenderá a finalidade dos temas filhos, como configurá-los e como personalizá-los para substituir o design e a funcionalidade do tema pai. 

Com alguns métodos, você pode criar um tema filho e começar a aplicar suas alterações sem tocar nos arquivos do tema pai. 

Então, sem mais delongas, vamos começar.

1 O que é um tema infantil?

Um tema filho é um tema WordPress que herda a funcionalidade de um tema pai. Ele permite modificar ou adicionar novos recursos sem alterar os arquivos do tema pai. 

Isso é útil porque se você modificar diretamente os arquivos do tema pai, suas alterações serão perdidas quando o tema for atualizado. 

Com um tema filho, você pode fazer alterações sem afetar o tema pai e receber atualizações sem perder as modificações.

Nesta seção, você notará que mencionamos o tema pai, mas o que é exatamente?

2 O que é um tema pai?

Um tema pai é um tema pré-projetado que serve de base para um site WordPress. Ele fornece o estrutura básica, layout e funcionalidade do site. 

Um tema pai pode ser personalizado para atender às necessidades de um site específico, adicionando ou modificando seus recursos. 

Usar um tema pai pode economizar tempo e esforço ao construir um site, fornecendo um ponto de partida para o design e a funcionalidade.

Neste ponto, podemos dizer que todos os temas do WordPress são tecnicamente temas pais, a menos que sejam especificamente projetados para serem temas filhos.

Aqui está um ponto-chave a ser lembrado: Um tema pai pode existir e funcionar de forma independente, enquanto um tema filho sempre depende de um tema pai para fornecer as principais funcionalidades e recursos.

3 Por que usar um tema infantil?

Existem alguns motivos principais para usar um tema filho em vez de modificar um tema diretamente:

• Criar um tema filho protege suas modificações de serem substituídas quando o o tema pai é atualizado.
• Ele mantém os arquivos de tema pai e filho separados. Isso ajuda a evitar confusão, pois os arquivos são organizados.
• Vários temas filhos podem ser usados ​​para finalidades diferentes, como alterar estilos ou funcionalidades. Mas observe que um site só pode ter um tema ativo por vez.
• Também é uma ótima maneira de começar a desenvolver um novo tema WordPress completo.

Observação: Personalizações extensas em um tema filho podem levar a problemas de gerenciamento. Para projetos maiores, criar um tema completo/pai com base no tema original geralmente é melhor do que continuar a modificar o tema filho.

4 Pré-requisitos para criar um tema filho

Antes de criar um tema filho, é importante ter alguns requisitos em vigor. 

Em primeiro lugar, você precisa de uma instalação funcional do WordPress e de um tema pai para o qual deseja criar um tema filho. 

Também é útil entender HTML, CSS e PHP, pois você alterará o código para personalizar o tema filho. 

Além disso, você poderá copiar e colar trechos de código de outras fontes. 

É recomendado praticar em um ambiente de desenvolvimento local usando conteúdo fictício ou movendo um site WordPress ativo para um servidor local para fins de teste. Isso permite que você teste seu tema filho antes de implementá-lo em um site ativo.

Por fim, é importante ter um backup do site caso algo dê errado durante o processo.

Assim, depois de definir todos esses requisitos, você pode criar um tema filho. Tudo que você precisa fazer é seguir o processo de configuração do tema filho descrito neste guia.

Mas para este guia, usaremos o tema WordPress padrão Twenty Twenty-four.

5 Criando um tema filho no WordPress

Agora que você entende o conceito de temas filhos, vamos nos aprofundar na criação de um tema filho no WordPress. 

Exploraremos dois métodos comuns para você escolher, atendendo a diferentes níveis de conforto:

5.1 Criando um tema filho usando um código

Primeiro, acesse a instalação do WordPress via FTP ou um gerenciador de arquivos fornecido pelo painel de controle de sua hospedagem. Navegue até o wp-content/themes diretório e crie uma nova pasta com um nome exclusivo para o seu tema filho. 

Para este tutorial, usaremos o nome “mtschild” para a pasta do tema filho.

Este diretório atua como o espaço de armazenamento principal para os componentes do tema filho.

Dentro da pasta do tema filho, crie um novo arquivo intitulado style.css. Este arquivo conterá os detalhes essenciais para reconhecer e ativar seu tema filho. Abra o arquivo style.css e insira o código subsequente:

Theme Name: MTS Child Theme
Theme URI: https://www.mythemeshop.com/
Description: Child theme for the Twenty Twenty-Four Theme
Author: MyThemeShop
Author URI: https://www.mythemeshop.com
Template: twentytwentyfour
Version: 1.0.0
Text Domain: mtschild

Este código notifica o WordPress que seu tema filho estende o tema pai especificado. Substitua “MTS Child Theme” pelo nome do seu tema filho preferido e o campo do modelo pelo nome da pasta do tema pai.

A próxima etapa envolve garantir que o tema filho herde estilos do tema pai. Para conseguir isso, você deve enfileirar a folha de estilo do tema pai.

Para fazer isso, acesse o arquivo functions.php no diretório do seu tema filho (crie um se estiver ausente) e implemente um dos códigos a seguir.

Se o seu tema pai não carregar nenhuma folha de estilo, utilize o seguinte código para carregar style.css via funções.php:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
wp_enqueue_style( 'mts_child_theme-style', get_stylesheet_uri() );
}

Este código também pode funcionar se o tema pai carregar apenas sua folha de estilo. 

No entanto, se o tema pai carregar apenas a folha de estilo do tema ativo, você também deverá enfileirar a folha de estilo do tema pai por meio de functions.php usando o código abaixo:

<?php
add_action( 'wp_enqueue_scripts', 'mts_child_theme_enqueue_styles' );
function mts_child_theme_enqueue_styles() {
	wp_enqueue_style( 'mts-child-theme-parent-style', get_parent_theme_file_uri( 'style.css' ) );
}

Para o tema Twenty Twenty-Four usado neste guia, aplicaremos o primeiro código, pois o tema não carrega nenhuma folha de estilo. 

Lembre-se de começar com o <?php tag ao adicionar o código. Modifique esses códigos conforme suas necessidades, especialmente onde o nome do tema mts_child_theme é utilizado.

Depois de concluir as etapas acima, faça login novamente no painel do WordPress e prossiga para Aparência → Temas. Passe o mouse sobre o tema filho e clique no botão Ativação botão.

Como você ainda não fez nenhuma alteração no tema filho, seu site manterá a funcionalidade e a aparência do tema pai. 

No entanto, iremos orientá-lo na personalização do tema filho para prepará-lo para futuras modificações.

Este é o processo manual de criação de um tema filho usando código no WordPress. Se esse método parecer complexo, você pode explorar a abordagem do plugin que abordaremos na próxima seção.

5.2 Criando um tema filho usando um plugin

Criar um tema filho usando um plugin é simples e fácil. Primeiro, você precisa instalar e ativar o Configurador de tema infantil plugar. Para obter mais detalhes, consulte nosso guia passo a passo em como instalar um plugin do WordPress.

Assim que o plugin for ativado, vá para o painel do WordPress e navegue até Ferramentas → Temas Filhos.

No Selecione uma guia Tema pai, escolha o tema pai no menu suspenso para a criação do tema filho. Normalmente, o tema ativo em seu site é pré-selecionado.

Em seguida, clique no Analise botão. O plug-in examinará o tema pai selecionado para determinar se ele pode gerar um tema filho e se necessita de seu arquivo style.css para aparência.

Em seguida, atribua um nome ao seu tema filho. Você pode personalizar a folha de estilo, funções e outras configurações de acordo com sua preferência. 

No entanto, evite alterar as configurações até chegar à seção 7.

Na seção 7, clique no botão rotulado Clique para editar os atributos do tema filho.

A partir daí, você pode inserir os detalhes do seu tema filho.

Ao criar manualmente um tema filho, você poderá perder os menus e widgets do tema pai. 

No entanto, o plugin Child Theme Configurator pode transferi-los do tema pai para o tema filho. 

Se desejar prosseguir, marque a caixa de seleção na Seção 8. Por fim, clique no botão Criar novo tema filho botão para criar o tema filho.

Após a conclusão, o plugin criará uma pasta para o seu tema filho contendo arquivos essenciais style.css e functions.php para personalização futura.

Antes de ativar o tema, visualize-o clicando no link “Visualizar seu tema filho” na parte superior da tela para verificar sua aparência e garantir que não afete negativamente o seu site.

Depois de verificar se tudo está funcionando corretamente, clique no botão Ativar e publicar botão. Isso fará com que o tema filho fique ativo em seu site.

Depois de ativar o tema filho em seu site, é hora de começar a personalizá-lo. Abordaremos isso na próxima seção.

6 Como personalizar o tema do seu filho

Antes de se aprofundar na personalização, identifique os elementos do seu site que deseja modificar, como estilos, modelos, funções, áreas de widgets ou modelos de páginas personalizados. 

Ter uma visão clara de seus objetivos agilizará o processo de customização. Existem vários métodos para personalizar o tema filho, incluindo:

6.1 Personalizando estilos com CSS

O arquivo style.css do seu tema filho serve como uma plataforma para ajustar a aparência do seu site. Aqui, você pode inserir regras CSS personalizadas para alterar ou aprimorar os estilos do tema pai.

Antes de prosseguir, é necessário um conhecimento básico de HTML e CSS. 

Você pode utilizar efetivamente a ferramenta Inspecionar do seu navegador ou copiar estilos diretamente do arquivo style.css do tema pai.

Para acessar os códigos CSS de uma página da web usando seu navegador, basta clicar com o botão direito na página e selecionar Inspecionar nas opções que aparecem. Esta ferramenta exibe os códigos de estilo CSS, permitindo identificar os elementos que deseja modificar.

Quando você clica com o botão direito e seleciona “Inspecionar”, a tela do seu navegador se bifurca, exibindo o HTML e CSS da página. 

Dependendo das configurações do seu navegador, os detalhes HTML e CSS podem aparecer no lado direito ou na parte inferior da tela.

Conforme você passa o mouse sobre várias linhas HTML, o inspetor do Chrome irá destacá-las na guia Elementos e exibir as regras CSS correspondentes relacionadas ao elemento destacado.

Você pode experimentar editando o CSS diretamente para visualizar como ele aparecerá. Por exemplo, se você deseja alterar a cor de fundo da página inicial padrão do tema Twenty Twenty-Four de #f9f9f9 para #6841ea.

Depois de ajustar a cor de fundo no inspetor do navegador, a alteração é temporária. Para torná-lo permanente, você deve transferir esta regra CSS para o arquivo style.css do seu tema filho:

body {
background-color: #6841ea;
}

Após inserir o código, lembre-se de salvar suas modificações. Você pode replicar esse processo para qualquer outro elemento de página da web que desejar personalizar.

Por exemplo, digamos que você queira modificar as cores do seu site. Podemos fornecer alguns códigos CSS que permitirão que você faça isso.

Para alterar a cor do texto para cinza escuro, adicione o seguinte código ao seu arquivo CSS:

body { color: #3b3b3b; } 

Para alterar a cor do título para azul, use o seguinte código:

h1, h2, h3 { color: #007bff; }

Para a cor de fundo do cabeçalho, use o seguinte código:

#header { background-color: #f5f5f5; } /* Light grey background for header */

E para a área de conteúdo, use este código para definir a cor de fundo como branco:

.site-container { background-color: #fff; } 

Você pode copiar esses estilos CSS para o arquivo style.css do seu tema filho por meio do diretório do tema filho do seu site ou do painel do WordPress.

Quando você adiciona seu código CSS, ele se parecerá com este formato:

Depois de salvar as alterações, tente atualizar a página do seu site. Se as alterações não aparecerem, limpe o cache do navegador para garantir que você está visualizando a versão mais recente do CSS.

6.2 Substituindo arquivos de modelo

Embora a personalização CSS controle a aparência do seu site, os temas filhos oferecem um recurso mais robusto: substituir arquivos de modelo.

Esse recurso avançado permite remodelar o layout e estrutura das páginas do seu site e elementos. No entanto, tenha cuidado, pois isso exige uma compreensão mais profunda dos modelos do WordPress, HTML e PHP.

Para substituir um modelo, copie o arquivo .php original da pasta do tema pai para o tema filho, mantendo o nome exato do arquivo. 

Por exemplo, para substituir header.php, você precisa copiar o arquivo header.php do diretório /parent-theme/ e colá-lo como header.php no diretório /child-theme/.

Agora você pode editar o header.php no seu tema filho.

Alguns modelos comuns para substituir:

• header.php – Contém marca e marca do site, navegação, etc.
• footer.php – O fechamento tag e marcação.
• page.php - Modelo padrão para páginas.
• single.php – Modelo usado para postagens únicas.
• index.php – Modelo de página inicial.

Por exemplo, você pode modificar footer.php exibindo um copyright personalizado para o seu site:

<!-- Modified child footer.php -->

<footer>
  <p>&copy; <?php echo date('Y'); ?> My Company</p>

  <?php if ( is_active_sidebar('footer-1') ) : ?>
    <?php dynamic_sidebar('footer-1'); ?>
  <?php endif; ?>

</footer>

6.3 Estendendo a Funcionalidade

A functions.php arquivo no tema filho permite introduzir novas funções PHP, ganchos, filtros e código para expandir os recursos padrão do tema pai.

Essa flexibilidade permite registrar tipos de postagem personalizados, incorporar widgets personalizados, criar novos códigos de acesso, enfileirar scripts adicionais e muito mais.

Por exemplo, se você deseja uma seção dedicada em seu site WordPress para widgets personalizados, utilize o seguinte trecho de código para estabelecer uma área de widget chamada “Área de widget personalizada”:

function register_custom_widget() {
    register_sidebar( array(
        'name'          => 'Custom Widget Area',
        'id'            => 'custom_widget_area',
        'description'   => 'Add widgets here to appear in the custom widget area',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widget-title">',
        'after_title'   => '</h2>',
    ) );
}
add_action( 'widgets_init', 'register_custom_widget' );

Depois de salvar este código no arquivo functions.php do seu tema filho, navegue de volta ao seu site WordPress e acesse Aparência → Widgets. Você notará o widget “Área de widget personalizada” disponível para uso.

7 Perguntas Frequentes

8 Conclusão

Criar um tema filho no WordPress é uma habilidade valiosa que pode ajudá-lo a personalizar seu site sem correr o risco de perder suas alterações durante as atualizações do tema. Embora possa parecer assustador no início, não desista muito rapidamente se cometer erros. 

Os erros mais comuns que você pode encontrar são erros de sintaxe causados ​​pela falta de algo no código. Se algo der errado, você sempre pode começar de novo. 

Por exemplo, se você acidentalmente excluir algo que seu tema pai exige, você pode simplesmente excluir o arquivo do seu tema filho e começar de novo. 

Lembre-se, com um pouco de persistência, a criação de um tema filho pode lhe dar flexibilidade para criar uma aparência única para o seu site, ao mesmo tempo que mantém a estabilidade e a segurança do tema pai.

Então experimente e veja a diferença que ele pode trazer para o seu site WordPress.

Esperamos que este guia tenha ajudado você a criar um tema filho para o seu site. Se sim, avise-nos por Tweetando @rankmathseo.

• Conteúdo com tecnologia de SEO e distribuição de relações públicas. Seja amplificado hoje.
• PlatoData.Network Gerativa Vertical Ai. Capacite-se. Acesse aqui.
• PlatoAiStream. Inteligência Web3. Conhecimento Amplificado. Acesse aqui.
• PlatãoESG. Carbono Tecnologia Limpa, Energia, Ambiente, Solar, Gestão de resíduos. Acesse aqui.
• PlatoHealth. Inteligência em Biotecnologia e Ensaios Clínicos. Acesse aqui.
• Fonte: https://rankmath.com/blog/wordpress-child-theme/