Como criar o Child Theme no WordPress

Child Theme ou na tradução grossa do termo, “temas filhos” foi criado por desenvolvedores do WordPress para que você possa criar subtópicos com base nas características de um pai ou de um tema mestre. Um tema filho permite que você use e modifique um tema mestre e salve o tema filho separadamente sem afetar o tema pai. Neste tutorial, você aprenderá como criar e personalizar um tema filho do WordPress.

Por que você deve usar Temas filhos no WordPress

Um tema filho permite que você modifique muito (ou pouco) um tema pai como você desejar. Em seguida, você pode alterar o tema filho sem afetar o tema pai ou quaisquer outros projetos usando-o como uma âncora para seus próprios temas filho.

Como funcionam os temas filhos do WordPress

Um tema filho reside em um diretório separado do tema pai e cada diretório filho precisa incluir seus próprios arquivos style.css e functions.php. Arquivos personalizados podem ser adicionados conforme necessário, mas esses arquivos são recomendados para o tema funcionar corretamente.

Usando os arquivos .css e .php relevantes, você pode modificar tudo, desde os parâmetros de estilo e de layout, até a codificação real e os scripts que o tema filho usa, mesmo que esses scripts não estejam presentes no diretório do tema pai.

Pense no tema filho como uma sobreposição, que é implementada por cima do tema pai. Quando um visitante carrega seu site, o WordPress primeiro carrega o tema filho e, em seguida, herda estilos e funções ausentes do tema pai. Como resultado, a maioria de sua codificação de plano de fundo ainda é retirada do diretório pai, mas é modificada de acordo com os parâmetros do tema filho antes que o conteúdo seja exibido na página.

O que você precisa?

Antes de começar este guia, você precisará do seguinte:

• Acesso à área de administração do WordPress
• Acesso ao gerenciador de arquivos (recomendado) ou FTP

Passo 1 – criando um tema Filho no WordPress

Criar um tema filho não é mais complicado do que o trabalho que você já está fazendo com um único tema mestre.

Você criará um diretório para o tema filho no diretório wp-content / themes existente. É melhor manter uma boa organização de diretórios adicionando -child ao final do nome do tema pai. Você também pode adicionar o nome do projeto específico, se preferir. Lembre-se de não incluir quaisquer espaços no nome do arquivo porque eles podem causar erros. Para criar um novo diretório, você pode usar o cliente FTP ou o Gerenciador de Arquivos.

O exemplo a seguir usa o Gerenciador de Arquivos para criar um tema filho com base no tema Twenty Seventeen, então o caminho completo para a pasta de tema filho será  wp-content/themes/twentyseventeen-child.

1. Acesse o painel de controle do Hostinger e clique em Gerenciador de Arquivos.
2. Navegue até o diretório de instalação do WordPress (geralmente chamado de  public_html) e abra a pasta wp-content -> themes.
3. Clique no ícone Criar nova pasta, digite o nome do seu filho e clique em Criar.
4. Acesse a pasta do tema filho recém-criada.
5. Clique no botão Novo Arquivo, digite style.css como o nome do arquivo e clique em Criar.
   
6. Preencha o arquivo com o seguinte código:

   */ 
   Theme Name: Twenty Seventeen Child 
   Theme URL: http://hostinger-tutorials.com 
   Description: Twenty Seventeen Child Theme 
   Author: John Doe 
   Author URL: http://hostinger-tutorials.com 
   Template: twentyseventeen 
   Version: 1.0.0 
   Text Domain: twentyseventeen-child 
   */ Custom CSS goes after this line

7. Altere todos os valores para coincidir com o nome do seu tema e domínio. Os campos mais importantes são os campos Template e @import porque eles informam o WordPress qual o tema principal no qual o tema do seu filho é baseado. Quando terminar, clique em Salvar.
   
8. Adicione um novo arquivo functions.php na mesma pasta, mas não copie e cole o código do arquivo do tema pai, porque ele precisa permanecer separado de todas as modificações feitas no tema filho. Em vez disso, crie um arquivo em branco ou adicione novas funções .php necessárias para o seu tema filho.
9. Na área de administração do WordPress, navegue até Aparência -> Temas para ver o tema filho recém-criado e clique em Ativar.
   
10. Visite seu site, e você verá seu tema com alguns problemas óbvios (como ilustrado abaixo). Não entre em pânico, porque o arquivo functions.php não está carregando o CSS do tema pai ainda.
11. Na área de administração do WordPress, navegue até Aparência -> Editor e escolha functions.php.
12. WordPress tem uma função para carregar o CSS de temas pais. Copie e cole o seguinte código para o arquivo theme.php do tema filho:

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

13. Clique em Atualizar na parte inferior da página para salvar suas alterações.
14. Visite seu site novamente. Você notará que o CSS está carregado e seu tema filho parece exatamente o mesmo que o tema pai.

Como você pode ver a criação do tema filho no WordPress é bastante simples se você quebrar o processo para separar etapas.

Passo 2 – Personalização de um tema Filho WordPress

É muito provável que você queira personalizar a aparência do tema do seu filho. É por isso que o criou em primeiro lugar, certo?

Passo 2.1 – Personalizar o aspecto do seu Tema Filho

Para personalizar a aparência do tema, é necessário editar o arquivo custom.css do tema filho. Você pode usar um editor de texto e cliente FTP, gerenciador de arquivos ou usar o editor WordPress (Aparência -> Editor). Você também precisa de uma compreensão básica das regras CSS e sabe como inspecionar elementos usando seu navegador.

Por exemplo, para alterar a cor de plano de fundo do tema filho do WordPress, adicione a seguinte regra CSS ao arquivo style.css:

.site-content-contain {
background-color: #d5ffa0;
position: relative;
}

Veja abaixo como isso mudaria a aparência do seu site WordPress. Siga um processo semelhante para qualquer outro elemento que você deseja alterar.

O mesmo vale para qualquer outro elemento que você quiser mudar.

Passo 2.2 – Adicionando e removendo recursos

Outra grande vantagem de usar um tema filho é a capacidade de ter um arquivo functions.php separado que, assim como Plugins, é usado para adicionar (ou remover) determinados recursos. Ao ter o functions.php em um tema filho separado, você pode ter certeza que quaisquer modificações não desaparecerão após uma atualização do tema.

Para adicionar novos recursos ao seu tema, adicione o código PHP ao arquivo functions.php do seu filho. Por exemplo, o código a seguir irá desativar o recurso de pesquisa do WordPress:

function disable_search( $query, $error = true ) {
if ( is_search() ) {
$query->is_search = false;
$query->query_vars[s] = false;
$query->query[s] = false;
// to error
if ( $error == true )
$query->is_404 = true;
}
}

add_action( 'parse_query', 'disable_search' );
add_filter( 'get_search_form', create_function( '$a', "return null;" ) );

Conclusão

Os temas filhos do WordPress oferecem uma maneira poderosa para criar um projeto totalmente novo com base em parâmetros de um tema mestre sem afetar os arquivos do tema pai, e vice-versa. Com um pouco de codificação simples e gerenciamento de diretórios, você pode modificar o tema filho quanto você quiser, proporcionando uma ampla gama de possibilidades para seu projeto. Se você quiser saber como criar um blog usando o WordPress, nós temos um passo a passo interessante.