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. Avatar photo

    Não carrega CSS, simplesmente não carrega mais nenhuma CSS.

    1. foto Lucas Tavares
      Autor do site

      Olá Paludo,

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

  2. Avatar photo

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

    1. foto Lucas Tavares
      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. Avatar photo

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

    VLWWW