Se você instalou um tema do WordPress, mas ele não é adequado para você, você pode estar se sentindo frustrado. Há uma abundância de opções disponíveis para você personalizar seus temas WordPress.
O desafio é encontrar a forma correta de o fazer.
Neste post, vou guiá-lo através das opções para personalizar o seu tema WordPress, ajudar a decidir qual é o certo para você e mostrar-lhe como fazê-lo de forma segura e eficiente.
Prefere assistir à versão em vídeo?
Opções para o Customizing de um Tema
Antes de mergulharmos e começarmos a fazer alterações ao seu tema, vale a pena compreender quais são as opções, uma vez que se adequam a diferentes situações.
Aqui está uma visão geral das opções disponíveis para você:
Se você quiser adicionar funcionalidade ao seu tema, instale um plugin.
- Use o Customizer em suas telas de administração do WordPress para personalizar fontes, cores e talvez layout também, dependendo do seu tema.
- Se você estiver trabalhando com um tema de construtor de páginas, use seus recursos para personalizar o design do seu site.
- Se você instalou um tema de estrutura, use um dos temas filhos disponíveis para personalizar seu site, juntamente com quaisquer opções de personalização viáveis próprias das telas de administração.
- Se o tema for específico do seu site e você se sentir confortável em fazê-lo, edite o código do tema diretamente.
- Se você quiser editar o código de um tema de terceiros, crie um tema filho.
Se quiser editar o código, tem várias opções à sua disposição, desde a utilização do block editor até ao Customizer, passando pela edição dos ficheiros. Vamos olhar para todos eles neste post, mas vamos começar com a opção mais simples: instalar um plugin.
Você Realmente Precisa Personalizar Seu Tema?
Às vezes você não precisa personalizar seu tema: em vez disso, você precisa instalar um plugin.
Os temas ditam o design do seu site: o seu aspecto e a forma como apresenta o conteúdo (use nossa ferramenta de detecção de temas para identificar o tema subjacente para um projeto que você gosta). Os plugins adicionam funcionalidade extra.
Se as mudanças que você quer fazer estão focadas na funcionalidade e não no design, considere instalar um plugin você mesmo. Este pode ser um plugin que você precisa escrever, um que você baixar do diretório de plugin, ou um que você comprar.
Se quiser editar o ficheiro functions.php no seu tema, pergunte a si próprio:
Eu gostaria de manter essa funcionalidade se eu mudasse de tema no futuro?
Se a resposta for sim, esse código deve ir em um plugin, não o seu tema.
Bons exemplos do que você usaria um plugin em vez de um tema, incluindo adicionar widgets, registrar tipos de posts personalizados e taxonomias, criar campos personalizados e adicionar recursos extras como uma loja ou melhorias de SEO.
Personalização do Tema do WordPress Através das Telas de Administração do WordPress
Se as mudanças que você quer fazer são focadas no design e relativamente simples, você pode ser capaz de fazê-las através das telas de administração. O Customizer dá-lhe uma variedade de opções para ajustar o seu tema: o que está disponível para si dependerá do seu tema. E você pode ver algo chamado Editor no menu Aparência. Afasta-te disto, por razões que descreverei em breve.
Personalização do Tema Através do Personalizador
A maneira mais fácil de personalizar seu tema do WordPress é usando o WordPress Customizer.
Você acessa isso de uma de duas maneiras:
- Ao visualizar seu site (quando você estiver conectado), clique no link Personalizar na barra de administração na parte superior da tela.
- Nas telas de administração, clique em Aparência > Personalizar.
Isto leva-o ao Customizer.
Na captura de tela acima, eu instalei um tema livre chamado ColorMag que tem muitas opções de personalização. São adicionadas seções ao Customizer para recursos de design, incluindo uma imagem de cabeçalho, mídia social, cores de categoria e uma guia Opções de design que o leva a ainda mais guias onde você pode fazer alterações no layout e no design do seu site.
Temas diferentes têm diferentes opções de personalização, mas temas mais recentes parecem estar adicionando mais e mais deles o tempo todo. Se você encontrar um tema que você gosta, mas que não é muito certo para você, você pode achar que personalizá-lo lhe dá exatamente o design e layout que você precisa.
O Editor de Temas (e Por Que Não Usá-lo)
Em suas telas de administração, você pode notar uma opção chamada Editor de Temas, que você acessa através de Aparência > Editor de Temas.
Isto dá-lhe acesso aos ficheiros no seu tema, o que significa que pode editá-los diretamente.
Não o faças.
Mesmo que você se sinta confortável escrevendo CSS ou PHP, editar os arquivos em seu tema como este é uma idéia muito ruim, por duas razões:
- Se você comprou ou baixou um tema de terceiros, quaisquer alterações que você fizer serão perdidas na próxima vez que você atualizar o tema (e você deve manter seu tema atualizado por motivos de segurança).
- Mais importante ainda, se você fizer uma alteração que quebre seu site, ela não será rastreada e a versão anterior do arquivo não será alterada. Podes irremediavelmente destruir o local.
Se você quiser editar o código em seu tema, você deve fazê-lo usando um editor de código (confira os melhores editores HTML gratuitos), e você não deve editar os arquivos em seu site ao vivo até que você o tenha testado em um site de testes do WordPress. Se você precisar editar um tema de terceiros, você deve fazê-lo através de um tema filho. Mais sobre os dois mais tarde neste post.
O WordPress sabe como é inseguro usar o editor de temas: ele até lhe dá um aviso quando você tenta acessá-lo.
So take WordPress’s advice: don’t use the theme editor!
Usando Construtores de Páginas e Plataformas para Personalizar Seu Tema WordPress
Uma grande parte dos temas do WordPress tem opções de personalização, o que significa que você pode fazer alterações no design e no layout através do Customizer.
Mas alguns temas levam isso mais longe e são projetados para serem estendidos e significativamente personalizados. Esses temas são chamados de quadros temáticos.
Outra opção é usar um plugin que permite que você crie seu site usando uma interface amigável: esses são chamados de construtores de páginas.
Usando um Criador de Páginas para Personalizar Seu Tema
Os plugins do Page Builder são projetados para facilitar a configuração do design do seu site, usando uma interface que permite que você veja o que está recebendo.
Você instala um plugin de construtor de páginas com um tema compatível, e então usa as opções que ele lhe dá para projetar seu site exatamente da maneira que você quer.
Um dos construtores de páginas mais conhecidos é a Elementor, mas pode descobrir algumas alternativas no nosso conjunto de construtores de páginas.
Os construtores de páginas permitem que você edite suas postagens e páginas com uma interface de arrastar e soltar, o que significa que você pode ver como seu conteúdo vai parecer e pode tornar cada página única.
Abaixo, eu estou usando o construtor de página Elementor com o tema Hello Elementor, que é compatível com ele.
Os construtores de páginas dão-lhe muita flexibilidade com o layout e design das suas páginas. Se você estiver acostumado com um construtor de sites como o Wix, eles podem ajudar a facilitar a transição para o WordPress. E se você preferir uma interface WYSIWYG para o seu conteúdo WordPress, eles podem ajudá-lo a projetar suas páginas rapidamente.
Usando uma Estrutura Temática para Personalizar Seu Tema
Uma alternativa aos construtores de páginas são os frameworks temáticos. São conjuntos de temas concebidos para trabalhar em conjunto. Há um tema pai que é a estrutura, e uma escolha de temas filhos que você pode usar para personalizar o tema principal e fazer com que ele pareça o que você quer.
Um exemplo de estruturas temáticas é o Divi, que tem opções de personalização que permitem ajustar ainda mais o design do seu tema infantil, incluindo uma interface de arrastar e soltar semelhante à dos construtores de páginas.
Leitura recomendada: Divi vs Elementor: Comparação dos Plugins do WordPress Page Builder
Editando o Código do Seu Tema WordPress
Se você se sentir confortável editando CSS e/ou PHP, então você pode editar o código em seu tema para personalizar seu tema.
Isto dá-lhe o maior grau de controlo.
Se estiveres a editar o teu próprio tema, que é específico do teu site e foi desenvolvido especialmente para ele, então podes fazer edições ao tema diretamente. Mas se você estiver trabalhando com um tema de terceiros e quiser editá-lo, você deve criar um tema filho para evitar perder suas alterações na próxima vez que você atualizar o tema.
Editando Arquivos de Tema
O primeiro passo para editar o seu tema WordPress é entender quais arquivos de temas controlam o quê e quais você precisa editar.
A Folha de Estilo
Cada tema do WordPress tem uma folha de estilo, chamada style.css. Ele contém todo o código para estilizar o seu site: layout, fontes, cores e muito mais.
Se você quiser alterar as cores do tema, por exemplo, você faria edições na folha de estilo. Se você quiser adicionar uma nova fonte, use a folha de estilo para aplicá-la a diferentes elementos, como o corpo do texto e os cabeçalhos.
Preste atenção ao editar a folha de estilo: especificidade significa que o código de um elemento não está sempre vindo de onde você acha que ele está. Os elementos herdarão o estilo de outros elementos que estão acima deles na hierarquia da página, a menos que você adicione um estilo específico para o elemento inferior.
Para descobrir o que o CSS está afetando quais elementos na página, você pode usar o inspetor do seu navegador para visualizar o CSS (Chrome DevTools neste exemplo):
Você pode usar isso para escrever novos CSS que direcionam elementos individuais ou um intervalo de elementos ou classes na página.
Se toda essa conversa sobre elementos, classes e especificidade é nova para você, você pode querer evitar editar diretamente o CSS do seu tema. Pelo menos até aprenderes mais sobre CSS e como funciona.
O File de Funções
Outro arquivo que praticamente todos os temas terão é o arquivo de funções (functions.php). Este é o ficheiro que faz com que um monte de coisas funcionem no teu tema. Dentro dele, você pode encontrar código para registrar recursos de temas como imagens em destaque, widgets e muito mais.
Se você estiver tentado a adicionar código funcional ao seu tema, é aqui que você o adicionará. Mas cuidado: na maioria dos casos, você deveria estar escrevendo um plugin. Pergunte a si mesmo:
Eu gostaria de manter essa funcionalidade se eu mudasse de tema no futuro?
Se a resposta for sim, escreva um plugin em vez de adicionar código ao arquivo de funções. Os plugins não precisam ser grandes: não há nada que impeça você de criar um para algumas linhas de código.
O arquivo de funções é todo escrito em PHP, então você precisa estar familiarizado com isso. Não copie cegamente o código que encontrar através de uma pesquisa do Google: reserve algum tempo para descobrir o que esse código faz e para o compreender. Dessa forma, é menos provável que você adicione código que não é tão bom quanto deveria ser.
Os Arquivos de Tema Modelos de Tema
A maioria dos ficheiros num tema são ficheiros de modelos de temas. Estes são arquivos que determinam o conteúdo que o WordPress produz em uma determinada página e são selecionados de acordo com a hierarquia de modelos.
Se você quiser alterar a forma como o conteúdo é gerado em um determinado tipo de mensagem, página ou arquivo, você precisará editar um desses arquivos ou criar um novo.
Por exemplo, digamos que seu tema tenha um arquivo archive.php que está sendo usado para gerar páginas de arquivo para categorias e tags. Você deseja fazer alterações na forma como as tags são impressas. Então você cria um arquivo chamado “tag.php”, que seria baseado em archive.php com seus ajustes.
Novamente, tenha cuidado na edição dos arquivos: eles podem quebrar o seu site. Sempre teste em uma instalação local usando uma ferramenta como DevKinsta e/ou um site de teste WordPress primeiro.
Qualquer um desses tipos de arquivo que você precise editar, você deve fazê-lo corretamente. Leia a seção abaixo sobre as melhores práticas para descobrir como editar seu código de uma forma que não quebre seu site e não cause problemas de segurança.
Customizing de um Tema de Terceiros Com um Tema Infantil
Se o tema em execução no seu site for de um terceiro e você quiser editar o código, será necessário criar um tema infantil.
Isto porque se você editar o tema diretamente e depois atualizá-lo (o que você deve fazer), você perderá todas as alterações que você fez.
A criação de um tema filho consiste em quatro etapas:
- Crie uma nova pasta em wp-content/themes.
- Nessa pasta, crie uma folha de estilo. Nessa folha de estilo, diga ao WordPress que este é um tema infantil do seu tema existente.
- Adicione cópias dos arquivos que você deseja editar ao tema filho e edite-os lá.
- Ative o tema filho no seu site.
O WordPress sempre usará um arquivo do tema filho para gerar conteúdo, a menos que haja um arquivo superior na hierarquia do tema pai. Se houver duas versões do mesmo arquivo, ele usará a do tema filho. Isso significa que seu novo arquivo no tema filho substituirá o do tema pai.
Melhores Práticas para o Customizing de Temas do WordPress
Então estás a planear personalizar o teu tema. Antes de prosseguir e fazer as alterações, siga estas dicas para garantir que você está fazendo isso com segurança e que não vai quebrar seu site, torná-lo vulnerável a ataques ou perder seu código.
Se Possível, Personalize sem Editar Código
Se você pode fazer suas personalizações através do Customizer ou em outro lugar nas telas de administração, isso é mais seguro do que editar o código.
Somente edite o código se você estiver familiarizado com CSS (para a folha de estilo) e PHP (para outros arquivos de tema) e souber como fazê-lo com segurança.
Use um Site de Teste Local para Fazer Suas Alterações
Se você estiver editando o código em seu tema ou criando um tema filho para fazer alterações, você deve fazer o trabalho de desenvolvimento em uma instalação local do WordPress com seu tema instalado e seu conteúdo copiado de seu site ao vivo.
Desta forma, você tem um espelho de seu site ao vivo para testar suas mudanças. Trabalhar em um site local não terá nenhum efeito em seu site ao vivo e pode ser mais rápido.
Mesmo que você esteja usando o Customizer, pode ser útil usar uma versão local do seu site para testes, pois você pode publicar suas alterações e testá-las sem afetar o site ao vivo.
Depois de ter testado as alterações ao seu tema, pode enviá-lo para o seu site ao vivo ou, melhor ainda, pode testá-lo num site de teste e depois movê-lo para produção (ao vivo).
Usar Controle de Versão
Quando você estiver fazendo alterações em seu tema, você deve usar o controle de versão para rastrear suas alterações.
Na sua forma mais simples, isto significa alterar o número da versão do tema e manter cópias de ambas as versões. Mas se o seu gong para fazer o controle de versão corretamente, você precisa usar um serviço como o GitHub para rastrear suas mudanças.
Desta forma, se uma alteração causar problemas, você pode facilmente revertê-la sem ter que fazer edições manuais.
O controle de versão é ainda mais útil se você estiver trabalhando como parte de uma equipe, já que você poderá ver o que outros membros estão fazendo. Não se esqueça de ler o nosso guia git vs Github.
Use um Local de Preparação para Testar Suas Alterações
Se você tem acesso a um site de teste (como o ambiente de teste gratuito da Kinsta que vem com todos os planos), testar isso antes de ativar a nova versão do seu tema (ou o novo tema infantil) em seu site ao vivo é a maneira mais segura de proceder.
Isto porque qualquer site local terá algumas diferenças em relação ao seu site real: ele está em um servidor diferente (um criado em sua máquina local), ele pode estar rodando uma versão diferente do PHP ou qualquer uma das outras ferramentas que rodam seu site.
Faça uma cópia do seu site ao vivo no seu servidor de preparação e, em seguida, carregue e ative o seu novo tema. Teste seu site completamente para ter certeza de que tudo funciona, e então você pode empurrar suas mudanças para o seu site ao vivo.
Faça com que o Seu Tema Responda
Quaisquer alterações que você precise fazer ao seu tema devem funcionar tanto no celular quanto no desktop.
Com cada vez mais pessoas a aceder à Internet através do telemóvel e do índice Mobile-first do Google, é provavelmente mais importante agora que o seu tema funcione no telemóvel do que no computador. Portanto, quaisquer mudanças que você faça no seu tema precisam ser amigáveis para dispositivos móveis ou, de preferência, móveis primeiro, quando relevante.
Isto aplica-se principalmente a quaisquer alterações que fizer ao seu estilo ou layout: verifique se o novo layout funciona no telemóvel e se adicionou consultas multimédia para que o layout se ajuste a diferentes tamanhos de ecrã.
Se o seu tema não for responsivo, ele terá um impacto negativo nas classificações e nas taxas de conversão do seu mecanismo de pesquisa.
Se você não tem acesso a muitos dispositivos móveis diferentes para testar, você pode usar uma ferramenta como o BrowserStack para ver como seu site fica em dispositivos diferentes. Você também pode usar as ferramentas Developer em seu navegador e as exibições responsivas no Customizer.
Certifique-se de Suas Personalizações Não ter Impacto Sobre a Acessibilidade
Quaisquer alterações ao seu tema também precisam ser acessíveis para usuários com deficiência ou deficiências sensoriais.
Não se trata apenas de garantir que seu site funcione em leitores de tela: outras considerações como esquemas de cores e tamanhos de fontes são importantes para um grande número de pessoas.
Se as alterações que estás a fazer ao teu tema são para tornar as cores mais brilhantes ou o texto mais pequeno, pensa novamente: isto pode tornar difícil para as pessoas ler ou interagir com o teu site.
Antes de fazer qualquer mudança ao vivo, use um verificador de acessibilidade para testar seu site e certifique-se de que ele não está excluindo pessoas.
Siga as Normas de Codificação do WordPress
Se você estiver editando o código em seu tema ou criando um tema filho, certifique-se de que seu código esteja alinhado com os padrões de codificação do WordPress.
Esses padrões existem para garantir a consistência e a qualidade do código e para evitar que o código seja uma bagunça. Existem padrões para PHP, CSS e JavaScript, por isso reserve algum tempo para verificar aqueles que são relevantes para si e certifique-se de que os segue.
Se o seu tema WordPress existente estiver bem codificado e você escrever qualquer novo código de uma forma que seja consistente com isso, você está no caminho certo para garantir que seu código esteja em conformidade. Certifique-se de que adiciona comentários a quaisquer alterações que faça ao tema para que você ou outros saibam o que fez quando voltar a trabalhar no código no futuro. Você pode pensar que não vai esquecer, mas depois de alguns meses, é surpreendentemente fácil esquecer porque você editou uma linha de código.
Resumo
Personalizar o seu tema WordPress não é assim tão difícil. Às vezes é um caso simples de usar o Customizer para fazer mudanças nas fontes, cores ou em seu favicon (certifique-se de ler nosso guia detalhado sobre fontes do WordPress). Outras vezes, você precisa criar um novo tema filho para adicionar um novo arquivo de modelo a um tema.
As opções que você tem para personalizar seu tema incluem usar um plugin ou o Customizer, editar o código do tema WordPress diretamente ou criar um tema filho.
Identifique a opção certa para você e faça suas personalizações com segurança, tudo sem quebrar seu site.
Rachel McCollin tem ajudado pessoas a construir sites com WordPress desde 2010. Ela é uma grande fã do WordPress auto-hospedado e quer ajudar o máximo de pessoas possível a criar um site incrível com ele.
Deixe um comentário