No WordPress, em vez 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 de gerenciamento de dependências adicionado. Saiba como fazer isso abaixo usando wp_enqueue_scripts.

• Como funciona o Enqueueing
• Bases de Enqueueing Com wp_enqueue_scripts
• Gerenciamento de dependências
• Load Scripts no Rodapé

>

• Meios de Estilos Especiais

Como funciona o Enqueueing

Existem dois passos quando se pergunta um guião ou um estilo. Primeiro você registra-o – diga ao WordPress que ele está lá – e depois você realmente o enqueue, o que eventualmente o coloca no cabeçalho ou pouco antes da tag de fechamento do corpo.

O motivo de ter dois passos tem a ver com modularidade. Às vezes você vai querer deixar o WordPress saber sobre um recurso, mas você pode não querer usá-lo em todas as páginas. Por exemplo, você pode querer que o WordPress não seja usado em todas as páginas: 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 é registrando o script primeiro, e somente quando o shortcode for mostrado (leitura sugerida: The Ultimate Guide to WordPress Shortcodes).

Enqueueing Basics With wp_enqueue_scripts

Para questionar 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 inquiri os ativos dentro da mesma função, o que é um pouco redundante. Na verdade, você pode usar as funções de enfileirar para registrar e enfileirar 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 fosse separar as duas funções eu o faria usando-as em ganchos diferentes. Em um exemplo do mundo real poderíamos usar o gancho wp_enqueue_scripts para registrar os ativos e a função de atalho para enquadrá-los.

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}

Gerenciamento de dependência

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

O terceiro parâmetro é um conjunto de scripts/styles registrados que precisam ser carregados antes que o ativo atual seja enfileirado. Nosso exemplo acima provavelmente dependeria de jQuery, então vamos especificar que 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 registrar ou perguntar jQuery porque ele já faz parte do WordPress. Você pode encontrar uma lista de scripts e estilos disponíveis no WordPress no Codex.

Se você tiver dependências próprias, 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 script é uma galeria, o segundo é uma extensão daquilo que faz as imagens se abrirem em uma lightbox. Note que apesar do nosso segundo script depender de jQuery, não precisamos especificar isso, pois nosso primeiro script já 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.

WordPress agora sabe quais scripts precisamos e pode calcular qual ordem eles precisam ser adicionados à página.

Load Scripts In The Footer

Quando você puder escapar com o carregamento de scripts no rodapé, você deve. Isto aumenta o tempo aparente de carregamento da página e pode evitar que seu website 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 o modificarmos ligeiramente.

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 anteriormente, sempre que possível, carregar scripts no rodapé.

Specifying Media For Styles

Usando o quinto parâmetro das funções de registro/enqueue de estilo você pode controlar o tipo de mídia para a qual o script foi definido (print, screen, handheld, etc.). Usando este parâmetro você pode restringir o carregamento dos estilos ao tipo de mídia em particular, o que é um pequeno truque 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 usados, dê uma olhada nas especificações CSS.

Sumário

Enqueueing assets é uma maneira poderosa de lidar com eles. Ele dá a você, e a outros criadores 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 foi suficiente, é a maneira de adicionar seus ativos, muitos mercados de temas e o próprio repositório WordPress não aprovará seu trabalho se você não usar esse método.