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() e wp_enqueue_style() se beneficiam da action wp_head() e 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 print, handheld, screen, 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!
Boas dicas. Me ajudaram bastante!
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.
Que bom, Lucas! Ficamos muito contentes por termos ajudado :)
Que artigo maravilhoso, estava tentando entender essa função, li e reli a documentação, mas só aqui consegui finalmente entender certinho, obrigado!
Ficamos muito contentes que o post tenha ajudado, Andson! :D