Articles

Como Personalizar as Cores de um Tema WordPress

Posto em Marketing, WordPress by WP Engine

Última atualização em 23 de dezembro, 2020

customize wordpress theme colors

customize wordpress theme colors

Uma das melhores partes do uso do WordPress é que você tem acesso a milhares de temas que você pode usar para personalizar o estilo do seu site. No entanto, às vezes você encontrará o tema perfeito, apenas para perceber que ele não possui um esquema de cores que você gosta.

Isso pode ser frustrante, mas não tem que descarrilar seus planos. Com um pouco de trabalho, você pode mudar as opções de cores do seu tema, e fazer seu site ficar do jeito que você quer.

Neste artigo, vamos explorar duas maneiras de personalizar as cores de um tema do WordPress, incluindo uma abordagem manual e um método plugin. Vamos começar!

Como mudar as cores do tema do WordPress

Nesta seção, vamos mostrar a você como mudar as cores do seu tema do WordPress da maneira manual. Para fazer isso, você vai querer usar um ‘tema criança’, para não perder nenhuma das mudanças que você fizer quando o tema ‘pai’ for atualizado.

E mais, configurar um tema criança é quase sempre uma idéia inteligente se você planeja fazer qualquer mudança personalizada no framework do seu site. Vamos falar sobre como fazer o trabalho.

Passo 1: Criar um Tema Criança

Um tema criança é uma cópia de um tema pai, que herda os mesmos estilos. Você pode fazer alterações em seu código sem afetar o tema pai, e elas não serão sobrescritas quando você precisar atualizar o tema. Esta abordagem permite que você edite o estilo do seu site com segurança, para que se você cometer algum erro, você possa reverter para o tema pai e começar de novo.

Quando se trata de criar um tema filho, há duas maneiras de você ir sobre ele. Primeiro, você pode seguir a abordagem manual, que abordamos neste artigo e podemos resumir em quatro passos:

  1. Conectar ao seu site via File Transfer Protocol (FTP), usando um cliente como FileZilla.
  2. Navigate à sua pasta de Temas do WordPress.
  3. Crie uma nova pasta para o seu tema filho.
  4. Configure um arquivo style.css para o seu tema filho.

No entanto, você pode optar por usar um plugin se você não estiver confortável editando arquivos do WordPress manualmente. Para este cenário, nós recomendamos o Configurador de Tema Infantil. Com este plugin, você pode gerar um tema criança e configurar suas configurações usando um menu simples.

Você está livre para usar o método que preferir, é claro. Quando seu tema criança estiver configurado, você pode ativá-lo e passar para o próximo passo.

Passo 2: Faça o login no WordPress e Abra o Personalizador

Antes de poder mudar as cores do seu tema WordPress, você precisará fazer o login no seu painel de controle. Uma vez lá, navegue até o Appearance >Guia Editor:

how to customize wordpress themes

how to customize wordpress themes

There, você encontrará um editor de texto simples que permite que você altere os arquivos de tema do seu filho. Tenha em mente que você também pode fazer isso usando FTP e seu editor de texto favorito, mas os resultados serão os mesmos de qualquer maneira.

Se você preferir pré-visualizar as mudanças que você faz ao vivo, você também pode editar as cores do seu tema usando o Personalizador do WordPress. Para fazer isso, navegue até a aba Appearance > Customize, e então abra a seção Additional CSS:

change wordpress theme colors

change wordpress theme colors

Em ambos os casos, você precisará usar Cascading Style Sheets (CSS) para alterar as cores do seu tema. É aí que entra nosso passo final.

Passo 3: Altere as cores do seu Tema WordPress

Este passo é bastante simples se você já estiver familiarizado com CSS. Cada elemento dentro do seu tema tem seu próprio nome ou ‘classe’, que você pode direcionar usando código CSS. Você precisará saber qual é a classe relevante, e então usar códigos de cores HEX para mudá-la.

Por exemplo, se você quiser mudar a cor de fundo do seu tema, você pode adicionar um trecho CSS como este ao seu tema filho (usando qualquer um dos métodos da última seção):

background-color: #XXXXXX;

A primeira parte desse código visa a classe correta para o elemento que você quer modificar. Depois só precisa de especificar a cor HEX que gostaria de usar. Uma vez terminado, não se esqueça de salvar as alterações na folha de estilo do seu tema.

Felizmente, já que você está usando um tema infantil, você pode experimentar livremente sem se preocupar em quebrar nada no seu site. Se você é novo no CSS, confira este guia sobre como identificar elementos dentro do seu site. Então, você pode brincar com códigos de cores HEX até encontrar uma combinação que você gosta.

Plugins que mudam as cores do tema do WordPress

Se você preferir usar plugins em vez de CSS, você ficará feliz em saber que existem várias opções que você pode usar para personalizar as cores do tema do WordPress. Vamos rever duas das nossas ferramentas favoritas.

Plugin 1: Child Theme Configurator

change font color in wordpress

change font color in wordpress

Child Theme Configurator é a nossa melhor escolha, porque ele permite que você crie um tema infantil e personalize seu esquema de cores. Isso significa que você pode pular muitos dos passos que cobrimos anteriormente, e começar a experimentar com paletas de cores muito mais rápido. Com este plugin, você será capaz de mudar as cores das fontes, tons de fundo e muito mais.

Plugin 2: Central Color Pallete

how to change wordpress color scheme

how to change wordpress color scheme

Como seu nome indica, a Central Color Pallete permite que você mude a paleta de cores do seu tema. Este plugin se integra bem com muitos temas e plugins populares, e permite que você pule o processo de usar o editor WordPress para escolher e trocar cores. Dois dos plugins da Paleta Central de Cores funciona perfeitamente com Beaver Builder e Elementor.

Atualize sua experiência digital do WordPress com o WP Engine

Independentemente do tema que você escolher, você precisará de um host web que lhe forneça a estabilidade e o desempenho que você precisará para rodar e personalizar o seu site. Com o WP Engine, você terá esses dois recursos e acesso a uma equipe de suporte estelar.

Se você é mais do tipo Faça Você Mesmo (DIY), nós também publicamos muitos tutoriais que você pode usar para solucionar problemas ou fazer alterações no seu site. Confira os nossos planos e experimente!