Cuidados ao fazer alterações em um tema WordPress

Editar o código-fonte de um tema pronto para WordPress pode quebrar seu site. Saiba como personalizar um template do jeito certo, do painel ao child theme.

Por Fabio Lobo, atualizado em 13/10/2020. 2 pessoas falando sobre isso!

Se você precisa inserir um script, alterar algo no visual ou modificar a estrutura de um tema pronto para WordPress, não faça alterações no tema instalado – principalmente se for pronto, daqueles que recebem atualizações e tudo mais.

Em resumo, aqui você vai ler:

  • O que, afinal de contas, é um tema WordPress;
  • Qual é a maneira correta de personalizar um tema pronto;
  • Quais os riscos ao se alterar códigos de um tema;
  • O que é um child theme e como fazer um;
  • Também falo sobre alterações em códigos do próprio WordPress ou de plugins;
  • Maneiras de corrigir erros provenientes de alterações de códigos de um tema WordPress;
  • E, por fim, comento sobre a possibilidade de você ter um tema próprio, do seu jeito.

Tentei reunir o máximo de situações e dúvidas que podem surgir. Se faltou alguma coisa, por favor, deixe seu comentário para que eu possa deixar esse conteúdo ainda mais completo!

Atenção! Parece que você está editando seu tema diretamente através do painel do WordPress. Recomendamos que não faça isso! A edição direta do seu tema pode danificar seu site e suas alterações podem ser perdidas em futuras atualizações. Se você precisar ajustar mais do que o CSS do seu tema, tente criar um tema descendente. Se você decidir continuar editando diretamente, use um gerenciador de arquivos para criar uma cópia com um novo nome e guarde o original. Desta forma, você pode restaurar uma versão funcional se algo der errado.
Se você já tentou editar as linhas de código de um tema, certamente o WordPress te disse isso aí.

O que é um tema WordPress?

Antes de começarmos, vou deixar mais o que é que eu estou falando aqui: temas prontos para WordPress.

Um tema, ou template, é basicamente um site (ou blog, ou loja virtual) pronto. Ou seja, é um modelo para você utilizar em um projeto online, como o site da sua empresa.

É como baixar um currículo pronto na internet e apenas preencher com seus dados e informações: você não precisa fazer o currículo inteiro porque já baixou ele pronto, formatado como deveria.

Um tema pronto necessariamente é baixado de algum lugar, como no repositório do WordPress ou em algum site pago, como nesse catálogo da FicaOn.

Ou seja, não é um tema personalizado que você encomenda com alguma agência ou desenvolvedor. Nesse caso, se você precisar de alguma alteração, basta pedir suporte para quem desenvolveu o template.

Agora, se você adquiriu um tema pronto, edições no código não devem ser feitas de maneira alguma.

Por que você não deve fazer alterações no código de um tema

São vários motivos. Listarei cada um abaixo.

Mas antes, deixo claro que não estou considerando personalizações feitas através do painel de customização – seja o do próprio WordPress ou o que vem junto com o tema.

Na verdade a maneira correta de customizar um tema WordPress são nessas opções que citei, já que foram feitas pra isso. Não é recomendado, de forma alguma, que alterações sejam feitas diretamente nos arquivos do tema – ou seja, no código-fonte, na programação.

Se você fizer isso…

Suporte e atualizações serão comprometidos

Assim como plugins e o próprio WordPress, temas prontos também recebem atualizações de tempos em tempos.

Alguns exemplos de atualizações mais comuns:

  • Atualização de segurança: o WordPress, por ser o CMS mais utilizado do mundo (no momento em que escrevo esse post, mais de 36% dos sites utilizam WordPress), é alvo frequente de ataques de hackers. Sendo assim, atualizações de segurança são constantes para que o sistema permaneça seguro;
  • Correções de bugs: às vezes uma atualização do WordPress ou de algum plugin acaba gerando alguns bugs no tema por questões de incompatibilidade com códigos novos. Além disso, também pode acontecer de o próprio tema ter algum problema que precisa ser corrigido;
  • Novas implementações: hoje em dia uma tecnologia pode se tornar obsoleta de uma semana pra outra. Sempre há alguma novidade que envolve SEO, compatibilidade, segurança, desempenho e por aí vai. WordPress, plugins e temas precisam acompanhar essas tendências.

