Como Usar a Função wp_enqueue_style para Adicionar Folhas de Estilo CSS no WordPress

Quando um usuário está desenvolvendo um plugin ou tema do WordPress, é essencial utilizar o método de enfileiramento (enqueue) de folhas de estilo (stylesheets) para que os elementos sejam carregados corretamente e na ordem certa. 

Para fazer isso, recomendamos utilizar a função wp_enqueue_style(). Trata-se de uma ferramenta poderosa para adicionar estilos personalizados no seu plugin ou tema do WordPress. Por criar uma lista de itens ordenados, essa função também garante que as stylesheets sejam carregadas apenas no momento necessário, além de ajudar a evitar conflitos com outros temas e plugins. Neste tutorial, vamos explorar as diferentes maneiras de utilizar a função wp_enqueue_style() para melhorar a experiência dos usuários e a aparência geral do seu site.

Como Usar a Função wp_enqueue_style para Adicionar Folhas de Estilo CSS no WordPress

Vamos começar com alguns exemplos básicos para te ajudar a entender melhor como a função wp_enqueue_style() funciona.

Como Enfileirar a Folha de Estilo Principal style.css

Para realizar o enqueue a folha de estilo principal do tema, a style.css, use a função wp_enqueue_style() no arquivo functions.php do seu tema.

Abaixo, ilustramos um exemplo do código com a função inserida no arquivo:

