In WordPress, invece di aggiungerli semplicemente all’intestazione, dovresti usare un metodo chiamato enqueueing che è un modo standardizzato di gestire le tue risorse con il bonus aggiunto di gestire le dipendenze. Scopri come farlo qui sotto usando wp_enqueue_scripts.

• Come funziona l’enqueueing
• Fondamenti di enqueueing con wp_enqueue_scripts
• Gestione delle dipendenze
• Carica gli script nel Footer
• Specificare i media per gli stili

Come funziona l’enqueue

Ci sono due passi da fare quando si enqueue uno script o uno stile. Prima lo registrate – dite a WordPress che è lì – e poi lo mettete effettivamente in enqueue, che alla fine lo emette nell’intestazione o appena prima del tag di chiusura del corpo.

La ragione per avere due passi ha a che fare con la modularità. A volte vorrete far sapere a WordPress di una risorsa, ma potreste non volerla usare in ogni pagina. Per esempio: Se state costruendo uno shortcode per una galleria personalizzata che usa Javascript, avrete effettivamente bisogno di caricare il JS solo quando lo shortcode viene usato – probabilmente non su ogni pagina.

Il modo per far sì che questo accada è quello di registrare prima lo script, e solo quando lo shortcode viene mostrato (lettura consigliata: The Ultimate Guide to WordPress Shortcodes).

Fondamenti di enqueueing con wp_enqueue_scripts

Per enqueue script e stili nel front-end avrete bisogno di usare l’hook wp_enqueue_scripts. All’interno della funzione agganciata puoi usare le funzioni 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' );}

Nell’esempio sopra ho registrato ed enqueue le risorse nella stessa funzione, che è un po’ ridondante. Infatti, potete usare le funzioni enqueue per registrare ed enqueue subito, usando gli stessi argomenti che usate nelle funzioni register:

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 dovessi separare le due funzioni, lo farei usandole in hook diversi. In un esempio reale potremmo usare l’hook wp_enqueue_scripts per registrare le risorse e la funzione dello shortcode per metterle in coda.

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}

Gestione delle dipendenze

Il meccanismo di enqueueing di WordPress ha un supporto integrato per la gestione delle dipendenze, usando il terzo argomento di entrambe le funzioni wp_register_style() e wp_register_script(). Si possono anche usare subito le funzioni di enqueuing se non è necessario separarle.

Il terzo parametro è un array di script/stili registrati che devono essere caricati prima che la risorsa corrente sia enqueued. Il nostro esempio sopra si baserebbe molto probabilmente su jQuery, quindi specifichiamolo ora:

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' ) );}

Non abbiamo bisogno di registrare o enqueue jQuery noi stessi perché è già una parte di WordPress. Puoi trovare un elenco di script e stili disponibili in WordPress nel Codex.

Se hai delle dipendenze tue, dovrai registrarle, altrimenti i tuoi script non verranno caricati. Ecco un esempio:

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' ) );}

Immaginiamo che il primo script sia una galleria, il secondo è un’estensione di quello che fa aprire le immagini in una lightbox. Notate che anche se il nostro secondo script si basa su jQuery, non abbiamo bisogno di specificarlo, poiché il nostro primo script caricherà già jQuery. Detto questo, può essere una buona idea dichiarare tutte le dipendenze, giusto per essere sicuri che nulla possa rompersi se ci si dimentica di includere una dipendenza.

WordPress ora sa di quali script abbiamo bisogno e può calcolare in quale ordine devono essere aggiunti alla pagina.

Carica gli script nel piè di pagina

Quando si può fare a meno di caricare gli script nel piè di pagina, si dovrebbe. Questo aumenta i tempi apparenti di caricamento della pagina e può evitare che il tuo sito web si blocchi durante il caricamento degli script, specialmente se contengono chiamate AJAX.

Il meccanismo di enqueuing può aggiungere gli script nel piè di pagina usando il quinto parametro (il quarto è un numero di versione opzionale). Il nostro esempio sopra caricherebbe gli script nel piè di pagina se lo modifichiamo leggermente.

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 );}

Specificando true come quinto parametro si mettono gli script nel piè di pagina, usando false, o omettendo il parametro si caricano le cose nell’intestazione. Come ho detto prima, quando possibile, caricate gli script nel piè di pagina.

Specificare i media per gli stili

Utilizzando il quinto parametro delle funzioni style register/enqueue potete controllare il tipo di media per cui lo script è stato definito (stampa, schermo, palmare, ecc.). Usando questo parametro puoi limitare il caricamento degli stili al particolare tipo di media, che è un piccolo trucco di ottimizzazione.

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' );}

Per una lista completa dei tipi di media che possono essere usati, dai un’occhiata alle specifiche CSS.

Summary

L’enqueue delle risorse è un modo potente di gestirle. Dà a te, e ad altri creatori di plugin/tema, più controllo sul sistema nel suo complesso e toglie la gestione delle dipendenze dalle tue mani.

Se questo non bastasse, è il modo di aggiungere le tue risorse, molti marketplace di temi e lo stesso repository di WordPress non approverà il tuo lavoro se non usi questo metodo.