Tutto sull’aggiunta di stili e script in WordPress
WordPress offre diversi metodi per aggiungere stili e script per frontend e amministratore, sia per l’aggiunta di file che per l’output diretto di variabili/output. Questo post entra nel dettaglio con esempi di codice su come aggiungere script e stili a WordPress nel modo corretto.
Script e stili possono essere registrati e accodati definendo handle univoci (ID slug), consentendo a WordPress di eliminare i duplicati, come più librerie jQuery, e di gestire le dipendenze (quale stile o script caricare prima di questo e quello) .
Se non c’è bisogno specifico di registrare stili o script, puoi semplicemente accodarli subito, saltando la registrazione. È anche possibile annullare la registrazione o rimuovere dalla coda stili e script (wp_dequeue_script
e wp_dequeue_style
) facendo riferimento all’handle. Di solito aiuta ad aggiungere un numero più alto nella priorità del gancio (facendolo correre dietro al gancio in cui sono stati accodati gli elementi).
PS: l’aggiunta di stili e script a Gutenberg (sia admin che frontend block), è spiegata nel mio post Gutenberg: The Basics.
Aggiunta di script e stili al frontend
Per aggiungere stili e script solo al frontend, usa l’hook wp_enqueue_scripts
. Nonostante il nome dell’hook, viene utilizzato sia per gli script che per gli stili. Ecco un esempio di accodamento di un foglio di stile e di un file javascript in un tema:
add_action('wp_enqueue_scripts', function() {
// Styles
wp_enqueue_style('main-style', get_stylesheet_directory_uri().'/style.css', [], '1.0');
// Scripts
wp_enqueue_script('main-script', get_stylesheet_directory_uri().'/assets/js/main.js', ['jquery'], '', true);
});
Il terzo argomento sia per gli stili che per gli script è un array con dipendenze. Ad esempio, per gli script potresti voler caricare la libreria jQuery prima del tuo file di script. Nota: le installazioni di WordPress vengono fornite con una serie di librerie di script comuni incluse (ad esempio jQuery, jQuery UI, Backbone e Underscore). Finché aggiungi uno di questi handle come dipendenza nel tuo enqueue_script, WordPress li accoderà, quindi non devi aggiungere i tuoi file per queste librerie.
Il quinto argomento per gli script è se lo script debba essere caricato o meno alla fine di <body>
(nel piè di pagina), invece che all’interno del <head>
tag.
Per l’uso in un plug-in è necessario utilizzare altri metodi per ottenere l’URL di un file locale, ad esempio plugin_dir_url(__FILE__)
.
Aggiunta di script e stili all’amministratore
WordPress offre un altro hook, admin_enqueue_scripts
, per aggiungere stili e script solo all’amministratore. Utilizzare gli stessi metodi di cui sopra per la registrazione, l’accodamento e la localizzazione di script e stili:
add_action('admin_enqueue_scripts', function() {
global $pagenow, $post_type;
// Example: $hook == 'edit.php'
// Example: $post_type == 'post'
// wp_enqueue_style or wp_enqueue_script
});
Aggiunta di script e stili alla pagina di accesso
Poiché nessuno degli hook sopra appare nella schermata di accesso dell’amministratore, WordPress offre un hook separato per questo scopo, login_enqueue_scripts
.
add_action('login_enqueue_scripts', function() {
// wp_enqueue_style or wp_enqueue_script
});
Output di variabili Javascript
Per l’output di variabili Javascript (ad es. ottenere percorsi, stringhe tradotte o altre variabili, puoi utilizzare wp_localize_script. Questa funzione richiede un handle di script accodato. Il secondo parametro sarebbe il nome della variabile e il terzo il suo valore. Il valore può essere un array, in questo modo :
All’interno del tuo script hai accesso alle variabili passate, in questo modo:
jQuery(document).ready(function($) {
console.log(Theme_Variables.ajax_url);
});
In questo hook puoi accedere alle variabili globali $pagenow
e $post_type
specificare ulteriormente dove vuoi accodare i tuoi stili e script.
Output di stili in linea
Se hai bisogno di produrre stili in linea, ad esempio per le variabili del tema che hai impostato in Customizer (ad esempio usando get_theme_mod
), puoi emetterli usando la wp_add_inline_style
funzione. Funziona in modo abbastanza simile all’output di variabili Javascript, in cui è necessario fornire un handle di stile accodato:
add_action('wp_enqueue_scripts', function() {
// wp_enqueue_style('main-style'); // Must exist!
$color = get_theme_mod('my-custom-color'); // e.g. #FF0000
$custom_css = "
body {
background: {$color};
}";
wp_add_inline_style('main-style', $custom_css);
});
Aggiunta di tag asincroni agli script
Sfortunatamente non ci sono funzioni o filtri diretti da aggiungere async
ai tag di script, ma possiamo ottenere ciò manipolando la stringa che WordPress utilizza per generare i tag di script per tutti gli script accodati, in questo modo (ricorda di specificare il tuo script tramite il suo handle):
Link utili alla documentazione
- wp_enqueue_scripts (gancio)
- admin_enqueue_scripts (gancio)
- login_enqueue_scripts (gancio)
- wp_enqueue_style
- wp_dequeue_style
- wp_enqueue_script
- wp_dequeue_script
- wp_localize_script
- wp_add_inline_style