function my_theme_enqueue_styles() {
    wp_enqueue_style( 'estilo_do_meu_tema', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Nesse código, o elemento estilo_do_meu_tema, inserido dentro da função wp_enqueue_style(), representa um nome único para a folha de estilo que você está colocando na fila. Já a função get_stylesheet_uri() é a responsável por lidar com a URL do arquivo style.css do tema principal.

Depois, a função wp_enqueue_style() registra o estilo e o adiciona à fila. Por fim, a função add_action() adiciona a sua função personalizada my_theme_enqueue_styles() no hook (gancho) dos wp_enqueue_scripts (link em inglês). Isso garante que a folha de estilo, ou stylesheet, será adicionada corretamente na fila (queue) de carregamento.

Como Fazer o Enqueue de Outras Stylesheets

Você também pode utilizar a função wp_enqueue_style() para incluir estilos adicionais sobre a stylesheet principal e colocá-los na fila. Por exemplo, é possível adicionar opções extras de estilo em um arquivo separado.

O código para aplicar essa função pode ser parcialmente reutilizado a partir do exemplo anterior, bastando então inserir alguns elementos extras. Confira o código abaixo:

function my_theme_enqueue_styles() {

    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

 wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );

}

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Neste método, utilizamos a função get_theme_file_uri(), que retorna com a URL do arquivo no diretório do tema atual. Em nosso exemplo, trata-se do elemento extra.css. Desse modo, a função irá posicionar a stylesheet principal no primeiro lugar da queue e depois passará para os estilos extras adicionados à fila. 

Como Carregar Stylesheets Externas nos Arquivos de um Site WordPress

Ainda é possível utilizar a função wp_enqueue_style() para fazer o enqueue de uma stylesheet a partir de uma fonte externa. O processo pode ser bastante útil caso você deseje utilizar fontes personalizadas ou uma folha de estilo que está hospedada em uma rede de distribuição de conteúdo (CDN).

O código também é bastante similar aos dos exemplos anteriores. Fique atento aos ajustes:

function theme_files() { 

    wp_enqueue_style('theme_custom', INSERIR URL'); 

} 

add_action('wp_enqueue_scripts', 'theme_files');

Lembre-se de substituir o elemento INSERIR URL pela URL real da stylesheet.

Como Adicionar Arquivos de Script no WordPress Usando a Função wp_enqueue_script

O WordPress possui uma função integrada, chamada wp_enqueue_script(), que permite que você faça o enqueueing de scripts JavaScript ou similares. Para fazer esse processo, adicione o código que está indicado abaixo no arquivo functions.php do seu tema:

function theme_scripts() {

    wp_enqueue_script( 'meu-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true );

}

add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Note que esta função utiliza mais parâmetros do que os exemplos de enfileiramento apresentados anteriormente:

• meu-script – parâmetro que indica o nome do seu script. Você pode escolher o nome que desejar.
• /js/my-script.js – se refere ao local em que está seu script. Nesse caso, nosso script de exemplo está no diretório js do tema WordPress.
• array() – parâmetro que define as dependências que o seu script pode possuir.
• 1.0 – refere-se ao número da versão da stylesheet. Em nosso exemplo, trata-se da primeira versão.
• true – determina se o script deve ou não ser carregado no rodapé (true: verdadeiro/sim e false: falso/não).

Exemplos Úteis de Usos da Função wp_enqueue_style

Nesta seção, você poderá conferir alguns casos práticos em que o uso da função wp_enqueue_style() pode melhorar a qualidade geral do seu site WordPress.

Carregando Estilos CSS Apenas em Páginas Específicas

Implementar códigos de estilo CSS (linguagem Cascading Style Sheet) em páginas específicas de um site WordPress pode gerar diversos benefícios para os visitantes e para os administradores do site:

• Maior velocidade de carregamento das páginas – quando um site utiliza elementos CSS apenas em páginas onde eles são realmente necessários, ele evita a presença de códigos desnecessários em seus arquivos. Isso melhora a velocidade geral do site, fazendo com que as páginas carreguem mais rápido. 
• Manutenção facilitada – você pode alterar determinados elementos de estilo, através dos arquivos CSS, sem que isso afete as outras páginas do site. 

No exemplo ilustrado abaixo, vamos adicionar e carregar um código CSS à página de Entre em Contato. Para isso, vamos contar com a ajuda do hook WordPress wp_enqueue_scripts e da função is_page():

<?php

add_action('init', 'register_custom_styles');

function register_custom_styles() {

    wp_register_style( 'design-personalizado', '/wp-content/design.css' );

}

add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );

function conditionally_enqueue_styles_scripts() {

    if ( is_page('entreemcontato') ) {

        wp_enqueue_style( 'design-personalizado' );

    }

}

?>

Carregando um Arquivo CSS no Rodapé do Site 

Ao mover o elemento de estilo CSS para o final da página do site, o navegador de um visitante tende a priorizar o carregamento do código HTML e de outros recursos importantes antes. Como resultado, colocar os códigos CSS no rodapé do site pode acelerar consideravelmente o carregamento da página.  

A melhor maneira de carregar o CSS no rodapé de um site é através do hook WordPress get_footer().

<?php

function footer_style() {

    wp_enqueue_style('design-personalizado', '/wp-content/design.css');

};

add_action( 'get_footer', 'footer_style' );

?>

Entretanto, lembre-se de que adicionar elementos CSS no rodapé do site pode causar problemas de renderização, desconfigurando a página ou fazendo com que ela pareça quebrada. Por este motivo, recomendamos que você primeiro carregue as funções CSS mais importantes na seção do cabeçalho e depois passe para a parte do rodapé.

Adicionando Estilos Inline Dinâmicos

Funções do CSS tipo inline e dinâmico permitem que você adicione estilos personalizados para elementos individuais em uma página na web. O método mais simples de fazer isso é através da função wp_add_inline_style(), que carrega os estilos a partir de um arquivo CSS específico.

No exemplo a seguir, vamos combinar ambas funções wp_enqueue_style() e wp_add_inline_style() para aplicar um estilo personalizado a partir do arquivo design.css e incluir cabeçalhos em negrito.

?php

function theme_style() {

wp_enqueue_style( 'estilo-personalizado', get_template_directory_uri() . '/wp-content/design.css' );

$bold_headlines = get_theme_mod( 'headline-font-weight' ); 

$inline_style = '.headline { font-weight: ' . $bold_headlines . '; }';

wp_add_inline_style( 'estilo-personalizado', $inline_style );

}

add_action( 'wp_enqueue_scripts', 'theme_style' );

?>

Lembre-se de que o estilo inline irá funcionar apenas depois que o arquivo design.css for propriamente enqueued.

Verificando o Status da Stylesheet Enfileirada

Use a função wp_style_is() se você deseja obter mais informações sobre o estado da stylesheet que foi adicionada à queue. Essa função é capaz de verificar se o arquivo CSS de estilo está na fila, enfileirado, registrado ou já pronto para ser exibido (in the queue, enqueued, registered, ready to be displayed).

<?php

function check_styles() {

if( wp_style_is( 'main' ) {

wp_enqueue_style( 'meu-tema', '/custom-theme.css' );

}

}

add_action( 'wp_enqueue_scripts', 'check_styles' );

?>

Inserindo Metadados na Stylesheet

Você também pode utilizar a função wp_enqueue_style com o seguinte snippet de código para enqueue uma stylesheet CSS com metadados de título:

<?php

function theme_extra_styles() {

wp_enqueue_style( 'add-metadata', '/wp-content/design.css' );

wp_style_add_data( 'add-metadata', 'title', 'Meu Título Incrível' );

}

add_action( 'wp_enqueue_scripts', 'theme_extra_styles' );

?>

Neste exemplo, utilizamos a função wp_style_add_data() e então adicionamos um título à stylesheet CSS.

Cancelando o Registro de Arquivos de Estilo 

É importante excluir o registro de arquivos de estilo CSS que você não utiliza mais. Quando múltiplos plugins ou temas enfileiram o mesmo arquivo de estilo, podem acabar gerando conflitos entre si e problemas de exibição no site.

O código indicado abaixo faz o processo de excluir o registro e retirar da fila (deregister e dequeue) um estilo específico, substituindo-o com uma nova stylesheet:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );

function remove_default_stylesheet() {

    wp_dequeue_style( 'original-enqueue-stylesheet-handle' );

    wp_deregister_style( 'original-register-stylesheet-handle' );

    wp_register_style( 'novo-estilo', get_stylesheet_directory_uri() . '/new.css', false, '1.0.0' ); 

    wp_enqueue_style( 'novo-estilo' );

}

Conclusão

A função wp_enqueue_style() é uma parte essencial do desenvolvimento de sites WordPress. Ela oferece uma maneira simples e eficiente para fazer o carregamento de stylesheets no seu site. 

Neste tutorial, explicamos o que é e como funciona a função wp_enqueue_style(), além de apresentar alguns exemplos de como você pode utilizá-la para personalizar a aparência do site e melhorar a velocidade de carregamento das páginas.Esperamos que você tenha achado esse tutorial útil e que agora esteja pronto para utilizar a função wp_enqueue_style() em seus projetos WordPress com sucesso. Caso ainda possua alguma dúvida ou sugestão, confira nossa página de tutoriais sobre WordPress ou deixe um comentário na seção abaixo.