Como adicionar facilmente CSS personalizado no WordPress (2022)

O repositório oficial de temas do WordPress tem cerca de 9.000 temas. Adicione os temas disponíveis nos mercados populares e nos sites dos desenvolvedores de temas e esse número pode chegar a 20.000!

Mesmo se você conseguir percorrer esse grande número e encontrar o tema certo, geralmente descobre que o design requer muitos ajustes.

Para isso, você começa no backend do tema e altera a tipografia e as cores.

Pode ser necessário alterar o espaçamento entre os elementos ou adicionar cor de fundo a um widget.

É aí que você pode adicionar CSS personalizado para alterar os aspectos do tema e torná-lo realmente seu.

O que é CSS?

CSS, ou Cascading Style Sheets, é talvez a segunda linguagem web mais popular depois do HTML.

Enquanto o HTML fornece os blocos de construção de uma página da Web, o CSS os torna bonitos de se ver.

Como você pode imaginar, você encontrará CSS em qualquer lugar que vir HTML.

Você pode usar CSS para adicionar cores, alterar tipos e tamanhos de fontes e adicionar ou remover espaçamento entre os elementos de design. Em geral, o CSS é usado para estilizar e aprimorar o layout das páginas da web.

Se você deseja alterar qualquer elemento visual, pode adicionar trechos de CSS personalizados ao seu site e ver os resultados quase imediatamente.

Os benefícios do CSS

CSS oferece vários benefícios importantes para o seu site WordPress.

Maior consistência no design do site

O código CSS geralmente está contido em arquivos separados (geralmente, style.css no caso do WordPress). Esse arquivo é referenciado no código frontend e as seções relevantes são extraídas conforme necessário.

Isso significa que você precisa criar um único arquivo de estilo que possa ser usado para todas as páginas do site.

Como resultado, todos os elementos HTML são estilizados da mesma maneira (ou você pode aplicar formatação seletivamente definindo classes personalizadas).

Se você precisar alterar o estilo, basta fazer a alteração uma vez no arquivo CSS e ela será aplicada em todo o site rapidamente.

Apresentar estilos diferentes para diferentes espectadores

O design responsivo tem tudo a ver com ajustar os elementos e o conteúdo HTML ao tamanho da tela dos visitantes.

Com um único arquivo CSS, você pode garantir que seu site seja renderizado perfeitamente, independentemente do dispositivo dos visitantes.

As páginas HTML são notoriamente ruins em serem amigáveis ​​para impressão. Com o código CSS correto, você pode criar uma visualização que formata o conteúdo removendo as cores e imagens do plano de fundo.

Da mesma forma, você pode formatar o conteúdo do seu site para ser amigável ao leitor de tela.

Isso melhora a pontuação de acessibilidade do seu site e permite que visitantes com deficiência visual consumam seu conteúdo com facilidade.

Código de site leve

Um site é uma combinação de várias tecnologias, incluindo HTML e CSS. Como resultado, os desenvolvedores geralmente dividem o código do site em arquivos separados.

Quando você abre uma página da Web em seu navegador, o servidor seleciona apenas os arquivos necessários para renderizar a página no navegador. Como resultado, o pacote de download geral necessário para renderizar uma página da Web em seu navegador é muito pequeno.

Com caches de navegadores modernos, o CSS geralmente é baixado uma vez e armazenado localmente, acelerando ainda mais a experiência do usuário.

Benefícios da otimização de mecanismos de pesquisa

CSS é uma ótima maneira de construir sites estruturados. Como o design (CSS) é separado da estrutura (HTML), você pode facilmente modificar e colocar ordem nas páginas da web.

Isso permite que você configure páginas bem construídas e permita que os bots do Google entendam melhor a intenção das páginas.

Outro benefício importante de usar CSS no design do seu site é reduzir a proporção de código para conteúdo das páginas da web.

Isso ajuda humanos e bots a acessar seu conteúdo de maneira rápida e fácil. Isso reduz o tempo necessário para carregar e exibir páginas da web nos navegadores dos visitantes.

Como você sabe, o Google considera o tempo de carregamento da página um importante sinal de classificação que é usado para construir seu índice de pesquisa.

Sites de carregamento mais rápido são colocados no topo dos resultados de pesquisa porque oferecem uma melhor experiência aos visitantes.

O lado negativo do CSS

Todos os benefícios de usar CSS têm uma desvantagem importante – CSS agora é uma coleção de tecnologias relacionadas que têm uma curva de aprendizado significativa para os não desenvolvedores.

Você precisa começar com o básico e depois entender como sua estrutura CSS preferida funciona.

Isso pode ser um punhado para um usuário médio do WordPress que está interessado em pequenas mudanças de estilo.

Mas não se preocupe – neste artigo, você aprenderá vários truques para adicionar código CSS personalizado ao seu site WordPress sem precisar saber como ele funciona.

Importante: Faça backup do seu site antes de tentar qualquer coisa

CSS é uma parte importante do seu site WordPress. Seja você um desenvolvedor experiente ou um novato no desenvolvimento do WordPress, é importante fazer backup do seu site antes de adicionar CSS personalizado.

Fazer backup do seu site salva uma cópia dos arquivos do seu site em um local separado.

Se algo der errado, você pode restaurar seu site em alguns cliques.

Se você precisar ler mais sobre como fazer backup do seu site WordPress, aqui está um ótimo artigo que aborda os backups com muito mais detalhes.

Adicionando CSS personalizado ao seu site WordPress

Agora que você entende o papel do CSS no WordPress, vamos entrar nos detalhes das maneiras de adicionar CSS personalizado ao seu site.

Como todo o resto, você descobrirá que existem várias maneiras de adicionar CSS ao seu site.

Recomendamos que você percorra todas as formas e, em seguida, escolha aquela que se adapta ao seu nível de habilidade.

Adicionar CSS personalizado diretamente ao(s) arquivo(s) do site

Se você tiver um bom conhecimento prático de CSS e web design, poderá adicionar diretamente o código CSS personalizado aos arquivos de tema do site.

Em teoria, isso requer que você abra o arquivo style.css do tema e adicione seu código CSS personalizado lá.

Uma vez feito, lembre-se de salvar ou atualizar o arquivo.

Agora, para muitos temas, o style.css é o principal recurso de estilo e seu código personalizado seria aplicado a todo o site. Portanto, você precisa pensar com cuidado antes de se comprometer com as mudanças.

Não recomendamos este método nem para os especialistas porque é fácil cometer erros e deixar seu site inutilizável.

Alguns temas podem ter arquivos adicionais para estilizar páginas ou partes específicas do site. Nesse caso, seu código personalizado pode não se aplicar.

Outra coisa importante a ser lembrada ao adicionar CSS personalizado diretamente aos arquivos do site é que as alterações serão substituídas quando você atualizar o tema.

Isso significa que você precisa adicionar o código CSS personalizado após cada atualização do tema.

Adicionar CSS personalizado usando o WordPress Theme Customizer

Todos os temas do WordPress têm um painel Personalizador de temas onde você pode alterar as várias configurações relacionadas ao design e à funcionalidade.

Para acessar o Personalizador, vá para Aparência > Personalizar .

Perto do final do painel esquerdo, você verá o campo CSS adicional . Clique para expandi-lo.

Você pode adicionar seu snippet CSS personalizado aqui.

Você pode ver uma visualização das alterações no painel de visualização. Clique em Publicar para salvar as alterações.

Essas alterações são globais e visíveis em todo o seu site.

O bom desse método é que as alterações resultantes da adição do CSS personalizado não desaparecerão com as atualizações do tema.

Adicionar CSS personalizado aos blocos do Gutenberg

Com o recente lançamento do WordPress 5.9, você obtém capacidade completa de edição do site. Essa abordagem baseada em blocos para o design (e edição) do site também simplifica o processo de adicionar CSS personalizado para formatar blocos individuais.

O processo tem duas etapas.

Na primeira etapa, vá para Appearance > Theme File Editor .

Isso abre a seção Editar temas . Geralmente, style.css, a folha de estilo padrão, é aberta no editor.

Se esse não for o caso, selecione o arquivo na barra lateral direita intitulado Arquivos de tema .

Role até a parte inferior do arquivo e adicione seu snippet de código personalizado. Você precisa ter certeza de que seu snippet está contido em um seletor de classe.

Na segunda etapa, você adiciona um bloco à postagem. Neste exemplo, você pode ver, adicionamos um bloco de parágrafo.

Para adicionar CSS personalizado ao bloco de parágrafo, selecione o bloco e vá para a barra lateral esquerda. Na guia Bloquear , role para baixo até a seção Avançado e expanda-a.

No campo CSS Adicional , inclua a classe CSS customizada.

Aqui está o “antes”, onde o bloco de parágrafo não tem CSS personalizado.

Depois de adicionar o CSS personalizado no campo CSS Adicional do bloco de parágrafo, você pode ver a alteração no bloco.

Adicionar CSS personalizado aos construtores de páginas

Como o Gutenberg, todos os construtores de páginas populares permitem que você adicione CSS personalizado a blocos individuais. O processo é semelhante ao que descrevemos acima.

Observe que você pode precisar da versão premium dos construtores de páginas para obter a opção CSS personalizada.

Usaremos o Elementor Pro para demonstrar a ideia de adicionar CSS personalizado aos blocos do Elementor.

Adicione um bloco e vá para a seção Editar .

Em seguida, vá para Avançado > CSS personalizado . Cole seu CSS personalizado no campo.

Com pequenas alterações, esse processo é aplicável a todos os construtores de páginas populares.

Adicionar CSS personalizado usando um plug-in

Adicionar código CSS personalizado diretamente aos arquivos do tema é um negócio arriscado. Você precisa ter cuidado ao adicionar seu código CSS personalizado ao(s) arquivo(s) de estilo do tema e, em seguida, chamá-lo quando necessário.

Mesmo depois disso, há uma chance de que suas alterações desapareçam com a próxima atualização do tema.

É por isso que os desenvolvedores do WordPress criaram vários plugins que cuidam de adicionar CSS personalizado ao seu site.

Esses plugins geralmente não modificam os arquivos principais diretamente. Em vez disso, seu código CSS personalizado é salvo no arquivo de plug-in.

Como resultado, suas alterações permanecem disponíveis mesmo quando você altera o tema do site.

Para reaplicar as alterações personalizadas, tudo o que você precisa fazer é acessar o plug-in e selecionar o código personalizado.

O principal problema aqui é escolher entre as várias ótimas opções.

Para ajudá-lo a tomar a decisão certa, descreveremos brevemente cinco plugins que, em nossa opinião, fazem o trabalho!

Editor de estilo CSS visual

Se você não possui amplo conhecimento de código CSS, o Visual CSS Style Editor é para você. Este plugin freemium vem com um editor visual onde você pode adicionar visualmente alterações aos elementos do site.

O editor de arrastar e soltar permite ajustar o posicionamento do elemento e alterar as margens e o preenchimento. O editor mantém um histórico de edições para que você possa voltar e reverter uma alteração facilmente.

Você pode editar todas as páginas e postagens do site, incluindo a página de login. Você obtém até 60 opções de estilo que podem ser aplicadas ao seu site.

Enquanto a versão paga traz recursos adicionais, a versão gratuita é bastante capaz por si só.

CSS personalizado simples

Embora voltado para administradores de sites, este plugin é bastante amigável para iniciantes com uma visualização ao vivo integrada e uma interface simples que é construída usando os elementos padrão da interface do usuário do WordPress. O plugin é muito leve e não adiciona nenhum arrasto ao desempenho do site.

Para ajudá-lo a escrever um código CSS sem erros, o Simple Custom CSS vem com um marcador de sintaxe e verificação de erros (linting de código). Isso acelera a adição de código CSS personalizado, reduzindo o tempo necessário para adicionar o código perfeito ao seu site.

A melhor coisa sobre o plugin é que suas alterações permanecem preservadas mesmo quando você altera os temas.

Herói CSS

CSS Hero é uma solução premium de edição de temas de sites que simplifica a forma como você edita sites WordPress.

A solução é ideal para iniciantes que precisam de uma solução simples de apontar e clicar para editar a aparência do site.

No entanto, não deixe a simples aparência do editor enganar você – CSS Hero é uma solução poderosa que vem com extenso histórico de edição, trechos de código e a capacidade de adicionar regras CSS personalizadas.

O plugin é muito seguro para usar em qualquer site porque não altera os arquivos de tema nativos do WordPress.

Como resultado, você pode fazer todas as alterações que desejar e ainda ter certeza de que seus arquivos principais permanecerão inalterados e protegidos.

Lápis Amarelo

Se você precisa de uma solução sem código para editar a aparência do site, o YellowPencil pode ser uma ótima opção. Este plugin premium é destinado a iniciantes e especialistas por causa de seus amplos recursos.

Você obtém controle total sobre a aparência do seu site ajustando mais de sessenta propriedades no editor de arrastar e soltar.

Tudo o que você precisa fazer é alterar visualmente os elementos no editor e o YellowPencil gerará código CSS personalizado para suas alterações. Você pode até mesmo aplicar alterações para endereçar diferentes tamanhos de tela e dispositivos. O plug-in preserva suas alterações de CSS e você pode reaplicar as alterações ao alterar os temas.

SiteOrigin CSS

SiteOrigin CSS é uma solução de edição de CSS muito popular para sites WordPress porque é um ajuste perfeito, independentemente de suas habilidades.

Você obtém controle preciso sobre as cores, preenchimento, estilo e posicionamento dos elementos do site no editor visual. O plug-in também vem com conclusão de código que elimina as suposições da codificação CSS.

O inspetor incluído simplifica a seleção de seletores adequados para que você possa escolher os atributos adequados para seus elementos de design.

O plug-in é gratuito e vem com recursos interessantes, como conclusão de código, linting de código (verificações de erros) e proteção de arquivos principais.

Crie um tema filho para testar (e preservar) as alterações

Os temas filho obtêm sua funcionalidade e estilo de outros temas (conhecidos como temas pai).

Essencialmente, são cópias dos temas pai e “herdam” seu código e ativos. No entanto, os temas filho são isolados dos temas pai.

Em teoria, criar um tema filho é simples. Você simplesmente precisa criar uma nova pasta, copiar os arquivos style.css (para estilos e elementos visuais) e functions.php (para a funcionalidade do tema).

Na prática, porém, você precisa verificar a documentação do tema para encontrar os arquivos críticos que você precisa copiar para a pasta do tema filho.

Depois de ter todos os arquivos necessários na pasta, você pode ativá-lo como o tema padrão do site. Agora, você pode seguir um dos métodos acima para adicionar CSS personalizado.

Gerador de Tema Filho Astra

Como você pode ver, você precisa de um ótimo tema pai se quiser um tema filho de alto funcionamento. Como o tema filho herda todas as funcionalidades e estilos do tema pai, você precisa ter cuidado ao escolher o tema pai.

Se você estiver usando o Astra, está com sorte, porque o Astra oferece um ótimo gerador de tema filho que cuida do processo de criação do tema filho.

Você pode baixar o tema filho como está ou clicar em Opções avançadas para alterar vários parâmetros, como autor, descrição e capturas de tela.

A ferramenta baixa um arquivo zip que contém o pacote completo do tema filho.

Conclusão

Esperamos que este artigo tenha ajudado você a entender a ideia de adicionar CSS personalizado ao seu site WordPress.

Como você viu, o WordPress oferece várias maneiras de adicionar trechos de CSS personalizados diretamente aos arquivos principais ou por meio de plugins. Recomendamos o método do plugin porque é mais seguro e permite que você retenha as alterações de CSS mesmo quando você altera os temas.

Talvez você precise aprimorar seu conhecimento de CSS (ou começar a aprender com vários recursos excelentes) porque o CSS está em constante evolução e você encontrará maneiras melhores de estilizar suas páginas da web quando fizer uma simples pesquisa no Google.

Você também deve considerar a criação de temas filhos como uma ótima opção para testar trechos de CSS. Você descobrirá que muitos temas populares oferecem um processo simples de criação de temas filhos a partir de seus arquivos principais.

Agora é a sua vez - deixe-nos saber qual método você prefere para adicionar CSS personalizado aos sites do WordPress.