Como personalizar seu tema WordPress (5 maneiras passo a passo)

Se você instalou um tema WordPress, mas não é muito adequado para você, pode estar se sentindo frustrado. Existem muitas opções disponíveis para você personalizar seus temas WordPress.

O desafio é encontrar a maneira certa de fazer isso.

Neste post, vou orientá-lo no opções para personalizar seu tema WordPress, ajudam a decidir qual é o certo para você e mostram como fazer isso com segurança e eficiência.

Prefere assistir a nossa versão em vídeo? Clique em reproduzir abaixo:

Opções para personalizar um tema

Antes de mergulharmos e começarmos a fazer alterações em seu tema, vale a pena entender quais são as opções, já que elas se adaptam a diferentes situações.

Esta é uma visão geral das opções disponíveis para você:

• Se quiser adicionar funcionalidade ao seu tema, instale um plug-in.
• Use o Personalizador nas 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, junto com quaisquer opções de personalização viáveis nas telas de administração.
• Se o seu tema for específico para o seu site e você se sentir confortável com isso, edite o código do tema diretamente.
• Se quiser editar o código de um tema de terceiros, crie um tema filho.

Se você deseja editar o código , você tem uma série de opções disponíveis para você, desde usar o editor de blocos até o Customizador, até a edição dos arquivos. Veremos 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 Não é necessário personalizar o seu tema: em vez disso, você precisa instalar um plug-in.

Os temas ditam o design do seu site: a aparência e a exibição do conteúdo. Plug-ins adicionam funcionalidade extra.

Se as mudanças que você deseja fazer estão focadas na funcionalidade ao invés do design, considere instalar um plug-in você mesmo. Pode ser um plug-in que você precisa escrever, um que você baixa do diretório de plug-ins ou um que você compra.

Se quiser editar o arquivo functions.php em seu tema, pergunte-se:

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 plug-in, não em seu tema.

Bons exemplos de como você usaria um plug-in em vez de um tema, incluindo a adição de widgets, o registro de tipos de postagem personalizados e taxonomias , criando campos personalizados e adicionando recursos extras, como uma loja ou aprimoramentos de SEO.

Personalizando seu tema WordPress por meio das telas de administração do WordPress

Se as alterações que você deseja fazer têm foco no design e relativamente simples, você pode fazê-los por meio das telas de administrador. O Customizer oferece uma variedade de opções para ajustar seu tema: o que está disponível para você dependerá do seu tema. E você pode ver algo chamado Editor no menu Aparência. Evite isso, por razões que descreverei em breve.

Personalizando seu tema por meio do personalizador

A maneira mais fácil de personalizar seu tema WordPress é usando o personalizador WordPress.

Você acessa isso de uma das duas maneiras:

• Ao visualizar o seu site (quando estiver conectado), clique no link Personalizar na barra de administração na parte superior da tela.
• Nas telas do administrador, clique em Aparência > Personalizar.

Isso leva você ao personalizador.

Na captura de tela acima, eu instalou um tema gratuito chamado ColorMag que tem muitas opções de personalização. Foram adicionadas seções ao Customizador 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 design do seu site. >

Temas diferentes têm opções de personalização diferentes, mas os temas mais recentes parecem adicionar mais e mais deles o tempo todo. Se você encontrar um tema de que goste, mas não for muito adequado para você, poderá descobrir que personalizá-lo oferece exatamente o design e o layout de que você precisa.

O Editor de temas (e por que não usar it)

Nas telas do administrador, você pode notar uma opção chamada Editor de temas, que pode ser acessada via Aparência > Editor de temas.

Isso dá acesso aos arquivos em seu tema , o que significa que você pode editá-los diretamente.

Não faça isso.

Mesmo se você se sentir confortável escrevendo CSS ou PHP, editar os arquivos em seu tema dessa forma é uma ideia muito ruim, por dois motivos:

• Se você comprou ou baixou um tema de terceiros, todas as alterações feitas serão perdidas na próxima vez que você atualizar o tema (e você deve mantê-lo atualizado por motivos de segurança).
• Mais importante, se você fizer um mudança que quebra seu site, ele não será rastreado e a versão anterior do arquivo não será alterada. Você pode quebrar o site irrevogavelmente.

Se quiser editar o código em seu tema, você deve fazer isso usando um editor de código (verifique os melhores editores de HTML gratuitos), e você não deve Não edite os arquivos em seu site ativo antes de testá-lo em um site de teste. Se você precisar editar um tema de terceiros, deverá fazê-lo por meio de um tema filho. Mais sobre ambos mais tarde neste post.

O WordPress sabe como é inseguro usar o editor de temas: ele até avisa quando você tenta acessá-lo.

Portanto, siga o conselho do WordPress: não use o editor de temas!

Usando construtores de páginas e frameworks para personalizar seu tema WordPress

Uma grande proporção de temas WordPress tem opções de personalização, o que significa que você pode fazer alterações no design e layout por meio de o personalizador.

Mas alguns temas vão além e são projetados para serem estendidos e significativamente personalizados. Esses temas são chamados de frameworks de tema.

Outra opção é usar um plug-in que permite projetar seu site usando uma interface amigável: são chamados de construtores de páginas.

Usando uma página Construtor para personalizar seu tema

Os plug-ins do Construtor de páginas são projetados para facilitar a configuração do design do seu site, usando uma interface que permite ver o que está obtendo.

Você instala um plug-in de construtor de páginas com um tema compatível e, em seguida, usa as opções que ele oferece para projetar seu site exatamente da maneira que você deseja.

Um dos construtores de páginas mais conhecidos é o Elementor, mas você pode descobrir algumas alternativas em nosso resumo 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 a aparência do seu conteúdo e pode tornar cada página diferente.

Abaixo, estou usando o criador de páginas Elementor com o tema Hello Elementor, que é compatível com ele.

Os construtores de páginas oferecem muita flexibilidade com o layout e design de suas páginas. Se você está 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 seu conteúdo WordPress, eles podem ajudá-lo a projetar suas páginas rapidamente.

Usando uma estrutura de tema para personalizar seu tema

Uma alternativa aos criadores de páginas é o tema frameworks. Estes são conjuntos de temas projetados para funcionarem juntos. Há um tema pai que é a estrutura e uma escolha de temas filhos que você pode usar para personalizar o tema principal e torná-lo da maneira que você deseja.

Um exemplo de estruturas de tema é Divi, que tem opções de personalização que permitem ajustar o design de seu tema filho ainda mais, incluindo uma interface de arrastar e soltar semelhante às dos criadores de páginas.

Editando o código do seu tema WordPress

Se você se sentir à vontade para editar CSS e / ou PHP, poderá edite o código em seu tema para personalizá-lo.

Isso fornece o maior grau de controle.

Se você estiver editando seu próprio tema, que é específico para seu site e foi desenvolvido especialmente para ele, então você pode fazer edições no tema diretamente. Mas se você estiver trabalhando com um tema de terceiros e quiser editá-lo, deve criar um tema filho para evitar perder suas alterações na próxima vez que atualizar o tema.

Editando arquivos do tema

A primeira etapa para editar seu tema WordPress é entender quais arquivos de tema controlam o quê e quais você precisará editar.

A folha de estilo

Cada tema WordPress tem um 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 seu tema, por exemplo, você deve fazer edições na folha de estilo. Se quiser adicionar uma nova fonte, você deve usar a folha de estilo para aplicá-la a diferentes elementos, como o corpo do texto e os títulos.

Preste atenção ao editar a folha de estilo: a especificidade significa que o código de um elemento nem sempre vem de onde você acho que é.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 ao elemento inferior.

Para descobrir qual CSS está afetando quais elementos na página, você pode use o inspetor em seu navegador para visualizar o CSS (Chrome DevTools neste exemplo):

Você pode então usar isso para escrever um novo CSS que vise elementos individuais ou uma variedade de elementos ou classes na página.

Se toda essa conversa sobre elementos, classes e especificidade é nova para você, convém evitar a edição direta do CSS do seu tema. Pelo menos até você aprender mais sobre CSS e como ele funciona.

O arquivo de funções

Outro arquivo que praticamente todo tema terá é o arquivo de funções (functions.php) . Este é o arquivo que faz várias coisas funcionarem em seu tema. Dentro dele, você pode encontrar o código para registrar recursos do tema, 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 atenção: na maioria dos casos, você realmente deve estar escrevendo um plugin. Pergunte a si mesmo:

Eu gostaria de manter essa funcionalidade se eu mudar de tema no futuro?

Se a resposta for sim, escreva um plug-in em vez de adicionar código ao arquivo de funções. Plugins não precisam ser grandes: não há nada que o impeça 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 que. Não copie cegamente o código que você encontrar por meio de uma pesquisa do Google: reserve um tempo para descobrir o que esse código faz e para entendê-lo. Dessa forma, é menos provável que você adicione um código que não seja tão bom quanto deveria.

Os arquivos de modelo de tema

A maioria dos arquivos em um tema são arquivos de modelo de tema . Esses são arquivos que determinam qual conteúdo o WordPress produz em uma determinada página e são escolhidos de acordo com a hierarquia do modelo.

Se você deseja alterar a forma como o conteúdo é gerado em um determinado tipo de postagem, 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 archive para categorias e tags. Você deseja fazer alterações na forma como as tags são geradas. Então você cria um arquivo chamado “tag.php”, que seria baseado em archive.php com seus ajustes.

Novamente, tome cuidado ao editar os arquivos: eles podem quebrar seu site. Sempre teste em um local instalação usando uma ferramenta como DevKinsta e / ou site de teste primeiro.

Qualquer um desses tipos de arquivo que você precisa editar, você deve fazê-lo corretamente. Leia a seção abaixo sobre as práticas recomendadas para descobrir como editar seu código de uma forma que não corrompa o seu site e não cause problemas de segurança.

Personalizando um tema de terceiros com um tema filho

Se o tema, você executado em seu site é de um terceiro e você deseja editar o código, você precisará criar um tema filho.

Isso ocorre porque se você editar o tema diretamente e depois atualizá-lo ( o que você deveria), você perderá todas as alterações feitas.

A criação de um tema filho consiste em quatro etapas:

1. Crie uma nova pasta em wp-content / temas.
2. Nessa pasta, crie uma folha de estilo. Nessa folha de estilo, tel l WordPress que este é um tema filho do seu tema existente.
3. Adicione cópias dos arquivos que deseja editar ao tema filho e edite-os lá.
4. Ative o tema filho em seu site.

O WordPress sempre usará um arquivo do tema filho para gerar conteúdo, a menos que haja um arquivo mais alto 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.

Práticas recomendadas para personalizar temas do WordPress

Então, você está planejando personalizar seu tema. Antes de prosseguir e fazer as alterações, siga estas dicas para garantir que você esteja fazendo isso com segurança e que você não quebrará seu site, o tornará vulnerável a ataques ou perderá seu código.

Se possível , Personalize sem editar o código

Se você puder fazer suas personalizações por meio do personalizador ou em qualquer outro lugar nas telas de administração, isso é mais seguro do que editar o código.

Edite o código apenas se você quiser familiarizado com CSS (para a folha de estilo) e PHP (para outros arquivos de tema) e você sabe como fazer isso com segurança.

Use um site de desenvolvimento 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, deverá fazer o trabalho de desenvolvimento em um instalação local do WordPress com o seu tema instalado e seu conteúdo copiado do seu site ativo.

Dessa forma, você tem um espelho do seu site ativo para testar suas alterações. Trabalhar em um site local não afetará seu site ativo e pode ser mais rápido.

Mesmo se você estiver usando o personalizador, pode ser útil usar uma versão local de seu site para testar como você pode publicar suas alterações e testá-las sem afetar o site ativo.

Depois de testar as alterações em seu tema, você pode carregá-lo em seu site ativo ou, melhor ainda, pode testá-lo em um teste do site e coloque-o no ar.

Use controle de versão

Ao fazer alterações em seu tema, você deve usar o controle de versão para rastrear suas alterações.