Com essa lista acima já deu pra entender que não dá pra simplesmente ficar sem atualizar um tema, certo?

Mas o que isso tem a ver com o tema deste post?

Bom, a cada atualização que um tema recebe, todos os arquivos do tema são substituídos por novos. Mesmo aqueles que não foram atualizados.

Durante o processo de instalação da atualização, o sistema não consegue reconhecer que você havia feito alterações no código do tema. Ou seja, o que você alterou será perdido.

Se você deixa de atualizar o tema, poderá sofrer com bugs e problemas de segurança.

Se você precisar de ajuda do suporte de quem desenvolveu o tema, não será ajudado porque fez alterações no código. O desenvolvedor só pode dar suporte para o código que ele mesmo fez, sem alterações.

Mas não para por aí!

Poderá ocorrer um efeito dominó de bugs

A grande maioria dos temas prontos para WordPress são o famoso tiro de canhão para matar uma formiga. Principalmente os chamados “multi-purpose”.

Explico: para atender o maior número de necessidades de cada um, os temas são desenvolvidos com diversas ferramentas e funcionalidades.

Quando você adquire um tema pronto, irá ver diversas opções no painel do tema. Provavelmente irá utilizar de 10% a 30% delas. O restante vai ficar ocioso – você não vai utilizar, mas vai estar lá.

Tendo isso em vista, alterar um código (PHP, CSS ou até mesmo o HTML) sempre pode trazer alguma surpresa desagradável. Se tratando de programação, mexer em uma coisa, por mais simples que pareça, pode afetar outra que você nem fazia ideia que existia ou tinha relação com aquilo.

O que deveria levar 5 minutos pra ser feito, pode levar mais de 2 horas e um pedido urgente de backup para a hospedagem logo em seguida. Ou uma gambiarra gigantesca que pode comprometer até mesmo seu rankeamento no Google.

Sendo assim…

O barato sai caro

Se a intenção foi comprar um tema pronto pra fazer alterações e, assim, economizar com mão de obra, o barato pode sair caro.

Os motivos estão nos tópicos acima. Mas vou resumir abaixo:

  1. Você vai perder atualizações importantes;
  2. Uma alteração pode levar muito mais tempo do que deveria;
  3. Qualquer modificação pode trazer um bug aqui ou ali;
  4. Leva à criação de gambiarras, o que pode comprometer o desempenho do seu site ou o funcionamento de alguma opção de tema e, com isso, afetar o site inteiro;
  5. No final das contas você vai acabar precisando da ajuda de um profissional, e isso pode ficar mais caro do que ter contratado um tema feito do zero.

Há anos eu não atendo projetos assim justamente porque até eu, que tenho experiência na área, acabo sofrendo com esses imprevistos. Não tem como prever absolutamente nada.

Assim, eu acabo saindo no prejuízo e o cliente também. Não tem um case de sucesso que eu me lembre: tudo sempre teve um porém.

Além disso…

Não fica tão bom quanto poderia

Como você pode ler acima, não tem muito pra onde correr. Mesmo que você consiga contornar bugs e gambiarras, como ficam as atualizações?

No final das contas, você terá um tema remendado e que não pode ser atualizado. Visualmente pode ter ficado do jeito que você queria, mas “por dentro” o tema virou uma bomba relógio.

Mas a verdade é que até mesmo visualmente sempre vai ter aquela impressão de algo estar fora de lugar, destoando. Uma mistura dos estilos feitos pelo criador do tema e os que você alterou. Dificilmente há uma padronização do design em casos assim.

Sabe como contornar isso?

Existem milhares de templates prontos. Um deve ter o que você precisa!

Tanto temas grátis quanto temas pagos. Há diversas opções, cada um com estilo diferente, a maioria com um painel cheio de possibilidades para você poder personalizar o que for preciso.

Em vez de baixar um tema já pensando nas edições que ele irá precisar até ficar do jeito que você precisa, invista mais meia horinha em uma pesquisa até encontrar um template que já esteja na medida.

O que costumo recomendar é: escolha um tema WordPress que precise apenas do seu logo, suas cores e seu conteúdo.

Se precisar de alguma alteração, que seja pra remover algum elemento, já que alguns temas vêm com uma página inicial lotada de informações.

Agora, se você não encontrou um tema pronto para o que você precisa, talvez seja o caso de repensar seu projeto: ou ele é muito específico e requer auxílio de um programador WordPress, ou é tem algo fora dos padrões do mercado (no mau sentido: alguma coisa está sendo planejada de maneira equivocada ou exagerada).

Altere os códigos através de um child theme

Se não tem jeito, as personalizações do painel são insuficientes e você realmente precisa colocar a mão na massa, dê boas vindas ao child theme (que já existe faz muito tempo mas é tããão ignorado por “profissionais” da área…).

Eventualmente você só quer inserir um código do Google Analytics ou AdSense na sua página, não tem nada a ver com customizações no tema como foi o foco dos tópicos acima. Isso é comum, e há soluções para que você não precise editar o tema instalado.

Claro, há alguns plugins que ajudam com esse tipo de coisa. Mas quando você menos esperar, vai estar com dezenas de plugins instalados, um para cada coisa. Isso não é nada bom, também.

Felizmente há essa opção do child theme.

ilustração de bebê com body azul com logo do WordPress
Nasce a solução ideal! (dsclp)

O que é child theme?

Tema filho em tradução livre, um child theme é uma ponte entre o WordPress e o tema que você tem instalado.

Ao ativar um child theme, ele irá carregar tudo o que o tema pronto (nesse caso, o parent theme) tem, sem tirar nem por.

Aí fica a grande sacada: se você copiar, por exemplo, o single.php do parent theme para o child theme, e então fizer uma alteração no arquivo dentro do child theme, o WordPress irá carregar essa alteração.

Tudo que está no child theme é priorizado no lugar de o que está no parent theme. Quando há atualizações, apenas o parent theme é afetado. O child theme continuará como antes, e seu site também.

Como fazer e instalar um child theme?

O próprio site do WordPress explica direitinho como fazer um. E é muito fácil.

Você também pode baixar, mais abaixo, um modelo que criei para usar como exemplo por aqui.

De qualquer forma, criei também um passo-a-passo bem simples. Tudo que você precisa é do Bloco de Notas:

1. Crie a pasta para o child theme

O ideal é que a pasta leve o nome do theme parent com -chid no final. O nome do theme parent você encontra no arquivo style.css localizado na pasta do tema em questão. É o que aparece na linha após Template:.

Por exemplo, no Twenty Twenty, o nome que fica em Template: é twentytwenty. Então, a pasta do seu child theme deverá ser nomeada como twentytwenty-child. Irei utilizar esse exemplo no restante do passo-a-passo.

2. Crie uma folha de estilos

Dentro da pasta twentytwenty-child, crie um arquivo CSS com o nome style.css. Ele deverá conter algo como o código abaixo:

/*
Theme Name: WP Child Theme
Theme URI: https://github.com/fabiorlobo/wp-child-theme
Description: A child theme example
Author: Fabio Lobo
Author URI: https://www.fabiolobo.com.br
Version: 1.0.0
Template: parent_theme_name_here
*/

Apenas as linhas Theme Name: e Template: são obrigatórias.

A única coisa que você deve alterar é o que consta em Template:, que no exemplo está como parent_theme_name_here. Nesse caso, você deve usar exatamente o nome do parent theme: twentytwenty.

Se preferir, pode alterar o que consta em Theme Name: para algo de sua preferência. Por exemplo: Twenty Twenty Child.

3. Crie o arquivo de funções

Pra mágica funcionar, é preciso que o arquivo CSS do passo anterior seja carregado no tema. Para isso, ainda na pasta twentytwenty-child, crie um arquivo PHP com o nome functions.php.

Aqui um exemplo do código que você deverá salvar neste arquivo:

<?php

/* * * * * * * * * * * * * *
	CSS
* * * * * * * * * * * * * */

add_action( 'wp_enqueue_scripts', function() {
	$parent_style = 'parent-style';

	/* PARENT STYLE */
	wp_enqueue_style( $parent_style,
		get_template_directory_uri() . '/style.css'
		// ^ Be sure that '/style.css' is the right path & file!
	);

	/* CHILD STYLE */
	wp_enqueue_style( 'child-style',
		get_stylesheet_directory_uri() . '/style.css',
		array( $parent_style ),
		wp_get_theme()->get( 'Version' )
	);
} );

A princípio não vai ser necessário editar mais nada.

De maneira bem básica, seu child theme está pronto!

4. Faça o upload do child theme

Suba a pasta twentytwenty-child dentro da pasta wp-content/themes em sua instalação WordPress, junto com a pasta do parent theme – o twentytwenty.

A maneira mais fácil de fazer esse upload é criar um zip da pasta twentytwenty-child e então utilizar o próprio painel do WordPress para a instalação. Veja no vídeo abaixo como é simples:

O caminho no menu do WordPress é Aparência > Temas > Adicionar novo (botão ao lado do título da tela) > Enviar tema (botão ao lado do título da tela).

Depois disso, basta ativar o child theme e começar a fazer as implementações necessárias copiando o arquivo que você quer editar do parent theme para a pasta do child theme.

Modelo de child theme para download

Como você pode ver acima, é muito fácil criar um child theme. E pra facilitar ainda mais, criei um modelo que está disponível para download no meu Github.

O código é o mesmo do exemplo acima, com uma diferença: Pensando em algumas situações que listei aqui no post, adicionei duas áreas no functions.php onde é possível adicionar scripts (como o do já citado Google Analytics) no <head> e antes do </body>.

Todas as instruções de instalação estão na página do projeto, e também nesse post. Em suma, você só precisa fazer uma alteração pro child theme funcionar: inserir o nome do parent theme no style.css.

Espero que seja útil pra você:

Antes de disponibilizar o exemplo para download, o testei com alguns temas WordPress pra garantir que funcionaria bem e que seria fácil de usar:

  • Hello Elementor,
  • Rosebud (premium),
  • Storefront,
  • Twenty Nineteen,
  • Twenty Twenty,
  • Wpcast.

Se por algum motivo o meu modelo de child theme não funcionar para você, pode ser que seu parent theme tenha alguma configuração particular. Verifique a documentação do WordPress ou peça ajuda ao desenvolvedor do tema.

Posso alterar códigos do próprio WordPress ou de plugins?

Nem pensar. Isso é pior do que alterar códigos de um tema.

Os motivos são praticamente os mesmos, com uma diferença: tanto o WordPress quanto plugins recebem atualizações com muito mais frequência que um tema.

Aliás, há um arquivo do WordPress que pode ser editado, mas apenas com o que for extremamente necessário: o wp-config.php.

De resto, não tem por que alterar o core do WordPress. Tudo o que você precisar pode ser feito no functions.php do tema. Idem para plugins.

Alterei o código do meu tema WordPress. E agora?

Não entre em pânico!

A não ser que algo realmente grave aconteceu e você não tenha backups. Aí sim você pode entrar em pânico, mas essa emoção não irá resolver nada também.

Você se identifica com alguma das questões abaixo?

Como atualizar um tema sem perder as alterações?

Se você fez as alterações em um child theme, não vai perder nada. Atualize o parent theme e depois navegue no site para ver se vai ser preciso fazer algum ajuste no child theme.

Agora, se você alterou o parent theme, o certo a se fazer é criar um child theme e então copiar os arquivos alterados do parent theme para a pasta do child theme, e então ativá-lo.

Em seguida a atualização pode ser feita.

Como desfazer as alterações feitas em um tema?

Basta reinstalar o tema alterado no WordPress.

O ideal é que você primeiro apague o tema e depois o instale novamente, sem as alterações.

Como transferir as alterações para um child theme?

Basta copiar os arquivos alterados do parent theme para a pasta do child theme em sua instalação WordPress.

Mas atenção: o que consta no style.css e no functions.php do child theme criado deve ser mantido. Caso contrário, não irá funcionar, já que esses códigos são o que definem o que é o child theme e qual é o parent theme.

Você pode adicionar novos códigos nesses dois arquivos, só não pode remover o que inserimos neles inicialmente.

Atualizei o tema e meu site ficou quebrado. O que fazer?

Se o tema WordPress estava com alterações no código que não foram transferidas para o child theme, recupere um backup e então siga o que foi explicado no tópico acima.

Se já havia sido tudo transferido para o child theme e você tem certeza de que nada foi esquecido, certamente o parent theme recebeu uma atualização grande com alterações na estrutura do código.

Sendo assim, você deve comparar os arquivos do child theme com os do parent theme e fazer as modificações necessárias.

Como corrigir bugs de temas prontos após atualizações?

Se o tema do seu site ficou quebrado após receber uma atualização, você deve verificar se a causa é algum plugin do WordPress. Pode ser um problema de incompatibilidade, e aí você deverá trocar o plugin ou abrir um chamado com o desenvolvedor do tema reportando o ocorrido.

A forma mais fácil de descobrir se o site quebrou por causa de um plugin é desativar todos os plugins ativos de uma vez só em uma aba do navegador e manter o site aberto em outra.

Após a desativação, atualize seu site e veja se o bug persiste. Caso não persista, reative um dos plugins e atualize novamente. Faça isso até que o bug volte a aparecer, e aí você saberá qual é o plugin culpado.

Ah, certifique-se também que seu WordPress está atualizado e é compatível com o tema em questão.

Agora, se não for alguma incompatibilidade com um plugin ou com a versão do WordPress, certamente ocorreu uma das duas situações ilustradas no tópico acima. Siga as recomendações listadas por lá.

Se não for nada disso, pode ser que a atualização do tema simplesmente veio com um bug de presente. Tente refazer a instalação pra ver se algo muda. Se não mudar, recupere um backup da versão anterior e aguarde sair uma nova atualização com a correção.

Como inserir scritps, html ou css em um tema pronto?

Edite os arquivos do child theme com os códigos que você precisar em seu site WordPress.

Se quiser inserir um script do Google Analytics em seu site, por exemplo, você pode utilizar meu modelo de child theme e inserir o código diretamente no <head> ou antes do </body> onde é indicado no functions.php.

Posso copiar o parent theme inteiro para o child theme?

Não faz sentido, porque aí não vai fazer diferença atualizar o parent theme. Afinal, o que vai ser considerado pelo WordPress é o que está no child theme.

Então, se o parent theme é atualizado mas o child theme tem todos os códigos antigos, a atualização não surtirá efeito.

ilustração logo do WordPress como um vidro estilhaçado
WordPress quebrado: um verdadeiro pesadelo. Mas há salvação!

Precisa de um tema personalizado para seu negócio?

Um template pronto nem sempre é a solução ideal para seu negócio.

Primeiro que certamente o tema pronto é muito mais pesado que um feito na medida. Principalmente os que precisam de um construtor de página (page builder).

Segundo que, mesmo com todas as opções de personalizações que o painel do tema oferece, pode ser que fique faltando alguma coisa em seu site.

Fora o aspecto de visual genérico que seu projeto acaba tendo ao utilizar um tema pronto. Afinal, por ser algo pronto, o design do seu site não seguirá os padrões da identidade visual do seu negócio.

É aí que eu entro. Trabalho com a criação e desenvolvimento de temas personalizados para WordPress. Você pode conhecer todo o meu processo de trabalho clicando no link.

Vamos conversar?

Créditos das imagens: WordPress e Freepik. Artes criadas por mim.

Não é permitida a reprodução integral desse conteúdo. A cópia pode ser ruim para você!

Quem é Fabio Lobo?

Web designer, desenvolvedor front-end e programador WordPress.

Quem é Fabio Lobo?

Estou há mais de uma década na área. O foco do meu trabalho é em usabilidade, facilidade pro usuário, acessibilidade, SEO e performance.

Também tenho alguns projetos open source, além de prestar consultoria em hospedagem WordPress e criação de conteúdo.

Como posso te ajudar hoje?

Trabalho com consultoria, suporte, manutenção, criação e desenvolvimento.

Fale comigo

Leia também...

...alguns textos que têm a ver com o assunto:

GDPR e LGPD: o que você precisa saber sobre proteção de dados

Saiba o que você deve mudar em seu site, blog, loja virtual ou app caso colete dados de visitantes. Evite multas: fique de acordo com a lei e proteja a privacidade!

As melhores (e piores) hospedagens para WordPress

Procurando uma hospedagem para seu projeto com WordPress? Veja algumas indicações e também cuidados que você deve tomar!

Manual do WordPress – Conteúdo

Adquiriu um site ou blog em WordPress recentemente? Saiba como atualizar seu conteúdo com este manual do WordPress – é muito fácil!

Comentários

2 comentários até o momento

  • Como eu queria ter visto essas dicas antes de atualizar o tema do meu site que passei horas alterando =///

    Agora so me resta torcer para que a hospedagem tenha back ups

    Responder
    • Se precisar de auxílio me dê um toque!

      Responder

Deixe seu comentário

Se você deseja um orçamento, entre em contato clicando aqui.

Quero um orçamento