Como adicionar CSS ao WordPress: 5 métodos

Publicados: 2021-12-11

Deseja aplicar CSS e editar o estilo do seu site? Se sim, este post é para você. Neste guia, mostraremos diferentes maneiras de adicionar CSS ao WordPress para que você possa personalizar seu site e impressionar seus visitantes.

Embora o WordPress tenha muitos temas e modelos que você pode usar, se você quiser alterar a aparência do seu site, acabará adicionando código CSS mais cedo ou mais tarde.

Adicionar CSS a um site é bastante fácil. Já vimos como aplicar CSS usando a ferramenta de desenvolvedor do navegador, mas existem outras maneiras. Todos esses métodos diferentes têm prós e contras, então pode ser difícil para iniciantes entender qual é a melhor maneira de adicionar CSS para sua situação específica. É por isso que neste guia, mostraremos diferentes maneiras de adicionar estilo CSS a um site WordPress .

Como adicionar CSS ao WordPress

Existem várias maneiras de aplicar o estilo CSS a um site WordPress:

  1. Através do personalizador de temas
  2. Editando arquivos de tema filho
  3. Carregando seu próprio arquivo CSS
  4. Aplicar CSS ao cabeçalho com ganchos
  5. Adicionar CSS ao back-end

Vamos dar uma olhada em cada método, para que você possa escolher o mais adequado para você.

NOTA : Não vamos explicar em detalhes a estrutura do CSS neste post, por isso recomendamos que você tenha um conhecimento básico de CSS para poder seguir este guia sem problemas.

Como etapa anterior à aplicação de CSS, recomendamos que você use a ferramenta de desenvolvedor do navegador para localizar elementos HTML específicos que deseja alterar. Se você não tem certeza de como fazer isso, dê uma olhada em nosso guia sobre como aplicar CSS usando a ferramenta de desenvolvimento do navegador.

1) Aplique CSS com o personalizador de temas

A maneira mais fácil e rápida de adicionar código CSS personalizado ao WordPress é inserindo-o no editor CSS adicional do personalizador de temas. Este é o editor CSS do WordPress embutido e está presente em todos os sites por padrão. No entanto, lembre-se de que alguns temas e plugins podem desativar esse recurso.

Para aplicar seu CSS usando o personalizador de temas, acesse seu painel e vá para Aparência > Personalizar > CSS Adicional para abrir o editor de CSS . Lá, você verá o código CSS do seu site e poderá adicionar seu código.

aplicar seu CSS personalizado é inseri-lo no editor CSS adicional do personalizador de temas.

Uma das maiores vantagens desse método é que você pode visualizar o resultado da customização do CSS em tempo real no lado direito da tela.

Depois de adicionar seu código, ele será salvo no banco de dados na tabela *_posts , sob o tipo de postagem custom_css . Mesmo que você possa aplicar todos os tipos de personalização aqui, não é uma prática recomendada para uma grande lista de regras CSS devido ao desempenho.

2) Editando arquivos de tema filho

Outra maneira de adicionar estilo CSS ao WordPress é editar os arquivos CSS do tema filho. Esse método tem melhor desempenho do que aplicar o código diretamente do Customizer porque carrega sem a necessidade de recuperá-lo do banco de dados.

A maioria dos temas filhos tem um arquivo style.css , então você pode simplesmente adicionar seu CSS personalizado lá. Para encontrar o arquivo style.css do seu tema filho, no painel do WordPress vá para Aparência > Editor de Temas . Em seguida, pressione o menu suspenso no canto superior direito, selecione seu tema filho e clique no arquivo style.css , conforme mostrado abaixo.

Incluindo código CSS diretamente nos arquivos do tema filho

Se o seu tema filho não tiver um arquivo style.css ou qualquer outro arquivo com extensão .css , você poderá criá-lo e aplicá-lo conforme descrito na próxima seção.

Como alternativa, alguns temas filhos têm uma pasta CSS com vários arquivos. Se for esse o seu caso, certifique-se de editar o arquivo style.css correto.

3) Carregue seu próprio arquivo CSS

Se você deseja adicionar um código CSS personalizado grande ao WordPress, é uma boa prática tê-lo em um arquivo separado e carregá-lo nos arquivos do site no servidor. Vamos ver como fazer isso passo a passo.

3.1) Crie o arquivo CSS usando um editor de código

Para fazer isso, você precisa usar um editor de código como Visual Studio Code, Sublime text ou qualquer outro que suporte arquivos CSS.

Crie um novo arquivo com a extensão CSS e cole seu código lá. Neste exemplo, nomeamos o arquivo my-styles.css .
Crie o arquivo CSS usando um editor de código

Depois de colar o código, salve o arquivo e continue com a próxima etapa.

3.2) Carregue o arquivo para a pasta Tema Filho

Se o seu tema filho tiver um diretório CSS, basta copiar e colar seu arquivo lá. Alternativamente, você também pode carregá-lo diretamente no diretório principal do tema filho. Não se preocupe com o local na pasta do tema filho, vamos direcionar o caminho do arquivo na próxima etapa.

Agora use o cPanel ou um cliente FTP como o FileZilla para fazer o upload do arquivo.

Se você estiver em um servidor localhost, basta copiar e colar o arquivo na pasta do tema filho localizada na pasta pública do seu servidor localhost.

Seguindo nosso exemplo, vamos colar nosso arquivo my-styles.css no tema filho.

Carregue o arquivo para a pasta Tema filho.

3.3) Enfileirar seu arquivo .CSS personalizado

Agora você precisa enfileirar seu arquivo CSS personalizado no arquivo functions.php do seu tema filho para fazê-lo funcionar. Cole o seguinte script PHP após qualquer código presente no arquivo functions.php Arquivo.

 function meus_estilos() {
wp_register_style( 'meus-estilos', get_stylesheet_directory_uri() . '/meus-estilos.css');
wp_enqueue_style('meus-estilos');
}
add_action( 'wp_enqueue_scripts', 'my_styles' );

Certifique-se de que o arquivo recém-criado seja chamado corretamente pelo caminho, dependendo de onde o arquivo está localizado no diretório do tema. Além disso, lembre-se de alterar o nome do arquivo ( my-styles.css neste exemplo).

Você pode usar o snippet a seguir para verificar se o caminho está correto ou não.

 add_action('wp_head',function(){
echo get_stylesheet_directory_uri() . '/meus-estilos.css';
});

Enfileirar seu arquivo CSS CUSTOM

É isso! É assim que você pode aplicar CSS ao WordPress carregando seu próprio arquivo CSS.

4) Aplique CSS à seção de cabeçalho usando um gancho

Se você tiver algumas habilidades de codificação, também poderá adicionar CSS ao seu site usando ganchos .

O gancho wp_head() é muito útil no desenvolvimento de sites. Embora não seja recomendado usá-lo para incluir um script na tag HTML <head> , ele permite fazer testes rápidos e depurar.

Se você estiver trabalhando com várias folhas de estilo CSS ou em sites complexos e algo não estiver funcionando conforme o esperado, você pode adicionar seu código CSS diretamente na seção <head> usando este gancho.

 add_Action('wp_head','my_head_css');
function my_head_css(){
echo "<estilo>
.site-branding{
    fundo: vermelho;
    largura: 200px;
    preenchimento: 11px;
    raio da borda: 23px; }
</style>
";}

Por exemplo, com este script, estamos alterando o tamanho do título, a cor do plano de fundo, a borda e o preenchimento.

Dessa forma, você pode garantir que o script CSS seja aplicado ao frontend sobre qualquer outro arquivo CSS ou incluído no site de qualquer outra forma.

5) Adicione CSS ao back-end

Finalmente, há mais uma maneira de adicionar estilo CSS ao WordPress. Você pode aplicar CSS personalizado ao back-end usando o gancho admin_head() da seguinte forma:

 add_Action('admin_head', 'my_custom_fonts');
function my_custom_fonts() {
echo '<estilo>
#adminmenu{
    fundo: #602e93;}
</style>';
}

Neste exemplo, estamos alterando a cor do plano de fundo (#602e93).

Os métodos 4 e 5 podem ser muito úteis e podem ajudá-lo a economizar tempo inserindo um script CSS diretamente na seção HTML <head> . No entanto, não é uma prática recomendada e você não deve usar esse método para aplicar estilos permanentemente.

Conclusão

Em suma, com um pouco de CSS você pode personalizar a aparência do seu site. Adicionar CSS é fácil, mas existem várias maneiras de fazer isso, então pode ser difícil saber qual método você deve usar.

Neste tutorial, mostramos cinco métodos diferentes para adicionar CSS ao seu site WordPress:

  1. Através do personalizador de temas
  2. Editando arquivos de tema filho
  3. Carregando seu próprio arquivo CSS
  4. Aplicar CSS ao cabeçalho com ganchos
  5. Adicionar CSS ao back-end

Cada método tem seus prós e contras. Por exemplo, adicionar CSS do tema Customizer é fácil e vem com uma visualização em tempo real. No entanto, não é uma prática recomendada para uma grande lista de regras CSS. Como alternativa, você pode editar os arquivos do seu tema filho ou fazer upload do seu próprio arquivo CSS para o seu tema filho.

Mesmo não sendo uma prática recomendada, você pode usar ganchos para incluir um script na tag HTML <head> para fazer testes rápidos e depurar seu site.

Você adicionou CSS ao seu site? Qual método você usou? Você conhece algum outro método que devemos incluir? Deixe-nos saber nos comentários abaixo!