Guia rápido para criar e personalizar um tema filho do WordPress

Embora o desenvolvimento de temas possa parecer esmagador, os temas filhos são fáceis de configurar e são uma alternativa muito mais rápida para desenvolver um tema do zero.

Neste post, compartilharei mais detalhes sobre temas filhos do WordPress, bem como como criar e personalizar um com eficiência.

O que é um tema filho do WordPress?

Antes de definir o que é um tema filho do WordPress, é importante primeiro entender o que é um tema do WordPress e de onde o WordPress está extraindo informações para exibir o design de um site.

De acordo com o WordPress Codex, “Um tema é uma coleção de arquivos que trabalham juntos para produzir uma interface gráfica com um design unificador subjacente para um weblog. Um tema modifica a forma como os dados são exibidos sem alterar o software subjacente.”

Se o seu site WordPress tiver um único tema ativo com todos os modelos e recursos necessários, não haverá distinção entre o tema pai ou filho.

No entanto, se você decidir que realmente gosta de um tema que encontrou, mas deseja fazer algumas alterações nele sem criar um tema do zero, pode criar um tema filho do WordPress para atender a esse propósito.

Um tema filho herda a estrutura do tema original e inclui apenas as personalizações feitas nele. Em vez de substituir um tema inteiramente, o tema filho modifica ou adiciona aos arquivos do tema existente.

Dessa forma, quando seu site é carregado para um visitante, o design do tema original é carregado, mas com as alterações que você fez nele.

As crianças na vida real – e não no mundo online – dependem de pelo menos uma figura parental para viver. Da mesma forma, um tema filho depende do tema original para funcionar.

É por isso que quando você usa um tema filho, o tema original é chamado de tema pai.

Ao contrário de um bebê humano, um tema infantil não é um tema completo por si só. Isso significa que o tema pai precisa ser instalado antes que você possa ativar seu tema filho correspondente.

O tema filho perfeito e quando usá-lo

Qualquer tema pode ser um tema pai, no entanto, alguns são mais adequados para ele.

Escolha um tema que você goste que possa usar algumas pequenas personalizações estruturais para atender às suas necessidades, mas que não vem com as opções para fazer as personalizações desejadas imediatamente.

Por exemplo, o tema Perfect Magazine foi usado como tema pai para criar o tema filho Newsliner para não apenas alterar algumas cores no design, mas também para remover um banner de publicidade ao adicionar um carrossel de postagem de blog na parte superior da página.

Esses tipos de personalizações não são possíveis nas opções da Perfect Magazine, mas não são grandes o suficiente para garantir a criação de um novo tema do zero.

Por que criar um tema filho?

Os temas filhos do WordPress são importantes para salvar e preservar todo o trabalho que você colocou em um site. Se você modificar um tema diretamente e atualizá-lo com uma nova versão de software, todas as suas modificações e personalizações serão perdidas.

É por isso que muitos proprietários de sites optam por não atualizar seu tema pai. Mas é uma grave preocupação de segurança, já que 54% dos sites invadidos do WordPress tinham software desatualizado, que hackers e malwares costumam executar varreduras para encontrar.

Além disso, as atualizações geralmente contêm correções de vulnerabilidades, portanto, ignorar uma atualização significa deixar seu site aberto a ataques.

Como alternativa, você pode criar um tema filho para evitar essas armadilhas.

Como mencionado anteriormente, usar um tema filho do WordPress também pode acelerar o desenvolvimento.

Com os sistemas de arquivos e elementos essenciais de um site já configurados, você não precisa começar do zero. Você pode criar um tema pré-existente e aproveitar a funcionalidade enquanto personaliza seu design.

Começando com um tema filho do WordPress

Existem alguns elementos-chave que você precisa para criar um tema filho:

1. Uma pasta de diretório de temas
2. Um arquivo style.css
3. Um arquivo functions.php

Embora o único arquivo necessário em um tema filho seja style.css , o arquivo functions.php é necessário para enfileirar a folha de estilo do tema pai corretamente.

Portanto, é altamente recomendável que você crie um arquivo functions.php em seu tema filho para evitar erros.

Criando um tema filho do WordPress

Ao criar seu tema filho do WordPress, há quatro etapas, descritas em detalhes abaixo: criar uma pasta de diretório, criar uma folha de estilo, enfileirar as folhas de estilo nova e pai e ativar o tema.

Criando uma pasta de diretório

Todos os temas estão localizados na pasta /wp-content/themes/ da sua instalação do WordPress.

Navegue até esse diretório e crie uma nova pasta que servirá como a pasta do tema filho.

Normalmente, o tema é renomeado usando o nome do tema pai, mas adicionando -child no final.

Por exemplo, os dois caminhos de arquivo serão /wp-content/themes/yourtheme/ e /wp-content/themes/yourtheme-child/ .

Também não deve haver espaços no nome do tema filho.

Embora essas não sejam regras rígidas e rápidas para nomear sua pasta, especialmente se você não estiver distribuindo o tema para uso público, é uma prática comum de desenvolvimento do WordPress, pois ajuda na organização.

Criando uma folha de estilo

Os temas filhos do WordPress são frequentemente usados ​​para edições de design bastante extensas, portanto, é necessário um style.css separado.

