Child Themes – O que é, como fazer e quando usar

Acredito que o Child Theme, ou “tema filho”, ****é um dos melhores recursos do WordPress. Com ele você pode adicionar ou alterar estilos, funções, templates de páginas e etc. sem a necessidade de mexer nos arquivos core do seu tema. Ao criar um child theme você herda todas as funcionalidades de outro tema e pode

Acredito que o Child Theme, ou “tema filho”, ****é um dos melhores recursos do WordPress. Com ele você pode adicionar ou alterar estilos, funções, templates de páginas e etc. sem a necessidade de mexer nos arquivos core do seu tema.

Ao criar um child theme você herda todas as funcionalidades de outro tema e pode modificá-las através de um novo arquivo totalmente independente.

Neste artigo vou mostrar como é fácil criar, ativar e fazer uma alteração no seu tema com o uso de um child theme e mostrar quais são os prós e contras em usá-lo.

Vamos começar!

Primeiramente precisamos criar um diretório para o seu child theme na pasta de temas do wordpress (wp-content/themes) .

Você pode dar qualquer nome a este diretório, mas o codex do WordPress recomenda que você use o nome do tema pai sucedido de “-child” apenas por uma questão de organização.

Em seguida devemos criar dentro do diretório do child theme um arquivo style.css que é o único arquivo obrigatório para que ele funcione.

A única diferença do arquivo style.css de um child theme para o de um tema comum é a presença do nome do template pai, que em nosso caso é o “twentytwelve”.

Agora só falta ativarmos o tema no painel do wordpress.

Como funciona?

Pronto, agora que criamos o nosso child theme vamos entender como ele funciona.

Após ativar o tema, nosso site deverá aparecer assim (sem estilos aplicados):

Isso ocorre pois o WordPress desativa a folha de estilos padrão (do tema pai) ao ativar o tema filho. Logo precisamos adicionar uma nova folha de estilos ao nosso tema.

Pronto, no código acima estamos importando a folha de estilos do nosso tema pai. Agora seu site deve estar com os estilos funcionando perfeitamente e você poderá adicionar ou alterar qualquer estilo por este arquivo.

O seu child theme depois de criado, herda automaticamente todos os templates e funcionalidades do tema pai. Você só precisará adicionar na pasta do child theme os arquivos que você deseja alterar.

Por exemplo, se você quiser criar um novo rodapé para o seu site, basta criar um novo footer.php e colocá-lo na pasta do seu child theme, que ele irá substituir o footer.php do tema pai, sem que você precise modificá-lo diretamente.

Na prática

Vamos alterar a cor do título da página e adicionar um subtítulo para demonstrar como funcionam as modificações em estilos. Para isso é só adicionar um novo estilo, na nossa folha de estilos do child theme.

Pronto, no código acima estamos importando a folha de estilos do nosso tema pai. Agora seu site deve estar com os estilos funcionando perfeitamente e você poderá adicionar ou alterar qualquer estilo por este arquivo.

Antes

Depois…

Pronto! Assim as alterações em estilos são bem simples de ser feitas, basta saber as classes do tema pai e um pouco de efeito cascata, herança e especificidade do CSS.

Este recurso também facilita muito o estudo para quem está começando na criação de temas para WP e para quem trabalha sozinho, ou tem uma pequena empresa, ganhar tempo no desenvolvimento de novos sites.

Trabalho numa empresa pequena onde somos poucos desenvolvedores (dois) então o que mais fazemos é comprar um tema com funcionalidades básicas prontas (slider, carousel e etc.) e apenas estilizá-lo pelo child theme, fazendo pouquíssimas modificações no core. Até porque quando se tem um sistema pago, a frequência de atualizações é maior, aumentando o risco de surgirem problemas a cada versão. E ninguém quer deixar o seu cliente na mão, certo? 😉

É claro, como tudo na vida, nada é perfeito e há sim uma perda na velocidade de carregamento nas páginas, afinal ao importarmos os estilos e optarmos por evitar mexer no core, acabamos sobrescrevendo algumas classes com nossos novos estilos. Mas se essa não for a maior das prioridades no seu projeto, como no nosso caso, é uma excelente solução!

Espero que tenham gostado e qualquer dúvida postem nos comentários!

Abraço!

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *