se criar seu próprio tema WordPress, um tema filho de seu pai ou editar um tema, você encontrará a necessidade de adicionar sua própria folha de estilo personalizada CSS. Provavelmente, você também desejará substituir alguns estilos da folha de estilo do tema padrão.
existem várias maneiras de adicionar seus próprios estilos e/ou substituir estilos padrão. Então, qual é a melhor maneira de fazer isso? Os desenvolvedores concordarão que é criando seus próprios arquivos CSS personalizados e incorporá-los ao tema WordPress em que você está trabalhando.
maneiras de adicionar código CSS personalizado aos temas do WordPress
não falaremos sobre maneiras depreciadas de adicionar estilos CSS em elementos HTML ou adicionar blocos <style>. Hoje em dia, esses métodos são abandonados pelos desenvolvedores. Além disso, eles não são amigáveis com SEO, o que é uma questão importante para se preocupar hoje em dia.
nem sequer sugerimos editar a folha de estilo CSS original do tema (geralmente estilo.css), ou adicionando código personalizado a ele. Este arquivo geralmente é muito grande e difícil de gerenciar. Qualquer pequeno erro de digitação ou erro de sintaxe pode fazer com que todo o site trave.
neste artigo, mostraremos como criar um arquivo CSS personalizado e incorporá-lo a um tema WordPress.
existem vários métodos de adicionar código CSS personalizado aos temas do WordPress. Qual é a melhor prática?
como adicionar arquivos de folha de estilo personalizados aos temas do WordPress usando wp_register_style() e wp_enqueue_style()
o primeiro passo para incorporar arquivos CSS personalizados ao WordPress é adicionar arquivos ao seu tema. Usando um cliente FTP ou seu gerenciador de arquivos cPanels, localize sua pasta de tema e abra-a. Agora você pode criar um novo arquivo e nome, por exemplo, personalizado.css ou carregue o arquivo CSS do seu computador. Caso você precise adicionar mais de um arquivo CSS ao seu tema WP, repita esta etapa.
se você completou esta etapa corretamente, você deve ver seu arquivo CSS personalizado ou arquivos em seu editor de tema de instalação do WordPress.
vinculando arquivos CSS personalizados a seção principal do site
agora que você adicionou seus arquivos CSS personalizados à sua pasta de tema WP, é hora de vincular os arquivos à seção <head> do seu site. Desta forma, o site pode aplicar seus estilos personalizados aos seus elementos.
você pode simplesmente adicionar um elemento< link > à seção< head > do seu site, preferível logo antes do fechamento< / head > tag. Dessa forma, os estilos CSS personalizados carregam por último e substituem os estilos padrão. A seção< head > do seu site geralmente está localizada no cabeçalho da pasta do tema.arquivo php e é acessível através do editor de temas WordPress.
aqui está um exemplo do elemento quando seu site está localizado na pasta “test-site” na pasta raiz do seu servidor, sua pasta de tema é chamada “test-theme” e seu arquivo CSS é chamado “custom.css”:
<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">esta solução simples funcionará bem, mas não é a melhor prática de incorporar arquivos CSS em sites WordPress.
inserir um arquivo CSS no WordPress usando wp_register_style() e wp_enqueue_style () funções
a prática recomendada para incorporar arquivos CSS personalizados ao seu site WordPress é registrar sua folha de estilo nas funções do seu tema WP.arquivo php usando wp_register_style() e wp_enqueue_style () funções. Dessa forma, seus arquivos CSS serão carregados no momento em que a ação wp_head for acionada. Sua folha de estilo será posicionada logo após a folha de estilo padrão do tema. e permitir que você substituindo estilos padrão.
a primeira coisa a fazer é localizar as funções do seu tema.arquivo php. Ele está localizado dentro do editor de temas do WordPress. Você também pode fazer isso usando FTP ou cPanels File Manager. Se você estiver trabalhando em um tema filho, edite o arquivo de funções de temas filhos, não o tema pai. Dessa forma, você evitará perder seu código personalizado ao atualizar o tema pai. Role para baixo até a parte inferior das funções.php e adicione o seguinte trecho de código:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_enqueue_style( 'custom' );}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );Personalize o snippet: no exemplo acima, nomeamos a função de registro “additional_stylesheets” e registramos um arquivo css de folha de estilo chamado “custom.css”, carregado anteriormente em nossa pasta de temas. Você pode nomear a função como quiser e substituir o nome da função na linha superior e inferior do snipet. Se o seu arquivo de folha de estilo tiver um nome diferente do personalizado.css substitua a palavra custom no snipet pelo seu próprio nome de arquivo.
se você fez tudo corretamente, pode começar a escrever seu próprio código CSS em sua folha de estilo. Você notará seus estilos afetando o site enquanto salva as alterações e recarrega a página. Não se esqueça de limpar o cache do seu navegador ao atualizar a página.
incorporando vários arquivos CSS de folha de estilo personalizados em funções.php usando wp_register_style () e wp_enqueue_style ()
Antes de adicionar vários arquivos CSS ao seu tema WP, leve em consideração que ele causa mais solicitações de servidor quando o site está carregando, o que afeta a velocidade de carregamento do seu site. Tente usar o menor número possível de folhas de estilo.
agora, digamos que você tenha um arquivo de folha de estilo separado para estilos de desktop chamado custom.css e um segundo arquivo de folha de estilo chamado responsive.css para dispositivos móveis. Incorporando ambas as folhas de estilo em suas funções.o arquivo php é simples e requer uma ligeira modificação do trecho de arquivo único mostrado acima:
function additional_stylesheets() {wp_register_style( 'custom', get_template_directory_uri().'/custom.css' );wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css' );// register another file herewp_enqueue_style( 'custom' );wp_enqueue_style( 'responsive' );// enqueue another file here}add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );mesmo que personalizar o único trecho de arquivo, altere os nomes dos arquivos de acordo com sua situação.
Mais sobre wp_register_style() e wp_enqueue_style() funções
Para saber mais sobre como usar wp_register_style() e wp_enqueue_style() funções para registar as folhas de estilo visite o dedicado WP Codex página.