Como criar e personalizar um tema filho no WordPress

O que é um tema infantil e por que é tão importante?

Neste post, vamos dar as respostas a essas perguntas e mostrar passo a passo como criar e personalizar seu próprio tema filho usando plug-ins ou código.

Se você quiser faça alterações no tema do seu site WordPress,você provavelmente já viu pessoas lhe dizendo para usar um tema infantil.

Mas o que é um tema infantil e por que os temas infantis são tão importantes?

Nesta postagem, forneceremos as respostas a essas perguntas, juntamente com uma introdução aos temas filhos e como eles são perfeitos para você.

Em seguida, mostraremos passo a passo como criar e personalizar seu próprio tema filho usando plug-ins ou código.

Mas, se você nunca instalou o WordPress, descubra Como instalar um blog WordPress passos 7 et Como encontrar, instalar e ativar um tema WordPress em seu blog

E então vamos voltar para o que estamos aqui.

O que é um tema infantil do WordPress?

Um tema filho não é um tema independente. É um "filho" de um tema pai existente, daí o nome.

Você o instalará junto com seu tema pai, mas lhe dará a chance de fazer alterações com segurança em seu tema pai, sem precisar editar o próprio tema pai.

O tema filho obterá a maioria / todas as configurações de design do tema pai. No entanto, em situações em que você altera o tema filho, essa alteração substituirá as configurações do tema pai.

Benefícios de um tema infantil

Neste ponto, você pode estar se perguntando: por que você não pode simplesmente fazer suas alterações diretamente no tema pai?

O principal motivo de não ser uma boa ideia é Atualizações de temas WordPress.

Se você deseja manter o seu site WordPress seguro e funcionando, você precisa aplicar rapidamente as atualizações assim que forem publicadas, incluindo atualizações para o seu tema WordPress.

Se você personalizar seu site modificando diretamente seu tema (sem tema filho), o que significa que você substituirá todas as alterações sempre que atualizar o tema do WordPress.

Isso significa que você:

Atualize seu tema WordPress e perca seu emprego. Não é uma experiência muito divertida, não é?
Não atualize seu tema WordPress para não perder seu trabalho ... o que não é bom para a segurança e operação do seu site WordPress.

Com um tema filho, você pode fazer todas as alterações no tema filho. Assim, você poderá atualizar o tema pai sem perder nada do seu trabalho.

Além de ajudá-lo a atualizar com segurança, usar um tema filho geralmente também é útil para fazer personalizações. Como separa todas as suas alterações em um só lugar, é fácil rastrear todas as suas alterações e alterá-las conforme necessário.

Também é fácil ficar de cabeça para baixo. Por exemplo, se você quiser parar de usar suas alterações e reverter para o tema pai, basta desativar o tema filho.

Alguns Temas do WordPress até mesmo usar essa abordagem pai/filho padrão. Por exemplo, se você quiser usar a estrutura Genesis, precisará do tema pai (a estrutura base) e de um tema filho para controlar o design.

Quando usar um tema infantil

Com exceção de algumas exceções que listaremos abaixo, você deve toujours use um tema filho se você planeja fazer suas próprias modificações em um tema WordPress existente.

Quando você não precisa usar um tema filho

Em geral, usar um tema filho é uma boa prática sempre que você personaliza seu tema WordPress.

No entanto, existem algumas exceções à regra em que pode haver uma opção melhor do que usar um tema filho.

Em primeiro lugar, se você deseja apenas fazer alguns pequenos ajustes no CSS, pode ser um exagero criar um tema filho apenas para alguns ajustes.

Em vez disso, você pode adicionar seu CSS personalizado usando o recurso CSS adicional integrado ao WordPress Customizer. Ou você pode usar um plugin gratuito para WordPress como Simple CSS.

Em segundo lugar, se você estiver fazendo alterações que deseja que sejam independentes do tema, um tema filho pode não ser a melhor opção.

Por exemplo, se você registrar uma taxonomia personalizada ou um tipo de postagem personalizado, você provavelmente não deseja usar o arquivo functions.php do seu tema infantil (porque você deseja mantê-los mesmo que mude o tema). Em vez disso, você deve apenas adicionar o código fora do seu tema com um plugin, como trechos de código ou seu próprio plugin personalizado.

Como criar um tema filho em WordPress

Agora que você sabe por que os temas filhos são importantes, vamos ver como você pode realmente criar um tema filho para o seu site WordPress.

Primeiro, se você estiver usando o Tema Hello Elementor, já criamos um tema filho para você - você não precisa fazer isso sozinho. Você pode pegue o tema filho Hello Elementor do WordPress.org. Você pode instalá-lo como qualquer outro tema do WordPress (também mostraremos como instalar um tema filho posteriormente neste artigo).

Se você estiver usando um tema WordPress diferente, sempre vale a pena dar uma olhada rápida no Google para ver se seu desenvolvedor de tema WordPress está fornecendo um tema filho. Por exemplo, Astra, GeneratePress e OceanWP possuem ferramentas / arquivos para ajudá-lo a baixar um tema filho.

Se o seu tema WordPress ainda não tiver um tema filho, você pode criar um tema filho para qualquer tema WordPress:

use um WordPress Plugin gerador de tema infantil gratuito.
Crie manualmente seu próprio tema filho.

Mostraremos como executar os dois métodos.

Como usar um plugin WordPress de tema filho

Um plugin gerador de tema filho permite que você crie um tema filho sem sair do painel do WordPress.

A opção mais popular aqui é o plugin de configuração de tema infantil gratuito, que está ativo em mais de 300.000 sites.

O Child Theme Configurator não apenas ajuda a criar os arquivos do tema filho, mas também analisa o tema que você está usando e as folhas de estilo de fonte e tema conforme necessário.

Também inclui outros recursos úteis se você estiver tentando criar um tema filho em um site onde já tenha adicionado conteúdo. Por exemplo, ele pode copiar seus widgets existentes e opções de customizador para o tema filho.

No entanto, se você planeja usar o plug-in em um siteopérationnel, recomendamos que você faça um backup completo antes de continuar. Ou, de preferência, configure tudo em um site de demonstração.

Depois de ter seu backup pronto, comece instalando e ativando o plug-in Configurador de tema infantil gratuito do WordPress.org. Em seguida, vá para o menu Ferramentas → Temas Infantis para criar seu tema filho.

Na lista Selecione uma lista suspensa tema pai, selecione o tema para o qual deseja criar seu tema filho. Então clique em Analise:

O plugin irá então analisar o tema pai para quaisquer dependências.

Uma vez feito isso, você verá mais algumas opções para configurar como criar seu tema filho. Se você não tiver certeza do que significa uma configuração específica, pode apenas deixá-la como o padrão:

Quando terminar de fazer suas escolhas, clique no botão na parte inferior para criar um novo tema infantil.

E isso é tudo ! O plug-in criará o tema filho para você. No entanto, ele não será ativado Não este tema infantil.

Para ativá-lo:

Aller à Aparência → Temas.
Visualize a aparência do seu site com este tema filho (para ter certeza de que funciona - se o seu site parecer estranho, provavelmente é por causa de um problema de CSS).
Ative seu tema filho como faria com qualquer outro tema WordPress. No entanto, certifique-se de deixar seu tema pai instalado.

Depois de ativar seu tema filho, o plug-in Configurador de tema infantil também oferece outras ferramentas úteis para ajudá-lo a gerenciar o tema filho. Por exemplo, se você for para a guia Arquivos nas configurações do plug-in, você pode visualizar todos os arquivos associados no tema pai e no tema filho.

Em seguida, você pode copiar arquivos do tema pai para o tema filho.

Por exemplo, se você quiser fazer algumas alterações em single.php, você pode copiar este arquivo para o tema filho para que possa editá-lo com segurança:

Você também encontrará muitas outras ferramentas para ajudá-lo a trabalhar com CSS.

Explicaremos por que essas ferramentas são úteis mais tarde.

Como criar manualmente um tema filho

Para esta seção, presumiremos que você sabe um pouco mais sobre PHP e CSS. Se você se sentir confuso com as instruções aqui, recomendamos o uso do plug-in gratuito da seção anterior.

Para criar manualmente um tema filho, você precisa criar dois arquivos (estes são os mínimos estritos para um tema filho):

style.css - no início, tudo o que você precisa adicionar é um código padrão.

functions.php - isso permite que você carregue a folha de estilo do tema pai. Sem ele, seu tema filho não seria capaz de aplicar o CSS do seu tema pai, tornando seu site super feio!

style.css

Primeiro, crie um arquivo chamado style.css e adicione o seguinte código:

/*

Nome do tema: Hello Elementor Child

URI do tema: https://github.com/elementor/hello-theme/

Descrição: Hello Elementor Child é um tema filho de Hello Elementor, criado pela equipe Elementor

Autor: Elementor Team

URI do autor: https://elementor.com/

Modelo: hello-elementor

Versão: 1.0.1

Domínio de texto: hello-elementor-child

Licença: GNU General Public License v3 ou posterior.

URI de licença: https://www.gnu.org/licenses/gpl-3.0.html

*/

Certifique-se de substituir tudo o que vem após os dois pontos por suas informações reais:

Nome do tema - nome do tema infantil.

Tema URI - o site do seu tema e sua documentação.

Descrição - uma breve descrição do tema.

Auteur - o nome do autor do tema.

URI do autor: - o site do autor do tema.

Modelo - nome de sua pasta de tema pai (conforme nomeado dentro de sua pasta wp-content / themes). Esta é a linha mais importante; seu tema filho não funcionará sem ele.

Versão - número da versão do seu tema infantil.

Campo de texto - isso é usado para internacionalização. Você pode simplesmente adicionar "filho" ao final do nome do modelo.

Licença - deixe isso como padrão.

Licença URI - deixe isso como padrão.

Excluindo a linha Modelo, realmente não importa o que você digita, então não se estresse muito. Apenas certifique-se de inserir o nome da pasta do tema pai corretamente para o modelo.

Se você quiser adicionar seus próprios estilos personalizados no futuro, poderá adicioná-los a esta folha de estilo sob o código padrão.

functions.php

Então você precisa criar o arquivo functions.php para o seu tema infantil. Novamente, isso é o que permite que você carregue a folha de estilo CSS completa do seu tema pai.

No arquivo funções.php, adicione o seguinte código:



/ * Função para enfileirar a folha de estilo do tema pai * /

function child_enqueue__parent_scripts () {
wp_enqueue_style ('pai', get_template_directory_uri (). '/ style.css');
}
add_action ('wp_enqueue_scripts', 'child_enqueue__parent_scripts');

Faça upload de arquivos para o site do WordPress

Depois de ter seus arquivos style.css et functions.php, você precisa carregá-los em seu site WordPress como um novo tema.

Para fazer isso, conecte-se ao seu site WordPress usando FTP.

Em seguida, vá para o diretório de temas do seu site (wp-content / themes)e crie uma nova pasta para o seu tema filho.

Por exemplo, se a pasta do seu tema pai for olá-elementor, você pode nomear a pasta do tema filho olá-eletor-criança para ajudá-lo a se lembrar disso.

Em seguida, faça upload do seu arquivo style.css et functions.php dentro desta pasta:

Depois de baixar os dois arquivos, você pode ir para Aparência → Temas e ative seu tema filho como faria com qualquer outro tema WordPress.

Como instalar um tema infantil do WordPress

Cobrimos alguns desses aspectos acima nos Métodos específicos, mas veremos como instalar um tema filho do WordPress mais uma vez.

Também será útil se você baixou um tema filho do site do desenvolvedor do tema, em vez de criá-lo você mesmo.

Você pode instalar um tema filho do WordPress como faria com qualquer outro tema do WordPress:

Acesso a Aparência → Temas no seu painel WordPress.
Clique Adicionar novo.
Faça upload do arquivo ZIP do tema filho.

Durante o processo de instalação, o WordPress detecta que você está baixando um tema filho e verifica se o tema pai existe:

Depois de fazer o download do arquivo, certifique-se de ative-o.

Lembre-se, para o seu tema infantil funcionar, você precisa instalar em aquela vezo tema pai e o tema filho.

Seu tema filho deve ser seu tema ativo, mas você ainda deve ter seu tema pai instalado.

Deve ser assim:

O tema filho é o tema ativo
O tema pai ainda está instalado, mas não ativo

Como personalizar um tema infantil

Assim como na personalização de um tema WordPress normal, você tem várias opções para “personalizar” um tema filho.

Para ser mais preciso, você é não está realmente personalizando o tema filho - você está usando o tema filho para personalizar o tema existente (pai).

Primeiro, vamos mostrar algumas maneiras de usar o código para personalizar seu tema filho. A seguir, compartilharemos uma maneira mais fácil de personalizar as coisas com Construtor de Temas Elementor.

Personalize um tema filho com código

Se quiser personalizar seu tema filho com código, você precisará ter um bom conhecimento de CSS, HTML e PHP.

Aqui estão algumas coisas que você pode fazer:

Adicionar CSS personalizado

Para personalizar seu tema filho com CSS, você pode adicioná-lo diretamente ao arquivo style.css do seu tema infantil.

Adicione CSS abaixo do código existente na parte superior do arquivo.

Qualquer CSS que você adicionar ao seu tema filho irá substituir o do seu tema pai, desde que você use os mesmos seletores.

Substitua os modelos existentes

Se quiser substituir os modelos do seu tema pai, você pode:

Copie o arquivo de modelo de seu tema pai para o tema filho.
Edite o arquivo de modelo em seu tema filho.

Por exemplo, se você quiser mudar único.php, você copia o arquivo primeiro single.php do tema pai para o tema filho (certificando-se de manter a mesma estrutura).

Então você pode editar o código em sua versão de tema filho de single.php.

Observação: O WordPress usará o modelo do seu tema filho, desde que tenha o mesmo nome. Por causa disso, você praticamente oculta o modelo existente no tema pai.

Se você estiver usando o plugin Child Theme Configurator que mencionamos acima, ele pode ajudá-lo a copiar arquivos para o tema filho sem sair do painel do WordPress.

Adicionar novos modelos

Além de copiar e modificar os modelos existentes de seu tema pai, você também pode criar novos modelos personalizados no tema filho.

Por exemplo, se você deseja criar um modelo para um tipo de postagem personalizada que você adicionou, você pode adicionar esses modelos em seu tema filho.

Personalize um tema filho com o gerador de tema Elementor

Se você não está familiarizado, Construtor de Temas Elementorpermite que você personalize parte ou todo o seu tema WordPress usando uma interface visual.

Com Elementor Pro e Theme Builder, você pode criar modelos personalizados para os modelos de seu site:

cabeçalho
rodapé
Única (por exemplo, uma única postagem de blog ou página)
Arquivos (por exemplo, a página que lista todas as postagens do seu blog)

Esses modelos funcionarão com o tema filho e o tema pai.

Com o Elementor Theme Builder, você não precisa trabalhar com o código diretamente. Não há como adicionar CSS personalizado ou copiar seus arquivos de modelo PHP - você faz tudo arrastando e soltando.

Por exemplo, suponha que você queira personalizar o cabeçalho do seu tema filho. Em vez de precisar copiar seu arquivo header.php no tema filho e, em seguida, alterar o PHP, você pode simplesmente projetar um novo cabeçalho usando o visual do Elementor e a interface de arrastar e soltar. Em seguida, você pode aplicar esse cabeçalho em qualquer lugar do seu site ou apenas em partes específicas do seu site.

Se você é novo em CSS, HTML e PHP, esta abordagem sem código permite que você personalize seu tema filho. E mesmo se você fizer isso, essa abordagem visual ainda pode economizar muito tempo do que com o PHP em seus arquivos de modelo.

Ao criar um novo modelo com o Elementor Theme Builder, você poderá escolher o tipo de modelo. Por exemplo, um cabeçalho.

Em seguida, você pode começar do zero ou escolher um dos modelos Elementor Pro:

A partir daí, você pode usar as opções de arrastar e soltar da barra lateral para controlar a aparência do seu cabeçalho:

Uma vez feito isso, você pode escolher exatamente onde deseja usar este modelo de cabeçalho:

Como deletar um tema filho em WordPress

Se você quiser parar de usar o seu tema filho, pode desativá-lo como faria com um tema WordPress normal.

Isto é :

Aller à Aparência → Temas.
Ative outro tema. Tanto o tema pai quanto um novo tema WordPress.

Lembre-se de que se você desligar o tema filho e voltar para o tema pai, quaisquer alterações adicionadas por meio do tema filho não estarão mais lá.

Em vez disso, você voltará a projetar seu tema pai.

Comece a usar um tema filho do WordPress

Um tema filho ajuda você a fazer alterações com segurança em seu tema WordPress.

Seu tema filho herdará todos os estilos do tema pai, mas todas as alterações feitas no tema filho substituirão o tema pai. Isso significa que você pode atualizar com segurança seu tema pai sem perder as alterações feitas no tema filho.

Para começar com um tema filho do WordPress, você pode:

Verifique se o seu desenvolvedor de tema já oferece um tema filho. Se você estiver usando Hello Elementor, você pode baixe um tema filho para ele no GitHub.
Use o plug-in configurador de tema infantil gratuito.
Crie manualmente seu tema filho.

A partir daí, você pode personalizar seu tema filho usando CSS, HTML e PHP. Você também pode pular o código e usar o Elementor Theme Builder para personalizar seu tema usando uma interface visual de arrastar e soltar.

Descubra também alguns temas e plugins premium do WordPress

Você pode usar outro WordPress plugins para dar uma aparência moderna e otimizar o manuseio do seu blog ou site.

Oferecemos a você aqui alguns plugins premium do WordPress que ajudarão você a fazer isso.

1. Tabelas de Preços AP

A Tabela de Preços AP é uma WordPress Plugin premium que facilita a criação de listas de preços ricas em recursos com interfaces intuitivas. Oferece 35 modelos predefinidos e um número ilimitado de opções.

com este WordPress Plugin fácil de usar, projetar uma tabela de preços impressionante com apenas alguns cliques será muito fácil. Ele permite que você crie grades de preços ilimitadas, fornecendo a capacidade de adicionar linhas e colunas, definir a borda da coluna, o espaço da coluna, a largura da coluna e muito mais.

Este plugin também permite que você adicionar conteúdo de áudio, vídeo e mapa do Google.

Descarregar| Demo | hospedagem na web

2.wp Construtor de páginas

WordPress Page Builder é o construtor final para seu site WordPress que vem com ótimas ferramentas para gerar qualquer postagem personalizada, taxonomia personalizada ou metabox personalizada.

Como recursos, tem entre outros: um tipo de postagem personalizadoCPT, uma taxonomia personalizada, campos personalizados avançados, funcionalidade de arrastar e soltar, localização compatível com o Google Maps, campos repetíveis compatíveis e muito mais.

Descarregar | Demo | hospedagem na web

3. Rankie

Rankie é um módulo WordPress muito útil, projetado para verificar regularmente as classificações do WordPress no Google, enquanto monitora de perto a posição de cada palavra-chave.

Como um plug-in de rastreamento de classificação, o Rankie atualiza o posicionamento das palavras-chave diariamente e gera relatórios precisos.

Ele também incorpora uma ferramenta de pesquisa poderosa que gera listas de palavras-chave valiosas. O Google já usa para pesquisas.

Descarregar | Demo | hospedagem na web

Recursos Recomendados

Descubra outros recursos recomendados para ajudá-lo a criar e gerenciar seu site.

Conclusão

Aqui ! É isso para este tutorial. Você ainda tem dúvidas sobre a utilidade de um tema filho no WordPress? Deixe-nos saber no seção de comentários e vamos tentar ajudar!

No entanto, você também poderá consultar nossos Ressources, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress.

Não hesite em compartilhe com seus amigos em suas redes sociais favoritas.

...