No WordPress, ao invés de simplesmente adicioná-los ao cabeçalho, você deve usar um método chamado enqueueing que é uma forma padronizada de lidar com seus ativos com o bônus adicional de gerenciar dependências. Saiba como fazer isso abaixo usando wp_enqueue_scripts.

Como Funciona o Enqueueing

Há dois passos dados ao se consultar um roteiro ou um estilo. Primeiro você o registra – diga ao WordPress que ele está lá – e depois você realmente o coloca em fila, o que eventualmente o coloca no cabeçalho ou logo antes da etiqueta de fechamento do corpo.

A razão de ter dois passos tem a ver com a modularidade. Às vezes você vai querer deixar o WordPress saber sobre um ativo, mas você pode não querer usá-lo em todas as páginas. Por exemplo, o WordPress é um recurso: Se você está construindo um atalho de galeria personalizado que usa Javascript, você só precisa carregar o JS quando o atalho é usado – provavelmente não em todas as páginas.

A maneira de fazer isso acontecer é registrar o script primeiro, e só perguntar quando o atalho for mostrado (leitura sugerida: O Guia Final para Atalhos do WordPress ).

Enqueueing Basics Com wp_enqueue_scripts

Para consultar scripts e estilos no front-end você precisará usar o gancho wp_enqueue_scripts. Dentro da função hooked você pode usar as funções wp_register_script(), wp_enqueue_script(), wp_register_style() e wp_enqueue_style().

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );
}

No exemplo acima, eu registrei e coloquei os ativos dentro da mesma função, o que é um pouco redundante. Na verdade, você pode usar as funções de consulta para registrar e consultar imediatamente, usando os mesmos argumentos que você usa nas funções de registro:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );
}

Se eu tivesse que separar as duas funções eu o faria usando-as em ganchos diferentes. Em um exemplo real poderíamos usar o gancho wp_enqueue_scripts para registrar os ativos e a função do atalho para inquirir sobre eles.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) );
    wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );

}

add_shortcode( 'custom_gallery', 'custom_gallery' );

function custom_gallery( $atts ){

    wp_enqueue_style( 'custom-gallery' );
    wp_enqueue_script( 'custom-gallery' );

    // Gallery code here
}

Gestão de Dependências

O mecanismo de enfileiramento do WordPress tem suporte integrado ao gerenciamento de dependência, utilizando o terceiro argumento das funções wp_register_style() e wp_register_script() Você também pode usar as funções de enqueueing imediatamente se você não precisar separá-las.

O terceiro parâmetro é um conjunto de scripts/estilos registrados que precisam ser carregados antes que o ativo atual seja consultado. Nosso exemplo acima provavelmente dependeria do jQuery, então vamos especificar isso agora:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
}

Não precisamos nos cadastrar ou consultar jQuery porque já faz parte do WordPress. Você pode encontrar uma lista de scripts e estilos disponíveis no WordPress no Codex.

Se você tem suas próprias dependências, você precisará registrá-las, caso contrário seus scripts não serão carregados. Aqui está um exemplo:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );
}

Vamos assumir que o primeiro roteiro é uma galeria, o segundo é uma extensão daquilo que faz as imagens se abrirem em uma lightbox. Note que apesar de nosso segundo script depender de jQuery, não precisamos especificar isso, pois nosso primeiro script já irá carregar jQuery. Dito isto, pode ser uma boa idéia declarar todas as dependências, apenas para ter certeza que nada pode quebrar se você esquecer de incluir uma dependência.

O WordPress agora sabe quais scripts precisamos e pode calcular a ordem em que eles precisam ser adicionados à página.

Sempre que você conseguir escapar com o carregamento de scripts no rodapé, você deve. Isso aumenta o tempo aparente de carregamento da página e pode evitar que seu site fique pendurado enquanto carrega os scripts, especialmente se eles contiverem Chamadas AJAX.

O mecanismo de consulta pode adicionar scripts ao rodapé usando o quinto parâmetro (sendo o quarto um número de versão opcional). Nosso exemplo acima carregaria os scripts no rodapé se nós o modificássemos levemente.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true );
    wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );
}

Especificar true como o quinto parâmetro irá colocar scripts no rodapé, usando false, ou omitir o parâmetro irá carregar coisas no cabeçalho. Como mencionei antes, sempre que possível, carregue os scripts no rodapé.

Especificação de Meios para Estilos

Usando o quinto parâmetro das funções estilo registro/enqueue você pode controlar o tipo de mídia para a qual o script foi definido (impressão, tela, handheld, etc.). Usando este parâmetro você pode restringir o carregamento dos estilos para o tipo de mídia em particular, o que é um pequeno truque prático de otimização.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );
function my_plugin_assets() {
    wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );

}

Para uma lista completa dos tipos de mídia que podem ser utilizados, dê uma olhada nas especificações do CSS.

Resumo

A aquisição de bens é uma forma poderosa de lidar com eles. Ele dá a você, e a outros fabricantes de plugins/tema, mais controle sobre o sistema como um todo e tira o gerenciamento de dependência de suas mãos.

Se isso não for suficiente, é a maneira de adicionar seus ativos, muitos mercados temáticos e o próprio repositório WordPress não aprovarão seu trabalho se você não usar esse método.

Daniel Pataki

Oi, meu nome é Daniel, sou o CTO aqui na Kinsta. Você talvez me conheça da Smashing Magazine, WPMU Dev, Tuts+ e outras revistas de WordPress/Desenvolvimento. Além de WordPress e PHP, passo a maior parte do meu tempo com Node, React, GraphQL e outras tecnologias no espaço Javascript. Quando não estou trabalhando para criar a melhor solução de hospedagem do universo, coleciono jogos de tabuleiro, jogo pebolim no escritório, viajo ou toco guitarra e canto em uma banda não muito boa.