Como fazer personalizações com um tema filho
Este tutorial não é para todos.
Você não precisa ser um desenvolvedor experiente para acompanhar, mas precisa de um interesse genuíno em aprender mais sobre o WordPress e como os temas funcionam.
Se você não tem medo de trabalhar com um pouco de código e sujar as mãos com alguns arquivos de tema, seja bem-vindo!
Neste guia, você aprenderá como personalizar seu site WordPress de acordo com o seu conteúdo usando um tema filho, mas primeiro …
Vamos cobrir exatamente por que você deve usar essa coisa estranha chamada “tema infantil".
Por que usar um tema infantil?
Repita depois de mim:
Juro solenemente nunca editar um arquivo de tema.
Novos usuários do WordPress interessados em fazer personalizações com código costumam editar diretamente os arquivos em seu tema. Esta é uma grande falta de não.
Porque?
Um motivo: quando você atualizar seu tema, o WordPress substituirá seu tema existente pela nova versão do tema.
Então, por que isso importa?
Imagine que você está usando a versão 1.04 do tema Challenger. Você moveu o menu no arquivo header.php e adicionou um novo CSS ao style.css. Em seguida, a versão 1.05 é lançada e você vê a notificação em seu painel.
Quando você atualizar para a v1.05, os arquivos header.php e style.css serão substituídos pelos da v1.05 do Challenger. Eles não conterão as mesmas edições que você fez, então seu trabalho será perdido e não há como recuperá-lo. Isso pode ser muito desanimador se você dedicar horas às suas personalizações.
No entanto, se você colocar suas personalizações em um tema filho do Challenger, poderá atualizar com segurança para a versão 1.05 sem perder nenhuma de suas personalizações porque elas são armazenadas com segurança no tema filho.
Isso ficará um pouco mais claro à medida que passarmos para um exemplo real, então vamos prosseguir e fazer um tema filho agora.
Como criar um tema filho
Embora eu não vá explicar em detalhes como todo o código funciona aqui, essas são as ideias básicas e os snippets de que você precisa para começar.
Configuração básica
Comece criando uma pasta vazia em sua área de trabalho. Você pode nomeá-lo como quiser, mas a convenção de nomenclatura padrão é usar o nome do tema em minúsculas seguido de “filho” e substituindo os espaços por hifens.
Por exemplo, um tema filho para o tema Challenger teria um nome de pasta “desafiador-filho”. Esta pasta conterá todos os arquivos do tema filho.
Você só precisa de um arquivo para criar um tema filho tecnicamente válido, style.css.
Crie o arquivo style.css
Usando o editor de código de sua escolha, crie um novo arquivo dentro da pasta do tema filho e denomine style.css.
O arquivo style.css é, é claro, onde você adicionará todo o seu CSS para personalizar seu site. Para que o WordPress reconheça seu tema filho como um tema válido, você precisa adicionar um cabeçalho de folha de estilo como este no topo de style.css:
/*
Theme Name: Challenger Child
Template: challenger
Author: Compete Themes
Version: 1.0
Author URI: https://www.competethemes.com
Description: This is a child theme used to customize the Challenger WordPress theme.
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/Você pode copiar este cabeçalho exato e usá-lo para seus próprios temas filhos. Basta trocar o nome do tema pelo tema que você está personalizando.
A parte mais importante é o valor “Template” que deve ser definido como o nome do tema pai. Em particular, o nome usado para a pasta que contém o tema pai.
Com isso instalado, você já pode ativar o tema filho por meio do menu Aparência e usá-lo. No entanto, seu site ficará completamente sem estilo!
Quando um tema filho é ativado, o WordPress não carrega mais o arquivo style.css do tema pai e, em vez disso, depende do seu tema filho para fazer isso.
Veja como você pode carregar as duas folhas de estilo …
Crie o arquivo functions.php
Em seu editor de código, crie um segundo arquivo no tema filho e nomeie-o functions.php.
Em seguida, adicione o seguinte código ao arquivo:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri(). '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri(). '/style.css', array( $parent_style ), wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );Esta função diz ao WordPress para carregar o arquivo style.css do tema pai e, em seguida, carregar o arquivo style.css do tema filho. Carregar a folha de estilo do tema filho depois torna mais fácil substituir os seletores CSS do tema pai.
Como mencionei anteriormente, não vou cobrir esse código linha por linha, mas você pode encontrar uma explicação mais detalhada desse trecho no WordPress Codex.
Personalizando com seu novo tema filho
Isso é tudo que você precisa fazer para criar um tema filho funcional!
Com a configuração do tema filho, há três maneiras de personalizar seu site com ele.
Adicionar e substituir estilos
Você pode adicionar quantos CSS novos desejar ao arquivo style.css do tema filho.
Ao encontrar seletores para usar em seu CSS, não verifique o arquivo style.css do tema pai. Todos os nossos temas usam um “pré-processador CSS”, então nem olhamos para aquele arquivo! Em vez disso, siga este processo mais inteligente para encontrar seletores CSS e acho que você terá muito mais sucesso ao personalizar seu site.
Substituir funções
Com um tema pai bem codificado, você pode substituir qualquer uma das funções encontradas em seu arquivo functions.php.
Por exemplo, todas as funções em Mission News são embaladas com um [function_exists()](https://php.net/manual/en/function.function-exists.php)cheque. Isso significa que você pode copiar a função para o arquivo functions.php do seu tema filho. Em seguida, você pode fazer as edições que desejar para a função lá.
Substituir modelos
Uma customização comum que requer um tema filho é a reordenação de elementos. Por exemplo, você pode querer mover o título da postagem após a Imagem em destaque, em vez de antes dela.
Você pode pegar qualquer um dos arquivos de modelo encontrados no tema pai e colocar uma cópia em seu tema filho. Em vez disso, a versão no tema filho será carregada. Isso permite que você adicione, reordene e remova quaisquer elementos que desejar em qualquer parte do site.
Instalando o tema filho
Quando estiver satisfeito com suas edições, você pode instalar o tema filho em seu site.
Os temas filhos podem ser carregados da mesma forma que os temas normais do WordPress, portanto, leva apenas um ou dois minutos para ativá-los em seu site. Siga este tutorial para instalar o seu tema filho:
Como instalar um tema infantil do WordPress
Se você é totalmente novo em tudo isso, aqui estão algumas ferramentas gratuitas para ajudá-lo.
Primeiro, se você não tiver um editor de código, verifique o Visual Studio Code. É simples, mas flexível. Também é totalmente gratuito e muitos softwares profissionais são feitos com ele. É o que eu uso para fazer temas aqui no Compete Themes.
Em segundo lugar, criar um site WordPress local (offline) é uma ótima maneira de testar o código sem afetar seu site real ao vivo. Embora eu já tenha usado e recomendado o MAMP no passado, o Local by Flywheel é tão fácil e simples de usar que adoro isso. É o que eu uso para o desenvolvimento de temas e também é gratuito.
Suas atualizações estão seguras
Voltando ao exemplo anterior …
Ao atualizar o tema do Challenger (ou qualquer tema), todo o diretório “challenger” é substituído, o que não afetará o tema filho, pois agora ele tem seu próprio diretório na pasta “challenger-child”.
Com seu tema filho no lugar, você pode fazer com segurança quaisquer personalizações que desejar e manter seu tema pai atualizado.
Se você é novo em CSS e PHP, pode levar algum tempo para obter suas personalizações da maneira que deseja, mas com um tema filho, você tem uma ótima base para trabalhar. Lembre-se de seguir estas etapas para encontrar seletores CSS para usar, e qualquer personalização de estilo que você fizer será muito simples.