Em sua forma mais simples, isso significa alterar o número da versão do tema e manter cópias de ambas as versões. Mas se o seu vai fazer o controle de versão corretamente, você precisa usar um serviço como o GitHub para rastrear suas alterações.

Dessa forma, se uma alteração causar problemas, você pode facilmente revertê-la sem ter que fazer o manual edições.

O controle de versão é ainda mais útil se você estiver trabalhando como parte de uma equipe, pois poderá ver o que os outros membros estão fazendo. Certifique-se de ler nosso guia git vs Github.

Use um site de teste para testar suas alterações

Se você tiver acesso a um site de teste (como o teste gratuito do Kinsta que vem com todos planos), testar isso antes de ativar a nova versão do seu tema (ou o novo tema filho) em seu site ao vivo é a maneira mais segura de prosseguir.

Isso ocorre porque qualquer site local terá algumas diferenças do seu site ativo: está em um servidor diferente (um criado em sua máquina local), ele pode estar executando uma versão diferente do PHP ou qualquer uma das outras ferramentas que executam o seu site.

Faça uma cópia do seu site ativo em seu servidor de teste e, em seguida, carregue e ative seu novo tema. Teste seu site completamente para ter certeza de que tudo funciona e, em seguida, você pode enviar suas alterações para seu site ativo.

Torne seu tema responsivo

Quaisquer alterações que você precise fazer em seu tema devem funcionam no celular e também no desktop.

Com cada vez mais pessoas acessando a internet pelo celular e o índice móvel do Google, provavelmente é mais importante agora que seu tema funcione no celular do que nele faz no desktop. Portanto, todas as alterações feitas em seu tema precisam ser compatíveis com dispositivos móveis ou, de preferência, primeiro para dispositivos móveis, quando for relevante.

Isso se aplicará principalmente a quaisquer alterações feitas em seu estilo ou layout: verifique se o novo layout funciona no celular e que você adicionou consultas de mídia para que o layout se ajuste a diferentes tamanhos de tela.

Se seu tema não for responsivo, terá um impacto negativo nas classificações do mecanismo de pesquisa e nas taxas de conversão.

Se você não tiver acesso a muitos dispositivos móveis diferentes para testar, pode usar uma ferramenta como o BrowserStack para ver a aparência do seu site em diferentes dispositivos. Você também pode usar as ferramentas do desenvolvedor em seu navegador e as visualizações responsivas no personalizador.

Certifique-se de que suas personalizações não afetem a acessibilidade

Quaisquer alterações em seu tema também precisam ser acessíveis para usuários com deficiências 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 fonte, são importantes para um grande número de pessoas.

Se as mudanças que você está criando para o seu tema é tornar as cores mais brilhantes ou o texto menor, pense novamente: isso pode dificultar a leitura ou a interação das pessoas com o seu site.

Antes de fazer qualquer alteração ao vivo, use um verificador de acessibilidade para testar seu site e certifique-se de que não está excluindo pessoas.

Siga os padrões de codificação do WordPress

Se você estiver editando o código em seu tema ou criando um chi tema ld, você deve certificar-se de que seu código está de acordo 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 evitar um código que seja uma bagunça. Existem padrões para PHP, CSS e JavaScript, então reserve um tempo para verificar aqueles que são relevantes para você e certifique-se de segui-los.

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 seja compatível. Certifique-se de adicionar comentários a todas as alterações feitas no tema para que você ou outras pessoas saibam o que você 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 por que editou uma linha de código.

Precisa personalizar seu tema #WordPress para torná-lo único? Há muitas opções! Escolha o caminho certo para você em nosso guia detalhado! 👚👔Clique para twittar

Resumo

Personalizar seu tema WordPress não é tão difícil. Às vezes, é um caso simples de usar o Customizador para fazer alterações nas fontes ou cores (certifique-se de ler nosso guia detalhado sobre as 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 o uso de um plugin ou o Customizador, editando o código do tema WordPress diretamente ou criando um tema filho.

Identifique a opção certa para você e faça suas personalizações com segurança, tudo sem quebrar seu site.