Aprenda o jeito certo de personalizar temas WordPress

*Atualizada às 17h58, de 4 de junho de 2021.

Mais uma vez, estou por aqui trazendo um assunto que não é novidade para quem trabalha com WordPress há um tempo.

Recentemente, peguei uma demanda para atualizar o WP, os plugins e o tema ativo de um cliente. Em uma análise prévia, identifiquei que o tema utilizado havia sofrido alterações diretamente em seus arquivos.

Nesse caso, o maior problema é que o tema não havia sido desenvolvido ou versionado especificamente para esse cliente. A situação era: um tema aleatório do repositório havia sido instalado e modificado.

O que aconteceu ao atualizar esse tema? Todas as personalizações e melhorias aplicadas se perderam.

A partir desse cenário, pergunto: o que fazer para realizar alterações em temas sem correr esse risco? Criar um child theme.

Os child themes, como sua tradução sugere, são “temas filhos”, que herdam todos os arquivos do parent theme, o “tema pai”.

Abaixo, apresento o mínimo necessário para que você tenha um child theme prático e entenda basicamente seu funcionamento.

Aqui, você pode verificar a documentação oficial: https://codex.wordpress.org/pt-br:Temas_Filhos.

Estrutura necessária

São necessários, pelo menos, dois arquivos em uma pasta para compor o child theme.

Os arquivos são style.css e functions.php. Indico que o nome da pasta seja um complemento do parent theme.

LEIA TAMBÉM
Assista ao Meetup “Page Experience: Saiba como manter seus projetos WordPress relevantes para o Google” com Amanda Noronha
Edney “InterNey” Souza aponta 5 mindsets para transformação digital em palestra do WCSP 2019
Comunidade WordPress São Paulo recebe artigos inéditos

Por exemplo, tendo o Twenty Twenty-One como parent theme, em que o nome de sua pasta é “twentytwentyone”, a pasta do nosso exemplo será “twentytwentyone-child”.

Para que o WordPress entenda essa estrutura como um child theme na listagem de temas do painel administrativo, precisamos adicionar um “header” no arquivo style.css, por exemplo:

/*
Theme Name: Twenty Twenty-One Child
Theme URI: http://example.com/twentytwentyone-child/
Description: Twenty Twenty-One Child Theme
Author: Seu Nome
Author URI: http://seu-site.com
Template: twentytwentyone
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: twentytwentyone-child
*/

E no arquivo functions.php, precisamos incluir o style.css:

<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
[$parent_style]
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

+ TEXTOS DA COLUNA DE EVERALDO MATIAS

Observe que adicionamos o estilo do tema pai como dependência na função wp_enqueue_style(). Com isso, garantimos que o CSS do tema filho será carregado sempre depois do CSS do tema pai.

Assim, você poderá modificar o tema de forma correta, sem alterar diretamente seus arquivos e sem correr o risco de perder tudo na próxima atualização.

Na próxima coluna de maio, vou abordar como alterar arquivos PHP e funções com filtros e hooks a partir do tema filho. Até lá!

*

Mensalmente, Everaldo Matias escreve sobre Desenvolvimento para a comunidade WordPress São Paulo.

*

Everaldo Matias — O paulistano de 33 anos é desenvolvedor WordPress desde 2009. Formado em Tecnologia em Sistemas para Internet pela UNINOVE, contribui com a comunidade WordPress desde março de 2010. No universo do graffiti, é conhecido como Eve14. Nessa faceta, já participou da iniciativa São Paulo Capital Graffiti, é um dos idealizadores do Coletivo 5 Zonas, ganhou o prêmio Arte na Amauri do restaurante Ecco e realizou trabalhos para G-Shock, Dimension Customs, Tintas Coral, Pixel Show, Sesc Santo André, Estadão, entre outros.

O conteúdo desta coluna não reflete, necessariamente, as opiniões da comunidade WordPress São Paulo.

Redes sociais & últimos destaques da comunidade WordPress São Paulo