Enqueue script di WordPress

Ciao, oggi parliamo di un metodo chiave nello sviluppo di temi e plugin in WordPress che ci consente di aggiungere correttamente script e stili al nostro progetto.

Grazie a wp_enqueue_script possiamo gestire in maniera ordinata le nostre risorse, caricarle in modo rapido ed efficiente e prevenire conflitti tra script e stili diversi.

Come funziona

In base alle nostre esigenze di sviluppo possiamo usare l'accodamento in due modi diversi.

Il primo è quello di registrare le nostre risorse ed accodarle in un secondo momento, oppure accodarle immediatamente.

Registrazione e accodamento:

//function.php
function myStyle(){
wp_register_style( $handle, $src, $deps, $ver, $media );
} 
add_action('wp_enqueue_scripts','myStyle');

function myScript(){
wp_register_script( $handle, $src, $deps, $ver, $args);
} 
add_action('wp_enqueue_scripts','myStyle');

Accodamento senza registrazione:

//function.php
function myAssets(){
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
wp_enqueue_script($handle, $src, $deps, $ver, $args);
}
add_action('wp_enqueue_scripts','myAssets');

enqueue style

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

Questa funzione è dedicata agli stili, si occuperà di caricare i nostri css all'intento del tag head. con i seguenti argomenti:

• handle: (stringa, richiesto) nome della risorsa
• src: (stringa, richiesto) il percorso url
• deps: (array, opzionale) specifica le dipendenze, se il funzionamento di questa risorsa è legata ad un altra.
• ver: (stringa, opzionale) numero di versione della risorsa
• media: (stringa, opzionale) specifica il tipo di media css come “screen”, “handheld” ecc..

//esempio
wp_enqueue_style( 
'css-custom', 
get_bloginfo('stylesheet_directory') . '/dist/mystyle.css', 
array( 'bootstrap-main' ), //questo css dipende da bootstrap-main 
'1.2', 
'all', //specifico il media 
);

enqueue script

wp_enqueue_script( $handle, $src, $deps, $ver, $args );

Questa funziona è dedicata agli script con i seguenti argomenti:

• handle: (stringa, richiesto) nome della risorsa
• src: (stringa, richiesto) il percorso url
• deps: (array, opzionale) specifica le dipendenze, se il funzionamento di questa risorsa è legata ad un altra.
• ver: (stringa, opzionale) numero di versione della risorsa
• args: (array/booleano ,opzionale) ci permette di definire delle strategie di caricamento:
  • array(strategy => 'defer') gli script defer vengono caricati in background ed eseguiti quando il DOM è pronto mantenendo l'ordine di esecuzione con altri script defer.
  • array(strategy => 'async') utile quando lo script non dipende dal DOM o da altri script. Se più script vengono caricati in modo asincrono verranno eseguiti appena saranno pronti senza rispettare alcun ordine.
  • Dichiarando un solo valore booleano true lo script verrà inserito nel footer.

wp_enqueue_script(
'swal', 
'https://cdn.jsdelivr.net/npm/sweetalert2@11', 
array(), //nessuna dipendenza
'1',  
array(
'strategy'  => 'async', 
'in_footer' => true
)
);

localize script

Nel caso in cui dovessimo passare delle variabili php ad un file js possiamo utilizzare la funzione wp_localize_script.

wp_localize_script( $handle, $object_name, $l10n );

Questa "magica" funzione richiede tre parametri:

• handle: (stringa) il nome dello script precedentemente dichiarato
• $object_name: (stringa) il nome dell'oggetto javascript che passiamo
• $l10n: (array) i valori dell'oggetto

//function.php
wp_enqueue_script( 'my-script', 'https://url-to/my-script.js', array('jquery') );

wp_localize_script( 'my-script', 'myData', [
    'ajax_url'  => admin_url( 'admin-ajax.php' ), //usato per effettuare chiamate Ajax
    'param_one' => 'some value',
    'param_two' => 25,
] );

//my-script.js
console.log(myData.param_one);