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

childthemes_oqueecomofazer_topo

Muitas vezes o volume de trabalho é maior do que você ou sua empresa pode suportar, mas há um jeito de tornar o desenvolvimento dos seus projetos em WordPress ainda mais rápidos.

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) .

criar

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

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

  1. /*
  2. Theme Name: Twenty Twelve Child
  3. Theme URI: http://www.tableless.com.br/
  4. Description: Tutorial de Child Theme para o Tableless
  5. Author: Tableless
  6. Author URI: http://www.tableless.com.br/
  7. Template: twentytwelve
  8. Version: 1.0
  9. */

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.

ativar

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):

theme-zero

Isso ocorre porque cada arquivo que é criado nele substitui os arquivos originais do tema pai, se estiverem com os mesmos nomes, como é o caso do nosso style.css(um dos arquivos padrões para temas em wordpress).

Mas isso é fácilmente resolvido com um @import no css. (ou um include/requirecaso esteja fazendo uma alteração em um arquivo em php) .

  1. @import url(“../twentytwelve/style.css”);

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.

  1. article h1 {
  2. font-family: Georgia, Geneva, serif;
  3. font-size: 20px;
  4. color: #FF0000;
  5. }

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

antes

Depois…

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!

Well, that’s all folks.”

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

Fonte: Tableless

Postagens Relacionadas