Por Que Você Precisa de um Tema Filho e Como Criar o Seu Próprio

Imagine o seguinte: você encontrou o tema perfeito para o seu blog WordPress. Bem, quase perfeito. Depois de ajustar a fonte do menu de Times New Roman para Open Sans e mudar a cor de fundo da barra lateral de verde para azul celeste, ele se encaixa exatamente na sua visão. Até que duas semanas depois, o criador do tema lança uma nova versão com uma atualização de segurança essencial. Você atualiza seu tema apenas para notar que — puf! — suas alterações personalizadas desapareceram todas.

Felizmente, você não precisa gastar seus dias reimplementando suas mudanças e temendo novas atualizações. Existe uma maneira mais fácil de personalizar seu blog enquanto mantém a maior parte da aparência e sensação que você ama: você pode criar um tema “filho”, que herda a funcionalidade do tema “pai” enquanto adiciona aquelas modificações de estilo que são únicas para você. Mesmo que você atualize o tema pai, o tema filho mantém suas mudanças pelo tempo que você desejar.

É necessário apenas um arquivo .css para transformar um tema WordPress comum em um tema filho personalizado, e precisa de menos código do que você imagina. A seguir, um guia passo a passo para criar um tema filho a partir de qualquer tema WordPress regular que você já tenha em mente.

Nota: Este é um tutorial intermediário que assume que você já sabe um pouco sobre HTML e CSS. Não é necessário ser um mestre, mas estaremos editando o código de um tema. Se você ainda não se sente confortável com isso, talvez queira explorar o tutorial gratuito de CSS da W3Schools ou inscrever-se no curso gratuito de HTML/CSS da Codecademy.

WordPress + DreamHost

Nossas atualizações automáticas e defesas de segurança robustas tiram o gerenciamento do servidor de suas mãos para que você possa se concentrar em criar um ótimo site.

Confira os Planos

1. Comece com um Tema Principal e Planeje Suas Alterações

Este é o Twenty Sixteen, o tema que o WordPress.org criou e lançou para este ano. Se você está procurando um tema base no qual fazer alterações, definitivamente considere verificar os lançamentos anuais deles, como Twenty Fifteen, Twenty Fourteen e assim por diante.

Gosto em grande parte, mas quero fazer algumas alterações. Aquela borda preta é muito intensa para mim, e gostaria que fosse azul. Também gostaria de alterar a fonte.

Primeiro, eu abro as Ferramentas de Desenvolvedor do Chrome indo em Visualizar → Desenvolvedor → Ferramentas para Desenvolvedores no menu do navegador Chrome. (Se você preferir o Firefox, pode ir em Ferramentas → Desenvolvedor Web → Inspetor no menu do Firefox.)

As Ferramentas para Desenvolvedores permitem que eu inspecione o tema e veja de onde vêm as “regras”. Manipulando a classe CSS certa, posso descobrir o que precisarei colocar no meu tema filho para fazer minhas alterações. Por exemplo, você pode ver que ao editar a cor de fundo para #0099ff, eu posso mudar a borda de preto para azul. Claro, as Ferramentas para Desenvolvedores são apenas para brincar temporariamente, e quando eu atualizar esta página, a borda voltará a ser preta.

2. Crie a Pasta e os Arquivos do Seu Tema Filho

É importante nomear seu tema filho cuidadosamente, começando pelo nome da pasta onde você o coloca. Dessa forma, o WordPress sabe como identificá-lo automaticamente. Adicionar “-child” ao final do nome do tema original é a melhor prática. Então, no meu caso, já que o Twenty Sixteen está dentro de uma pasta chamada “twentysixteen”, eu nomeio minha pasta “twentysixteen-child”.

O primeiro arquivo que preciso criar é style.css, um arquivo css que inclui informações relevantes sobre meu tema e o estilo personalizado que desejo adicionar à sua aparência.

/*
Nome do Tema: Twenty Sixteen Child
URI do Tema: http://example.com/twentysixteen-child/
Descrição: Meu primeiro tema filho, baseado no Twenty Sixteen
Autor: Lauren Orsini
URI do Autor: http://lorsini.com
Template: twentysixteen
Versão: 1.0.0
Tags: duas-colunas, azul, barra-lateral-direita
Domínio de Texto: twentysixteen-child
*/

Começo preenchendo os detalhes necessários. Apenas “Nome do Tema” e “Template” são obrigatórios. O WordPress precisa saber o nome do tema, e também precisa saber qual tema ele deve considerar como tema pai, neste caso, Twenty Sixteen. O restante você pode preencher com suas informações personalizadas ou deixar em branco. Na verdade, essa estrutura tornou-se padrão para pessoas interessadas em publicar seus temas no WordPress.org. Se você está apenas construindo seu tema filho para uso pessoal, tudo o que você precisa é o nome do tema, descrição, autor, template e versão.

Agora, preciso adicionar os estilos que quero alterar. Quero mudar a borda preta para azul e quero mudar a fonte do cabeçalho para Georgia. A fonte do cabeçalho é exibida em três lugares no tema—título do site, título da entrada e título do widget, então preciso garantir que inclua todas as três classes CSS no meu estilo para afetar todas as três localizações.

Depois de terminar isso, meu tema filho está funcional. Eu poderia instalá-lo nesta etapa, mas ele teria apenas dois estilos, e o resto seria padrão. Não é isso que eu quero; eu quero que o tema herde os estilos do Twenty Sixteen. Então, preciso de um segundo arquivo, intitulado functions.php.

Simplemente copie e cole o seguinte código no arquivo functions.php:

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

Esta é uma função que adicionará à fila os arquivos style.css dos temas principais e secundários. Adicionar à fila significa incluir na lista de itens similares a serem processados pelo navegador. Essa função garante que ambos os conjuntos de estilos sejam carregados na ordem correta na tela do visualizador.

Um passo final e opcional é criar uma imagem de 880×660 (recomenda-se o tipo de arquivo PNG) a partir de uma captura de tela do seu tema filho. Dessa forma, se você tiver muitos temas instalados, poderá ver como este se parece à primeira vista.

3. Faça o upload do seu Tema Filho para o WordPress

Agora eu tenho uma pasta, com o título twentysixteen-child, que contém dois arquivos — style.css e functions.php. É hora de comprimir essa pasta em um arquivo zip e fazer o upload para o meu site.

Navegue até Aparência → Temas e selecione “Adicionar Novo”, que permitirá que você faça o upload de um arquivo zip. O WordPress primeiro verificará se o tema principal está instalado e, se estiver, você deve ser autorizado a fazer o upload do seu tema. Se o tema principal não for encontrado, não funcionará.

Agora, você deve ser capaz de ver seu tema na lista de temas carregados. Veja como o meu aparece quando eu clico nele. Note que eu não adicionei uma imagem de pré-visualização ao meu tema, mas mesmo assim funcionou. Mas veja como ele inclui todas as informações que eu coloquei no passo 2?

Preciso de um Tema Filho?

Se você precisa de ajuda para encontrar um público-alvo, escolher o tema WordPress certo ou definir os valores da sua marca, podemos ajudar! Inscreva-se em nosso boletim mensal para nunca perder um artigo.

Inscreva-se Agora

Ative o seu tema e, se tudo correr bem, você deverá conseguir ver suas alterações ao vivo. Ta da! Eu tenho a nova cor da borda e as fontes do cabeçalho que eu queria. Melhor ainda, mesmo que o WordPress atualize o tema Twenty Sixteen, minhas mudanças não serão alteradas.

Espero que este tutorial tenha ajudado você a ver como pode ser fácil e útil ter um tema filho no seu blog WordPress. É uma ótima maneira de proteger seu tema para o futuro, garantindo que ele continue bonito e personalizado, não importa o que aconteça.

Jason Cosper