Forma Correta de Carregar Estilos Personalizados no WordPress

  • 2 min de leitura
Foto de Lucas Tavares
wordpress codigos e truques

Vejo muitos artigos na internet ensinando a carregar estilos CSS ou arquivos JavaScripts, porém, a maioria não faz conforme a maneira recomendada pelo próprio WordPress. Não é necessário editar o arquivo header.php do template para carregar esses estilos. O correto é que eles sejam carregados no arquivo functions.php, para evitar problemas futuros com possíveis atualizações do tema. Apenda neste artigo como carregar estilos e javascript de maneira correta.

O próprio WordPress possuí uma função nativa que faz isso. Não precisar ficar colocando código html com IFs no header.php do template. Além de ser mais fácil usar a função do WordPress, ela deixa o código mais "elegante" o código.

Forma NÃO recomendada de fazer (no arquivo header.php):

<?php if (is_single( ) ) { ?>
<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/extras.css" type="text/css" media="screen" />
<?php } ?>

Forma CORRETA de fazer (no arquivo functions.php):

add_action( 'wp_enqueue_scripts', 'wp_action_enqueue_scripts' );
function wp_action_enqueue_scripts() {
if (is_home()) {
wp_enqueue_style('extras', get_template_directory_uri().'/extras.css');
}
}

Explicação

$handle (string) Nome identificador do script. Os nomes devem ser únicos, caso contrário, não funcionará corretamente (obrigatório).
$src (string) Caminho (URL) do script armazenado no servidor (opcional).
$deps (array) Estilos dependentes. Folhas de estilos que serão carregados antes deste. False não há dependências (opcional).
$ver (string) Número da versão deste estilo (opcional).
$media (string) Especifica a mídia onde esse estilo deve ser carregado. 'Exemplos:  'all', 'screen', 'handheld', 'print'. (opcional).

Documentação oficial da função wp_enqueue_style().

Viu como ficou mais elegante? Se a função do WordPress atende nossas necessidades nós devemos usá-la...

5 Comentários para “Forma Correta de Carregar Estilos Personalizados no WordPress
  1. Não carrega CSS, simplesmente não carrega mais nenhuma CSS.

    1. Autor do site

      Olá Paludo,

      Talvez esteja informado o caminho errado e por quebra todo o site.

  2. Como eu carrego os estilos: woocommerce.css, bootstrap.css, login.min.css e woocommerce-layout.css?

    1. Autor do site

      Olá Oséias,

      Você parece ser desenvolvedor pela sua dúvida, então imagino que a situação seja mais complexa. Primeiro verifique se estes arquivos são registrados. Use o editor de sua preferência para pesquisar pelo nome dos arquivos acima. Usando o recurso de procura do editor de código, verifica se eles são registrados com o wp_register_style(), se forem, é só chamar por exemplo wp_enqueue_style('woocommerce-general'). É assim que eu faço.

      Agora se estes arquivos não tiverem sido registrados é só registrar/chamar eles através do wp_enqueue_style();

      Qualquer dúvida estou aqui!

  3. Muito bom cara! era exatamente o que eu estava procurando 😀

    VLWWW

*Condições no site