Conhecendo e entendendo as funções wp_enqueue_script() e wp_enqueue_style()

Há algum tempo estamos realizando uma pesquisa aqui no blog em busca de conhecer melhor as dúvidas dos nossos leitores e que tipo de conteúdo desejam encontrar por aqui. Uma dúvida que encontramos foi a respeito das funções wp_enqueue_script() e wp_enqueue_style(), responsáveis por fazer as chamadas a scripts e estilos ao tema do seu site.

O WordPress nos permite trabalhar com as chamadas de scripts e estilos de uma forma inteligente, permitindo carregar scripts específicos apenas em determinadas páginas que farão o uso destes, contribuindo para o desempenho do site.

As funções nativas wp_enqueue_script()wp_enqueue_style() se beneficiam da action wp_head()wp_footer(). Preparamos o seguinte trecho de código para exemplificar o uso básico das funções.

Obs.: Lembrando que os códigos a seguir devem ser inseridos no functions.php do seu tema.

wp_enqueue_script()

// Incluir scripts necessários no tema
function bloglite_scripts() {
   wp_enqueue_script('nome', get_template_directory_uri() . '/js/nome.js', array('jquery'), '1.0.0', true);
   wp_enqueue_script('outro', get_template_directory_uri() . '/js/outro.js', array(), '1.3.5', false);
}
add_action('wp_enqueue_scripts', 'bloglite_scripts');

Vamos entender este exemplo. Com a função wp_enqueue_script() fizemos duas chamadas a arquivos com extensão .js. Como parâmetros, utilizamos algumas regras da função, são elas:

wp_enqueue_script( $nome, $origem, $dependencia, $versao, $rodape );

$nome: um nome único, algo como um identificador para o script;

$origem: localização do arquivo. No exemplo, chamamos os arquivos nome.js e outro.js localizados dentro do tema com uma segunda função, get_template_directory_uri();

$dependencia: se o script depende de um outro para sua execução. No primeiro exemplo, nome.js seria dependente do jQuery;

$versao: nada diferente da própria versão do script. Caso não seja definido, será atribuído a versão do WordPress;

$rodape: com true ou false como retorno esperado, define se o script será carregado no header ou no footer. Especialistas recomendam que javascripts sejam carregados sempre no rodapé de um site por questão de desempenho, porém, há casos que precisamos carregá-los no todo da página.

Se você tiver um script que será usado apenas em determinada página, é interessante carregá-lo somente nesta página. Para isso, segue um exemplo:

// Incluir scripts na página 'contato'
function bloglite_scripts() {
   if(is_page('contato')) {
      wp_enqueue_script('form-contato', get_template_directory_uri() . '/js/formulario.js', array(), '1.2', true);
   }
}
add_action('wp_enqueue_scripts', 'bloglite_scripts');

É possível fazer inúmeras condições para a execução da função.

wp_enqueue_style()

Não muito diferente do exemplo anterior, carregar folhas de estilos chega a ser ainda mais simples. Veja o exemplo básico:

// Incluir estilos necessários no tema
function bloglite_styles() {
   wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
   wp_enqueue_style('style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'bloglite_styles');

Note a semelhança com o wp_enqueue_script(). Vamos entender os parâmetros:

wp_enqueue_style( $nome, $origem, $dependencia, $versao, $media );

$nome: um nome identificador à folha de estilo;

$origem: caminho do arquivo que será carregado. Podemos utilizar outras funções aqui para obter o caminho, tal como get_stylesheet_uri();

$dependencia: possibilidade de definir a dependência de um outro estilo, porém é pouco utilizado;

$versao: basicamente a versão do arquivo;

$media: define para qual mídia o arquivo é escrito. Alguns usos seria printhandheldscreen, etc.

Vale mencionar que não é preciso definir todos os parâmetros para que um estilo seja carregado no tema, tendo como obrigatório apenas o $nome.

Assim como com scripts, também podemos carregar um arquivo .css específico de uma página. Segue um exemplo semelhante:

// Incluir scripts na página 'sobre nós'
function bloglite_styles() {
   if(is_page('sobre-nos')) {
      wp_enqueue_style('sobre-nos', get_template_directory_uri() . '/css/sobre.css');
   }
}
add_action('wp_enqueue_scripts', 'bloglite_styles');

Esperamos que a dica tenha sido clara e objetiva. Faça seus testes no seu próprio tema e se houver dúvidas, não hesite em nos questionar nos comentários deste post!

5 comentários

  1. Demais. Comecei a aprender sobre customização de templates WordPress no final do ano passado e este artigo foi um dos que mais me auxiliou de início. Conteúdo de qualidade, de fácil entendimento e direto ao ponto. Muito obrigado por compartilhar.

  2. Que artigo maravilhoso, estava tentando entender essa função, li e reli a documentação, mas só aqui consegui finalmente entender certinho, obrigado!

Deixe um comentário para Alexandre Gouveia BeltrameCancelar resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *