{"id":9160,"date":"2018-04-24T15:35:01","date_gmt":"2018-04-24T18:35:01","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=9160"},"modified":"2025-12-18T12:00:16","modified_gmt":"2025-12-18T15:00:16","slug":"adicionar-css-personalizado-wordpress","status":"publish","type":"post","link":"\/br\/tutoriais\/adicionar-css-personalizado-wordpress","title":{"rendered":"Como adicionar CSS personalizado ao WordPress (e como solucionar problemas)"},"content":{"rendered":"

O WordPress oferece uma série de opções de personalização em seus recursos e temas, mas talvez você queira ir além — e, para modificar seu site mais profundamente, é necessário usar códigos personalizados. Por exemplo, você pode adicionar código CSS personalizado para modificar o visual do seu site, incluindo cores e layouts.<\/p>

É exatamente para isso que estamos aqui: nos parágrafos abaixo, você aprenderá quatro métodos diferentes para adicionar CSS personalizado ao seu site WordPress usando ferramentas diversas. Para garantir que o processo não cause problemas no seu site, também falaremos sobre algumas falhas comuns que podem ocorrer ao usar CSS personalizado, bem como suas soluções. Vamos lá? <\/p>

\n\n\n\n\n\n\n<\/p>

O que é CSS?<\/strong><\/h2>

CSS significa folhas de estilo em cascata<\/strong><\/a> e é uma linguagem de marcação que modifica a aparência dos elementos HTML no seu site. Por exemplo, você pode alterar a cor, o espaçamento, a dimensão e o alinhamento de um texto para personalizar sua aparência.<\/p>

No WordPress, adicionar CSS personalizado permite que você substitua o código existente na folha de estilo do seu tema, que contém o estilo padrão para o design do seu site.<\/p>

Como adicionar CSS personalizado ao WordPress: 4 métodos<\/strong><\/h2>

Aqui estão quatro métodos para adicionar seu próprio CSS a um site WordPress. Como cada um deles usa diferentes ferramentas e possui níveis de dificuldade variados, escolha o método mais apropriado de acordo com suas necessidades e nível de habilidade com a linguagem de programação.<\/p>

Adicionando CSS personalizado usando o editor de blocos<\/strong><\/h3>

Se você está rodando o WordPress 5.9 <\/strong>ou superior, é possível adicionar código CSS personalizado usando o editor Gutenberg<\/strong><\/a>. Este método é relativamente simples, e nós indicamos se você estiver usando um tema baseado em blocos. Siga os passos abaixo:<\/p>

    \n
  1. Faça login no seu painel de administração do WordPress e navegue até Ferramentas <\/strong>→ Editor de Arquivos de Tema<\/strong>.<\/li>\n\n\n\n
  2. Na barra lateral Arquivos do Tema<\/strong>, selecione a folha de estilos style.css<\/strong>. <\/li>\n\n\n\n
  3. Adicione sua classe CSS personalizada na parte inferior do arquivo. Por exemplo, vamos adicionar uma color-class<\/strong>que mudará o texto no bloco de parágrafo para verde:<\/li>\n<\/ol>
    p.color-class {\n\n  color: green; \n\n}<\/pre>
      \n
    1. Clique em Atualizar arquivo<\/strong>.<\/li>\n<\/ol>
      \n
      \"css<\/figure><\/div>
      Agora, vamos aplicar o novo estilo CSS a um bloco de texto através do Editor do Site. Aqui estão os passos:<\/p>
        \n
      1. No seu painel do WordPress, vá até Posts <\/strong>→ Todos os posts<\/strong>.<\/li>\n\n\n\n
      2. Passe o mouse sobre o post que você deseja editar e clique em Editar.<\/strong><\/li>\n<\/ol>
        \n
        \"tela<\/figure><\/div>
          \n
        1. Clique no bloco que você deseja modificar. No nosso caso, é um parágrafo. <\/li>\n\n\n\n
        2. Vá até o menu de configurações do bloco<\/strong> na barra lateral → Avançado<\/strong> → Classe(s) CSS Adicional(is)<\/strong>. Se você não encontrar esse menu, clique no botão Configurações<\/strong> no canto superior direito, ao lado do ícone de três pontos.<\/li>\n<\/ol>
          \n
          \"adicionando<\/figure><\/div>
            \n
          1. Insira sua classe CSS e clique em Salvar<\/strong>.<\/li>\n<\/ol>
            É isso! Para aplicar várias classes CSS a um bloco, escreva-as separadas por um espaço. Para remover o estilo, basta remover o código do arquivo style.css<\/strong>.<\/p>
            Adicionando CSS personalizado ao WordPress usando um plugin<\/strong><\/h3>
            Você também pode adicionar CSS personalizado usando um plugin. Este método é mais indicado se você troca seu tema regularmente, pois ele permite que você reaplique seu código sem copiá-lo e colá-lo manualmente toda vez.<\/p>
            Existem vários plugins especializados nessa tarefa — como o WP Add Custom CSS ou o Simple Custom CSS and JS —, mas usaremos o WPCode<\/strong><\/a>, que é uma das opções mais populares e cheias de recursos. Siga os passos abaixo:<\/p>
              \n
            1. Instale o plugin<\/strong><\/a> indo ao seu painel de controle do WordPress → Plugins<\/strong> → Adicionar Novo Plugin<\/strong>.<\/li>\n\n\n\n
            2. Pesquise WPCode<\/strong> e clique em Instalar<\/strong>. Após o processo de configuração ser concluído, clique em Ativar<\/strong>.<\/li>\n\n\n\n
            3. Vá até a barra lateral → Snippets de código <\/strong>→ Adicionar snippet<\/strong> → Adicionar seu código personalizado<\/strong>.<\/li>\n<\/ol>
              \n
              \"adicionando<\/figure><\/div>
                \n
              1. No menu Tipo de Código<\/strong>, selecione Snippet CSS<\/strong>.<\/li>\n\n\n\n
              2. Dê um nome a seu novo snippet e escreva seu código no campo designado.<\/li>\n<\/ol>
                \n
                \"adicionando<\/figure><\/div>
                  \n
                1. Role para baixo para ajustar outras configurações, incluindo o método de inserção. Se você quer que o novo estilo seja aplicado a páginas específicas, escolha Shortcode<\/strong>. Caso contrário, escolha a opção de inserção automática <\/strong>. Clique em Salvar Snippet<\/strong>.<\/li>\n\n\n\n
                2. Retorne para a barra lateral do seu painel do WordPress → Snippets de Código<\/strong>.<\/li>\n\n\n\n
                3. Localize seu novo trecho e clique no interruptor na coluna Status <\/strong>para ativá-lo.<\/li>\n<\/ol>
                  É isso! O WPCode também oferece vários templates prontos que permitem inserir estilos adicionais sem escrever o código CSS do zero. Você pode acessá-los indo à barra lateral → Snippets de Código <\/strong>→ Biblioteca<\/strong>.<\/p>
                  \n\n\n
                  Importante! <\/strong>Mantenha sempre seu plugin atualizado para minimizar os riscos de segurança.<\/p><\/div>\n\n\n\n<\/p>
                  Adicionando CSS personalizado ao WordPress com um personalizador de tema<\/strong><\/h3>
                  Se você usa um tema clássico do WordPress, pode adicionar CSS personalizado usando o personalizador de tema integrado, introduzido no WordPress 4.7. Siga os passos abaixo:<\/p>
                    \n
                  1. Navegue até a barra lateral do seu painel do WordPress → Aparência<\/strong> → Personalizar<\/strong> . Se você não encontrar esse menu, edite o URL do seu site adicionando o trecho  \/customize.php<\/strong> após wp-admin<\/strong>. <\/li>\n\n\n\n
                  2. Clique em CSS Adicional<\/strong> na barra lateral.<\/li>\n<\/ol>
                    \n
                    \"personalizador<\/figure><\/div>
                      \n
                    1. Escreva seu código CSS personalizado e clique em Publicar <\/strong>para salvar as alterações. <\/li>\n<\/ol>
                      Ao contrário do editor de temas em bloco, você não pode adicionar uma classe CSS a um bloco específico clicando nele. Para modificar um elemento específico, você deve escrever a tag HTML em seu código e aplicar o estilo.<\/p>
                      Por exemplo, para alterar a cor do corpo do texto para verde, selecione a tag <p><\/strong> e adicione o estilo de cor, como no exemplo abaixo:<\/p>
                      p {\n\n   color: green;\n\n}<\/pre>
                      Você pode verificar a tag HTML do conteúdo do seu site editando uma página e alternando para o editor de código. Leia nosso guia do editor de texto WordPress<\/a><\/strong> para aprender mais sobre o processo.<\/p>
                      Adicionando CSS personalizado do WordPress usando um tema filho<\/strong><\/h3>
                      Um tema filho<\/strong> (child theme<\/em>) é um derivado de outro tema com a mesma aparência, mas com arquivos diferentes. Ele permite que você adicione CSS personalizado sem modificar o código do tema pai, permitindo que você reverta facilmente as alterações caso necessário.<\/p>
                      Usar um tema filho também garante que seu código personalizado permanecerá inalterado após uma atualização, preservando suas modificações. Isso é importante porque, ao atualizar um tema, os arquivos existentes são sobrescritos e substituídos por novos.<\/p>
                      Após criar e ativar um tema filho<\/strong><\/a>, abra o painel de administração do seu WordPress e vá até Ferramentas<\/strong> → Editor de Arquivos de Tema<\/strong>. Selecione o arquivo style.css<\/strong>, adicione seu código personalizado ao campo designado e salve as alterações.<\/p>
                      Se você quiser usar uma classe CSS personalizada em um bloco WordPress específico, basta abrir o editor de blocos e repetir os passos do primeiro método.<\/p>
                      CSS personalizado no WordPress: problemas comuns e como solucioná-los<\/strong><\/h2>
                      Agora, vamos passar por alguns problemas comuns que podem surgir após adicionar CSS personalizado ao WordPress — e compartilhar suas respectivas soluções, claro.<\/p>
                      As mudanças não aparecem<\/strong><\/h3>
                      Se as modificações não estiverem aparecendo no site após adicionar CSS personalizado, pode ser que o cache do site<\/strong><\/a> ou as atualizações automáticas estejam impedindo o processo.<\/p>
                      Cache é uma versão temporária do seu site armazenada localmente no seu navegador. Como o cache é atualizado apenas esporadicamente, o novo estilo CSS pode não aparecer imediatamente após você adicionar o código personalizado.<\/p>
                      Para resolver o problema, limpe o cache no seu site WordPress <\/strong><\/a>e no navegador. Se você usar o recurso de cache automático da Hostinger, espere 30 minutos para o cache ser redefinido ou limpe-o manualmente através do menu Gerenciador de Cache<\/strong> no hPanel.<\/p>
                      \n
                      \"gerenciador<\/figure><\/div>
                      Se o seu novo estilo inicialmente aparecer e, depois, desaparecer de repente, talvez o problema esteja no recurso de atualização automática do WordPress<\/strong><\/a> do seu provedor de hospedagem. Como recomendamos não desativar este recurso por motivos de segurança, o mais indicado é adicionar os códigos personalizados à folha de estilo do tema filho.<\/p>
                      Especificidade do seletor CSS<\/strong><\/h3>
                      Para atribuir um estilo, o CSS seleciona um elemento HTML específico usando um seletor. Um elemento pode pertencer a vários seletores, que o seu tema pode atribuir por padrão.<\/p>
                      Usar o seletor errado pode impedir que seu estilo personalizado substitua o código CSS existente. Para substituir a configuração atual, você deve usar um seletor com uma especificidade CSS<\/strong><\/a> maior.<\/p>
                      Por exemplo, use #selector<\/strong> em vez de .selector<\/strong>, pois ele é mais específico. Se não funcionar, pode ser que seu tema use estilo CSS inline<\/strong><\/a>. Nesse caso, você deve adicionar seu código personalizado diretamente ao arquivo HTML.<\/p>
                      Para verificar o estilo inline, acesse seu site WordPress através de um navegador. Clique com o botão direito em qualquer lugar na tela e selecione Visualizar Código-Fonte da Página<\/strong> ou Inspecionar Elemento<\/strong>. Você deverá ver o CSS inline e os seletores do seu tema.<\/p>
                      \n
                      \"conferindo<\/figure><\/div>
                      Sintaxe CSS digitada incorretamente<\/strong><\/h3>
                      Erros de digitação constituem um problema comum que pode causar erros de sintaxe e quebrar a funcionalidade do seu código. Se você escrever seu CSS personalizado diretamente no editor de arquivo de tema do WordPress, esses problemas podem surgir — muito porque o editor não possui um recurso de realce embutido.<\/p>
                      Por isso, antes de inserir o código, recomendamos verificá-lo usando uma ferramenta como o validador de CSS<\/strong><\/a>. Basta ir até a aba Por entrada direta<\/strong>, colar seu trecho e clicar em Verificar<\/strong> para que a ferramenta destaque os erros encontrados.<\/p>
                      \n
                      \"validador<\/figure><\/div>
                      Como alternativa, você pode escrever o código usando uma ferramenta com um destacador de sintaxe, como o Visual Studio Code<\/strong>. Este recurso verificará automaticamente os erros, permitindo que você os corrija antes do lançamento.<\/p>
                      Se você hospedar seu site WordPress<\/strong><\/a> na Hostinger, recomendamos editar o arquivo através do Gerenciador de Arquivos<\/strong>. Seu editor de código embutido pode ser acessado em qualquer navegador e já vem com um realçador de sintaxe nativo.<\/p>
                      \n
                      \"\"<\/a><\/figure><\/div>
                      Problemas de design responsivo<\/strong><\/h3>
                      Os temas do WordPress usam um design responsivo que ajusta automaticamente a posição e a dimensão dos elementos HTML na página da web para garantir que seu site seja exibido corretamente em diferentes tamanhos de tela.<\/p>
                      Se seu código não aderir às regras CSS existentes, o novo estilo pode ficar cortado ou distorcido em alguns dispositivos.<\/p>
                      Ao adicionar código CSS personalizado, sempre verifique se o novo estilo é exibido corretamente em diferentes dispositivos.<\/p>
                      Vale notar que o personalizador do WordPress possui um recurso de visualização ao vivo que permite que você verifique como o seu novo estilo aparece em diferentes visualizações e tamanhos de tela. Como alternativa, você pode fazer isso usando as ferramentas de desenvolvedor<\/strong><\/a> do seu navegador.<\/p>
                      \n\n\n
                      \n                    
                      Dica<\/h4>\n                    
                      Para evitar erros, recomendamos testar as alterações em uma área de testes do WordPress<\/strong><\/a> antes de implementá-las no site principal.<\/p>\n                <\/div>\n\n\n\n<\/p>
                      Conclusão<\/strong><\/h2>
                      Adicionar CSS ao WordPress é uma forma comum de modificar a aparência de um site além das funcionalidades de personalização padrão. Neste artigo, descrevemos quatro métodos que você pode seguir para isso:<\/p>