O que é um Child Theme
Um Tema Filho ou Child Theme é um recurso interessante para desenvolver projetos em WordPress de maneira ágil e elegante, pois permite tanto criar quanto sobrescrever funcionalidades de um tema já existente de forma fácil e organizada.
Não há problema algum em usar Child Themes, muito pelo contrário. A questão que eu nunca entendi é por que a própria documentação do WordPress ensina a criá-los de uma forma errada estranha.
Para explicar isso melhor, eu vou aproveitar e descrever de forma resumida como se cria um Child Theme, da mesma maneira como está no Codex. Logo em seguida vou dizer a maneira que considero mais correta.
Como criar um Child Theme
Vamos criar como exemplo um tema filho para o tema TwentyFourteen que já vem instalado como padrão.
- Basta criar uma pasta com um nome qualquer, no mesmo nível da pasta do twentyfourteen e dentro dela, criar um style.css
- Logo no começo do style.css deve ser inserido esse bloco de comentário:
/* Theme Name: Meu tema filho do TwentyFourteen Theme URI: https://origgami.com.br/blog/como-criar-child-themes-no-wordpress-de-forma-otimizada Description: Tema filho do TwentyFourteen Author: Origgami Author URI: https://www.origgami.com.br Template: twentyfourteen Version: 1.0.0 Tags: bla1, bla2 Text Domain: twentyfourteen-filho */
Pronto. Isso é o suficiente, e não há problema nenhum até aqui.
A polêmica
Bom, agora, se você tentou usar o seu tema filho, deve ter percebido que o CSS do tema pai não foi carregado. É aqui que começa a polêmica. A própria documentação do WordPress sugere que para carregar o css do tema pai basta incluir um import dentro do próprio style.css do tema filho, assim:
@import url("../twentyfourteen/style.css");
Isso resolve o problema, porém cria um outro de performance. Pois quando se carrega um css usando o import, você impede que o carregamento dos estilos seja feito de forma paralela, ou seja, você acaba carregando um css de cada vez quando poderia carregar todos ao mesmo tempo. Então o ideal é não carregar css usando import. #ficaadica.
Otimizando o seu Child Theme
A forma de resolver o problema acima é simples. Primeiro, esqueça o @import. Basta criar um functions.php dentro do seu tema filho e colocar o seguinte código:
//Carrega os estilos principais
add_action('wp_enqueue_scripts', function() {
//Informa a localizacao do css do tema pai
wp_register_style('twentyfourteen-style', get_template_directory_uri() . '/style.css', array());
//Informa a localizacao do css do tema filho
wp_register_style('my-child-style', get_stylesheet_directory_uri() . '/style.css', array('twentyfourteen-style'));
wp_enqueue_style('my-child-style');
});
O que isso vai fazer é informar a localização exata do css do tema pai e a do filho para o wordpress para que ele possa embedar de forma correta os 2 arquivos, usando o <link rel=”stylesheet” />
É importante lembrar de passar como último parâmetro a dependência do css do tema filho, que no caso é o próprio css do tema pai. Isso vai fazer com que o wordpress “chame” os arquivos na ordem correta.
Não espere que esse código funcione para qualquer tema, pois cada um carrega o seu estilo principal com um determinado nome. O css principal do twentyfourteen possui o nome de ‘twentyfourteen-style’. O do twentytwelve é ‘twentytwelve-style’. Pra descobrir isso basta entrar no functions.php do tema pai e dar uma olhada.
Otimizando ainda mais o seu Child Theme
Muitas das vezes, os temas principais carregam arquivos de fontes, seja do google ou de qualquer outro lugar, que em muitos casos não são utilizados nos Child Themes, mas o pessoal acaba esquecendo de tirar, fazendo assim o site carregar mais lentamente por conta de requisições desnecessárias. O twentyfourteen por exemplo carrega a open-sans e a lato do google fonts. Então pra remover essas fontes padrão do tema é só fazer o seguinte:
//Remove fontes desnecessarias
add_action('wp_enqueue_scripts', function() {
wp_deregister_style('open-sans');
wp_deregister_style('twentyfourteen-lato');
},11);
Depois disso, dá uma olhada no código fonte da página e veja a diferença! Não posso dizer que o seu pageload vá melhorar drasticamente, mas cada ajuste conta no resultado final.
Deixar um comentário