O CSS personalizado dá-lhe controlo sobre o estilo do seu site WordPress, permitindo-lhe ajustar tudo, desde tipos de letra e cores a layouts. Aqui está um guia sobre como adicionar CSS personalizado ao WordPress usando diferentes métodos para atender às suas necessidades.

Método 1: Utilizar a funcionalidade CSS personalizada incorporada no WordPress

O WordPress tem uma opção incorporada para adicionar CSS personalizado diretamente no painel de controlo. É ideal para pequenos ajustes e é fácil para principiantes.

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

2. Selecione "CSS adicionais"
   • 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
   • Verá uma pré-visualização em direto das alterações. Quando estiver satisfeito, clique em Publicar.

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

Método 2: Utilizar o ficheiro Style.css do tema filho

É preferível utilizar a função 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 Aparência > Editor de ficheiros de temasselecione o tema filho do seu 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

Se preferir evitar a edição de ficheiros ou temas infantis, os plug-ins podem gerir o CSS personalizado. Isto é ótimo para gerir o CSS em várias páginas.

• 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 Snippets de código > Adicionar 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 > Opções do tema > CSS personalizado.

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

Se estiver familiarizado com o FTP e quiser ter controlo total, pode editar ficheiros CSS diretamente no servidor.

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. Porque é que o meu CSS personalizado não está a funcionar?

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 ou plugin para armazenar CSS em vez de modificar os ficheiros do tema principal.