Adicionar CSS personalizado no WordPress: Guia completo

Custom CSS gives you control over your WordPress site’s style, letting you adjust everything from fonts and colors to layouts. Here’s a guide on how to add custom CSS to WordPress using different methods to fit your needs.

Method 1: Using WordPress’ Built-in Custom CSS Feature

WordPress has a built-in option for adding custom CSS right in the dashboard. It’s ideal for minor tweaks and beginner-friendly.

1. Aceda ao Personalizador
   • Inicie sessão e vá para Aparência > Personalizar.

2. Select “Additional CSS”
   • Na barra lateral esquerda, clique em CSS adicional. Aparecerá uma caixa de texto onde pode introduzir o seu código CSS.

3. Adicione o seu CSS personalizado
   • Introduza o seu código. Por exemplo:

4. Pré-visualizar e publicar
   • You’ll see a live preview of changes. Once you’re happy, click Publicar.

Melhor para: Ajustes simples, sem necessidade de editar o ficheiro do tema.

Method 2: Using the Child Theme’s Style.css File

It’s better to use a child theme’s style.css para alterações mais significativas. Desta forma, as suas edições permanecem seguras mesmo após as actualizações do tema.

1. Ativar um tema infantil
   • Se ainda precisar de começar a utilizar um, crie ou instale um tema infantil. Plug-ins como Configurador de temas infantis torne-o fácil.

2. Aceda ao ficheiro Style.css
   • Em Appearance > Theme File Editor, select your child theme’s style.css ficheiro.

3. Adicione o seu CSS
   • Adicione o seu CSS personalizado no fundo do ficheiro. Exemplo:

.custom-header { background-color: #2c3e50; color: #ffffff; }
.custom-button { background-color: #e74c3c; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

4. Guardar alterações
   • Clique em Atualizar ficheiro para poupar.

Melhor para: Alterações de estilo maiores que devem manter-se após as actualizações.

Método 3: Adicionar CSS personalizado com um plug-in

If you’d rather avoid editing files or child themes, plugins can handle custom CSS. This is great for managing CSS across multiple pages.

• CSS e JS personalizados simples: Leve e fácil de adicionar CSS e JavaScript.
• Código WPC: Adiciona CSS em todo o sítio ou por página.
• CSS do SiteOrigin: Editor visual para principiantes.

Exemplo de utilização do WPCode:

1. Instale o WPCode
   • Aceda a Plugins > Adicionar novo Plugin, procure por Código WPC, instale e active.

2. Crie um Novo snippet CSS
   • Dirija-se a Code Snippets > Add Snippet. Escolha Snippet de CSS.

3. Escolha a colocação
   • Para que o CSS funcione em todo o sítio, selecione Cabeçalho de todo o site.

Melhor para: Gestão fácil de CSS sem tocar nos ficheiros do tema.

Método 4: Adicionar CSS personalizado através de Construtores de Páginas (Elementor, Divi)

Os construtores de páginas como o Elementor e o Divi têm normalmente opções de CSS incorporadas, o que simplifica a gestão dos estilos.

No Elementor:

1. Selecione o elemento e o acesso Avançado Definições
   • No Elementor, selecione um elemento, vá para Avançado definições, e encontre CSS personalizado (Elementor Pro).

2. Introduza o código CSS
   • Utilize a palavra-chave seletor para direcionar o elemento. Exemplo:

seletor { background-color: #333; color: #fff; }

Em Divi:

1. Aceda às Opções do tema
   • Navegue até Divi > Theme Options > Custom CSS.

2. Introduza e guarde o código CSS
   • Adicione o seu CSS personalizado e guarde.

Melhor para Os que já utilizam construtores de páginas com acesso fácil a CSS personalizadas.

Método 5: Adicionar CSS diretamente através de FTP ou Editor de Código

If you’re familiar with FTP and want complete control, you can edit CSS files directly on the server.

Passos:

1. Ligue-se através de FTP
   • Utilize um cliente FTP (como o FileZilla) para se ligar ao seu sítio.
2. Navegue até à pasta de temas
   • Aceda a wp-content/themes/your-child-theme/ e abra style.css.

3. Editar e carregar
   • Adicione o seu CSS personalizado, guarde e carregue.

Melhor para: Utilizadores avançados que necessitam de um controlo total.

Perguntas mais frequentes

1. Why isn’t my custom CSS working?

Limpar o seu browser cache ou quaisquer plug-ins de cache do site, pois o cache pode estar a bloquear as actualizações.

2. Como posso evitar que o CSS se perca durante as actualizações?

Utilize um tema infantil or plugin to store CSS rather than modifying the parent theme’s files.