TL;DR: Como Adicionar CSS Personalizado no WordPress
Onde você cola seu CSS importa mais do que o próprio CSS, porque cada local se comporta de maneira diferente no momento em que você muda de tema.
- SeedProd: uma caixa de CSS Personalizado nas Configurações Globais do construtor, gratuita, com estilos que permanecem anexados à página que você construiu.
- O Personalizador: Aparência, Personalizar e, em seguida, CSS adicional, se você estiver usando um tema clássico.
- O Editor de Site: Estilos e, em seguida, o menu de três pontos, se você estiver usando um tema de blocos.
- WPCode: um trecho de CSS que sobrevive a qualquer troca de tema.
- Arquivos do tema: eles funcionam, mas a próxima atualização do tema apaga suas alterações.
- Sem opção de CSS adicional? Isso é uma permissão em sua conta, não em seu tema.
Você já tentou mudar uma cor ou ocultar algo no seu site WordPress, apenas para descobrir que não há opção para isso? Eu também já passei por isso. Lembro-me de passar muito tempo procurando nas configurações do meu tema por um simples ajuste de fonte que simplesmente não era possível.
Foi quando aprendi sobre CSS personalizado. É uma maneira rápida de corrigir pequenos problemas visuais no seu site, sem editar arquivos de tema ou contratar um desenvolvedor.
Você não precisa saber codificar para nada disso. Existem quatro lugares onde você pode adicionar CSS personalizado no WordPress, e o que você escolher decidirá se seus estilos sobreviverão à próxima alteração de tema.
Métodos para Adicionar CSS Personalizado no WordPress:
- 1. Adicionar CSS Personalizado com SeedProd
- 2. Adicionar CSS Personalizado Sem um Construtor de Páginas
- 3. Use um Plugin de CSS Personalizado
- 4. Edite os Arquivos do Seu Tema (Não Recomendado)
- Por Que a Opção de CSS Adicional Está Ausente?
- Qual Método Você Deve Usar?
- Bônus: Direcione CSS Personalizado para Páginas ou Blocos
O que é CSS Personalizado?
CSS significa Cascading Style Sheets (Folhas de Estilo em Cascata). É uma linguagem simples que controla a aparência do seu site WordPress.
Por exemplo, este trecho de CSS muda a cor de um título para vermelho:
h1 {
color: red;
}E este oculta um elemento na página:
.hidden {
display: none;
}Você não precisa escrever código como este do zero. Na maioria das vezes, você apenas copiará e colará no lugar certo.
O segredo é saber onde colocar seu CSS personalizado, e é exatamente isso que mostrarei a seguir.
Por que Adicionar CSS Personalizado no WordPress?
Às vezes, você quer mudar a cor de um botão, centralizar um título ou remover um espaço extra, e seu tema não oferece uma maneira de fazer isso.
É aí que entra o CSS personalizado. Ele lhe dá controle sobre os pequenos detalhes de design que fazem seu site parecer e se sentir exatamente como você deseja.
Com CSS, você não fica preso às configurações padrão do tema do WordPress. Você pode ajustar seu layout, estilo e espaçamento sem trocar de tema ou instalar plugins do WordPress extras.
Apenas lembre-se: o CSS ajuda a ajustar seu design, mas não corrigirá erros visuais maiores que o CSS personalizado não pode corrigir, como layouts confusos ou navegação ruim.
Então, como você realmente adiciona CSS personalizado no WordPress?
Existem algumas maneiras diferentes, mas começarei com a que uso com mais frequência e a que recomendo se você quiser controle total sem o incômodo.
1. Adicionar CSS Personalizado com SeedProd (Minha Maneira Favorita)
Se você nunca usou o SeedProd antes, é um construtor de arrastar e soltar para WordPress que torna a personalização do seu site super fácil, mesmo que você não seja um desenvolvedor.
Eu o uso o tempo todo porque posso criar temas completos ou páginas de destino sem tocar em nenhum código. E quando quero adicionar um pouco de CSS, o SeedProd me dá um lugar simples para fazer isso.
Antes de entrarmos nas etapas, é útil ter o SeedProd configurado em seu site.
Se você ainda não o usou, aqui estão alguns tutoriais para iniciantes para ajudá-lo a começar:
Depois de criar uma landing page ou tema com o SeedProd, você estará pronto para adicionar seu CSS personalizado. Vamos começar com como fazer isso em uma única landing page.
Como Adicionar CSS a uma Landing Page no SeedProd
Para começar, abra seu painel do WordPress e vá para SeedProd » Landing Pages.
Encontre a landing page que deseja editar e clique no link Editar ao lado dela.
Isso abrirá o construtor de páginas do SeedProd. No canto inferior esquerdo, clique no ícone de engrenagem para abrir suas Configurações Globais.
Na barra lateral esquerda, clique na aba CSS Personalizado.
Agora cole seu CSS. Por exemplo, aqui está um que estiliza o texto do seu parágrafo:
p {
font-style: italic;
color: #444;
}
Clique no botão Salvar no canto superior direito.
Você pode então pré-visualizar sua página para ver as alterações salvas ao vivo em seu site.
Como Adicionar CSS Global com o Theme Builder do SeedProd
Se você estiver usando o Theme Builder do SeedProd para projetar todo o seu site, poderá aplicar CSS personalizado que funcione em todas as páginas.
Para começar, abra seu painel do WordPress e vá para SeedProd » Theme Builder.
Encontre o modelo chamado CSS Global e clique em Editar Design.
Dentro do construtor, clique no ícone de engrenagem no canto inferior esquerdo para abrir as Configurações Globais.
Na barra lateral esquerda, clique na aba CSS Personalizado.
Clique no botão Editar CSS Personalizado. Isso abre o Personalizador do WordPress em uma nova janela.
No Personalizador, clique em CSS Adicional e, em seguida, cole seu código.
Por exemplo:
p {
font-style: italic;
}Isso fará com que todo o texto do parágrafo em seu site apareça em itálico.
Clique em Publicar para salvar suas alterações e aplicá-las em todo o site.
Agora você pode atualizar sua página para ver a atualização ao vivo.
Este método é útil para fazer alterações de estilo globais, como ajustes de fonte, espaçamento e ajustes de cor.
A rota para todo o site é o próprio painel do WordPress: o botão Editar CSS Personalizado abre o Personalizador, então seus estilos globais são salvos em seu tema em vez de dentro do SeedProd. A caixa da página de destino mais acima é a parte genuinamente do SeedProd e funciona na versão gratuita, embora o próprio Theme Builder precise de um plano Plus ou superior.
2. Adicionar CSS Personalizado no WordPress Sem um Construtor de Páginas
Se você não estiver usando um construtor de páginas como o SeedProd, ainda poderá adicionar CSS personalizado diretamente no WordPress. As etapas dependem do tipo de tema que você está usando, seja um tema clássico ou um tema de blocos.
Temas clássicos usam a ferramenta Personalizador mais antiga e geralmente dependem de widgets e modelos de página. Temas de blocos, por outro lado, usam o Editor de Site mais recente, que permite projetar todo o seu site com blocos.
Ambas as caixas são integradas ao WordPress, então não há nada para instalar. Eu as uso para alterações pontuais em vez de qualquer coisa que eu queira manter, porque o WordPress arquiva o CSS sob o tema que estiver ativo no momento.
Use o Personalizador do WordPress (Temas Clássicos)
No seu painel do WordPress, vá para Aparência » Personalizar.
No menu do Personalizador, clique em CSS Adicional.
Uma caixa de texto aparecerá onde você pode colar seu código personalizado. Por exemplo:
p {
color: #0073aa;
}Isso muda todo o texto do parágrafo em seu site para um tom de azul.
Você verá uma prévia ao vivo das suas alterações à direita enquanto digita.
Quando estiver satisfeito com o resultado, clique no botão Publicar para salvar suas alterações.
Este método funciona bem com temas mais antigos que suportam o Personalizador e não requer nenhum plugin do WordPress.
Use o Editor de Site (Temas de Blocos)
Se o seu site WordPress usa um tema de blocos, você gerenciará seu design usando o Editor de Site completo em vez do Personalizador.
Para começar, vá para Aparência » Editor no seu painel do WordPress.
Na barra lateral esquerda, clique no ícone de Estilos. Ele se parece com uma meia-lua ou uma paleta de tinta.
Em seguida, clique no pequeno ícone de lápis rotulado Editar Estilos.
Agora você verá o editor do WordPress. No canto superior direito da tela, clique no menu de três pontos (⋮) e selecione CSS Adicional no menu suspenso.
Cole seu código personalizado na caixa. Por exemplo:
p {
color: #0073aa;
}Isso alterará a cor do texto dos parágrafos em todo o seu site.
Clique em Salvar no canto superior direito para aplicar as alterações.
Sem opção de CSS adicional nesse menu? Isso quase nunca é o seu tema. Depende de uma permissão em sua conta de usuário, e a seção abaixo cobre como verificá-la.
3. Use um Plugin de CSS Personalizado
Se o seu tema não suporta o Personalizador ou o Editor de Site, ou se você apenas deseja uma maneira limpa de gerenciar seu CSS em um só lugar, recomendo usar um plugin como o WPCode.
WPCode é um plugin leve para WordPress que permite adicionar trechos de código personalizados, incluindo CSS, sem editar os arquivos do seu tema.
Depois de instalar e ativar o WPCode, vá para Snippets de Código » + Adicionar Snippet no seu painel do WordPress.
Clique na caixa que diz Adicionar seu código personalizado (Novo Snippet) e dê um nome ao seu snippet, como Estilos CSS Personalizados.
Em Tipo de Código, selecione Snippet CSS no menu suspenso.
Agora cole seu CSS na caixa de código. Por exemplo:
p {
color: #0073aa;
}Role para baixo e escolha Inserção Automática para aplicar o CSS em todo o seu site.
Em seguida, clique em Salvar Snippet e ative o interruptor no topo para Ativo.
É isso! Seus estilos personalizados agora estão ativos em todo o seu site, e você pode voltar a este snippet a qualquer momento para fazer alterações.
4. Edite os Arquivos do Seu Tema (Não Recomendado)
Este método só funciona se você estiver usando um tema clássico. Temas de blocos não incluem acesso ao Editor de Arquivos de Tema no painel do WordPress.
Se você estiver usando um tema clássico e estiver confortável em editar código, pode adicionar CSS personalizado diretamente ao arquivo style.css do seu tema. Mas não recomendo isso, a menos que você saiba o que está fazendo.
Ao editar arquivos de tema diretamente, suas alterações podem ser perdidas durante as atualizações. Você também não verá uma prévia ao vivo, e até mesmo um pequeno erro de digitação pode quebrar seu layout.
Dito isso, se você estiver usando um tema filho ou souber como restaurar seu site se algo der errado, veja como fazer.
Vá para Aparência » Editor de Arquivos de Tema no seu painel do WordPress.
Na lista de arquivos à direita, clique em style.css.
Role até o final do arquivo e cole seu CSS. Por exemplo:
p {
color: #0073aa;
}Clique em Atualizar Arquivo para salvar suas alterações.
Edite arquivos de tema apenas em um tema filho: sem um, a próxima atualização do tema sobrescreverá tudo o que você adicionou. Se você não tem certeza de como restaurar seu site quando algo quebrar, use SeedProd ou WPCode em vez disso.
Por Que a Opção de CSS Adicional Está Ausente no WordPress?
O WordPress oculta o CSS Adicional de qualquer conta que não tenha uma permissão chamada edit_css, então quando a caixa desaparece, é a permissão que sumiu, não o recurso.
O tema parece ser o suspeito óbvio, e quase nunca é. O WordPress executa a mesma verificação de permissão para a caixa do Personalizador e a caixa do Editor de Site, então a troca de temas não muda nada.
Três coisas desativam essa permissão:
- Uma configuração de segurança em wp-config.php. Quando
DISALLOW_UNFILTERED_HTMLé definido em um site, o WordPress remove a edição de CSS personalizado de todos, inclusive administradores. - Multisite. Em uma rede WordPress, apenas o super administrador que gerencia a rede mantém a permissão, então os administradores de sites individuais perdem a caixa.
- Um plugin de endurecimento que o remove. A permissão
edit_cssé baseada em uma mais antiga chamadaunfiltered_html, e alguns plugins de segurança removem essa, o que leva a caixa de CSS junto.
Fui ler isso no próprio código do WordPress 7.1 em vez de repetir a explicação do tema, porque a opção não é baseada no suporte do tema.
Se você é o único administrador e nada óbvio deveria estar bloqueando você, pergunte ao seu host ou a quem configurou o site se DISALLOW_UNFILTERED_HTML está definido no seu arquivo wp-config.php. Essa é a maneira mais rápida de descartar.
Se a configuração for deliberada, respeite-a e coloque seu CSS em algum lugar que não passe pela mesma verificação. A caixa de CSS Personalizado do SeedProd salva através das próprias permissões do construtor e o WPCode usa sua própria permissão de snippet, então um painel de CSS Adicional ausente não impede que nenhum deles funcione.
Qual Método Você Deve Usar?
Escolha com base no que você quer que aconteça quando mudar de tema, porque essa é a verdadeira diferença entre esses quatro.
| Método | Melhor para | Sobrevive a uma mudança de tema? | Precisa de um plano pago? |
|---|---|---|---|
| SeedProd | Estilizando páginas de destino e modelos que você mesmo construiu | Sim, o CSS é salvo com a página | Não para uma única página, Plus para todo o site |
| Personalizador ou Editor de Site | Um pequeno ajuste no tema que você está usando agora | Não, o WordPress o armazena por tema | Não |
| WPCode | CSS que você quer manter em qualquer mudança de tema | Sim | Não |
| Arquivos do tema | Nada, a menos que você esteja trabalhando em um tema filho | Não, a próxima atualização o sobrescreverá | Não |
Se o CSS for para todo o site e você quiser parar de pensar nisso, eu usaria o WPCode, porque é o único dos quatro que ignora completamente seu tema. Se o estilo pertence a uma página que você projetou, mantenha-o no SeedProd com a página.
O Personalizador ainda serve para um pequeno ajuste que você não sentiria falta após uma re-tematização. Apenas saiba que é isso que você está escolhendo.
Bônus: Direcione CSS Personalizado para Páginas ou Blocos
Às vezes, você não quer que seu CSS afete o site inteiro, apenas quer que ele se aplique a uma página ou a um único bloco. Você pode fazer isso usando IDs de página ou classes CSS personalizadas.
Usando IDs de Página no WordPress
Cada página no WordPress tem um ID exclusivo, e você pode usá-lo para direcionar estilos apenas para essa página.
Para encontrar o ID da página, visite a página em seu navegador, clique com o botão direito em qualquer lugar e escolha Inspecionar.
No código, procure pela tag <body>. Ela incluirá uma classe como page-id-37.
Você pode então usá-la em seu CSS assim:
.page-id-37 p {
color: green;
}
Isso mudará apenas a cor do texto do parágrafo nessa página específica.
Usando as Configurações de Bloco do SeedProd
Se você estiver usando o SeedProd, pode segmentar blocos específicos adicionando um nome de classe personalizado.
Abra sua página no construtor do SeedProd e clique no bloco que você deseja estilizar. No meu caso, quero estilizar um bloco de título específico.
No painel esquerdo, vá para a aba Avançado, procure pela opção Atributos e expanda-a.
Encontre o campo rotulado Classe CSS e adicione um nome de classe como my-special-style.
Em seguida, na sua caixa de CSS Personalizado global ou de nível de página, adicione algo como isto:
.my-special-style {
background-color: #fff7e6;
border-radius: 10px;
}
Após salvar e visualizar a página, você verá suas alterações nesse bloco específico sem afetar o restante do seu site.
Perguntas Frequentes Sobre Adicionar CSS Personalizado no WordPress
Como Adiciono CSS a uma Página Específica?
Você pode segmentar uma página com seu ID de página exclusivo, como .page-id-123 p { color: red; }. Se você estiver usando SeedProd ou WPCode, adicione uma classe CSS personalizada ao bloco ou seção que deseja estilizar e segmente essa classe em vez disso.
Posso Usar HTML e CSS Juntos?
Sim. Você pode adicionar HTML dentro de blocos ou widgets do WordPress e estilizar com CSS personalizado, desde que seu CSS segmente o elemento ou classe corretos.
É Seguro Adicionar CSS Sem um Desenvolvedor?
Sim, desde que você fique fora dos arquivos do seu tema. O CSS apenas muda a aparência das coisas, então um erro aparece como uma estranheza visual em vez de um site quebrado, e você pode excluir a regra para desfazê-la. Editar os arquivos do tema diretamente é a única parte disso que apresenta risco real.
Adicionar CSS ao WordPress Afetará Dispositivos Móveis?
Seu CSS se aplica a todos os tamanhos de tela, a menos que você o envolva em uma media query. Se você estiver trabalhando no SeedProd, pode mudar para a visualização móvel no construtor e ajustá-la lá antes de publicar.
Por Que Meu CSS Personalizado Não Está Funcionando?
Duas coisas causam isso na maioria das vezes. Ou uma regra no seu tema é mais específica que a sua, então ela vence, ou um plugin de cache ainda está servindo a folha de estilos antiga. Limpe seu cache primeiro, depois clique com o botão direito no elemento e escolha Inspecionar para ver qual regra está realmente sendo aplicada.
Onde o WordPress Armazena Meu CSS Personalizado?
O CSS que você adiciona no Personalizador vai para uma postagem oculta que o WordPress nomeia após seu tema ativo, e é por isso que ele não o segue quando você muda. O Editor de Site mantém seu CSS com os estilos globais do seu tema. SeedProd e WPCode armazenam os seus fora do tema.
Pronto para Personalizar seu Site WordPress?
CSS personalizado é a maneira mais rápida de contornar um tema que não permite que você mude algo, e nada disso precisa de um desenvolvedor.
Você não precisa reconstruir nada ou aprender como as folhas de estilo funcionam para usá-lo. Decida onde o CSS deve ficar, cole-o e veja a página no seu navegador.
Se você preferir fazer a estilização visualmente e mantê-la anexada à página que você construiu, o SeedProd cuida de ambos no mesmo lugar.
Quer continuar personalizando seu site WordPress?
Aqui estão alguns guias que recomendo a seguir:
- Como Editar a Página Inicial do Seu WordPress
- Como Personalizar Cabeçalhos no WordPress
- Como Adicionar Depoimentos a Páginas do WordPress
- Como Criar uma Página 404 Personalizada no WordPress
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