O arquivo conterá todas as regras e declarações CSS que afetam a aparência do seu tema.

Crie um arquivo style.css na raiz de sua nova pasta de tema filho. Em seguida, insira este cabeçalho na parte superior da página:

 /*
 Nome do Tema: Twenty Seventeen Child
 URI do tema: http://example.com/twenty-seventeen-child/
 Descrição: Tema Vinte e Dezessete Criança
 Autor: Jane Doe
 URI do autor: http://example.com
 Modelo: vinte e dezessete
 Versão: 1.0.0
 Licença: GNU General Public License v2 ou posterior
 Licença URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: claro, escuro, duas colunas, barra lateral direita, layout responsivo, pronto para acessibilidade
 Domínio do texto: vinte e dezessete filhos
*/

O cabeçalho é uma parte vital do arquivo, pois informa ao WordPress detalhes básicos sobre o tema. Também sinaliza que é um tema filho com um pai específico, conforme indicado pela parte do modelo .

Os únicos requisitos para o cabeçalho são o Nome do Tema e o Modelo . Mas, é uma boa prática preencher o resto.

Certifique-se também de alterar todos os detalhes necessários para que sejam precisos. Por exemplo, o autor e o URI do autor, bem como referências a Twenty Seventeen, se o tema pai que você estiver usando for diferente.

A seção Tags está relacionada ao diretório de temas do WordPress. Se você quiser enviar seu tema para lá, certifique-se de escolher tags que pertençam ao seu tema.

Enfileirando as folhas de estilo do tema pai e filho

Em seguida, é importante certificar-se de que a folha de estilo de cada tema seja carregada corretamente em um processo chamado enfileiramento.

Enfileirar significa adicionar um item ou uma lista de itens a uma fila para processamento de dados. Nesse caso, a fila são os arquivos que seu site precisa carregar quando um navegador os solicita.

Se você pular o enfileiramento, seu site apenas extrairá da folha de estilo do tema filho e não usará nenhum dos estilos fornecidos pelo tema pai.

Também pode ser importante observar que é possível enfileirar o style.css pai usando o método @import . Mas, isso não é mais recomendado devido a problemas de desempenho.

Para enfileirar as folhas de estilo, você precisa criar um arquivo functions.php , caso ainda não tenha feito isso.

Isso pode ser feito criando um novo arquivo e nomeando-o como functions.php . Então. coloque este código no topo:

 <?php

Certifique-se de não incluir espaços antes da linha acima ou resultará em um erro.

No arquivo functions.php , adicione o código abaixo para garantir que seu site esteja carregando corretamente o style.css pai e o style.css do tema filho na ordem correta:

 add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function my_theme_enqueue_styles() {

    $parent_; // Este é o 'estilo vinte e dezessete' para o tema Twenty Seventeen.

    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'estilo filho',
        get_stylesheet_directory_uri() . '/estilo.css',
        array( $parent_style ),
        wp_get_theme()->get('Versão')
    );
}
?>

Certifique-se de alterar o estilo pai armazenado na variável $parent-style para incluir o nome do seu tema.

Conforme recomendado pelo WordPress Codex, esse código garantirá que o style.css pai seja carregado como uma dependência, o que significa que é necessário que o style.css do tema filho seja carregado.

Ativando o tema filho

Depois de salvar todos os seus arquivos, vá para Aparência > Temas para encontrar seu tema filho e clique no botão Ativar.

Você não precisará ativar também seu tema pai. Embora, ele ainda deva ser instalado e permanecer na pasta /wp-content/themes/ .

O texto do cabeçalho no style.css do seu tema filho conectará os dois e esclarecerá o relacionamento para sua instalação do WordPress.

Depois de ativar seu tema filho, talvez seja necessário salvar novamente seu menu em Aparência > Menus , bem como algum outro conteúdo em Opções de tema do Personalizador, se tiver problemas com seu design.

Dicas de personalização rápida

Antes de iniciar o processo de desenvolvimento, abaixo estão algumas dicas sobre como personalizar seu tema filho do WordPress.

Imagem do tema

Na página Aparência > Temas , você deve incluir sua própria imagem para o tema.

Se você quiser inserir algo em vez de substituir a caixa quadriculada, você pode fazer upload de um arquivo de imagem PNG de 880 x 660 chamado screenshot.png .

Coloque a imagem na raiz da pasta do seu tema filho. Dessa forma, a instalação do WordPress saberá usá-lo como a imagem do seu tema.

Substituindo arquivos de tema pai

Se você deseja inserir novos arquivos em seu tema filho do WordPress para substituir componentes antigos, copie o arquivo pai para o tema filho, que você pode personalizar.

Ao carregar o site, o WordPress verificará se o tema filho possui algum arquivo que corresponda ao tema pai. Se algum for encontrado, ele substituirá o arquivo do tema pai original.

Não é preciso uma vila

A criação do tema filho do WordPress não precisa ser tão complicada quanto possa parecer. Siga as etapas acima e tenha certeza de que suas edições permanecerão intactas. Isso também ajudará seu site a ser um pouco mais seguro.

Que tipo de tema infantil você quer fazer? Você conseguiu criá-lo com sucesso? Você teve problemas no processo? Sinta-se à vontade para compartilhar sua experiência nos comentários abaixo.