JavaScript è ormai irrinunciabile nella costruzione dei siti web, ma come integrarlo in un sito WordPress?
Si potrebbe, ad esempio, utilizzare il plugin Header Footer Code Manager oppure lavorarci via codice con il gancio wp_head (vedi articolo Come inserire codice CSS in un sito WordPress solo per gli articoli) ma questi metodi non sono ottimali per la gestione delle dipendenze (ad esempio un pezzo di codice che ha bisogno di jQuery per funzionare).
In generale è meglio che il codice JavaScript sia accodato come uno script a sé stante tramite una richiesta http, soprattutto se deve funzionare in tutte le pagine o in diverse parti del sito, poiché:
- può essere memorizzato meglio nella cache del browser;
- nel caso di WordPress ci sono meno dati nel database (anche se non molti in realtà);
- WordPress prevede un meccanismo di gestione delle dipendenze per gli script accodati.
In questo articolo vediamo come gestire tutto questo tramite il gancio wp_enqueue_scripts; nel primo esempio useremo una libreria basata su jQuery, nel secondo creeremo delle variabili, con valori ottenuti da Php, che saranno richiamate nello script JavaScript.
Gestire le dipendenze
In programmazione informatica si definisce dipendenza un legame esistente tra varie componenti di un’applicazione; il funzionamento di una parte dipende, quindi, dalla presenza di altre. In JavaScript un esempio di dipendenza è una funzione che richiama metodi di jQuery: qualora venisse invocata, in assenza di questa libreria, la console stamperebbe un messaggio di errore.
In WordPress possiamo gestire le dipendenze accodando lo script con wp_enqueue_script(), da invocare in una funzione agganciata a wp_enqueue_scripts. Il primo parametro è un id da assegnare allo script e il secondo è la url di quest’ultimo.
In questo esempio abbiamo una slide implementata utilizzando la libreria Flexslider, una libreria basata su jQuery. È ovvio che quest’ultima deve essere disponibile al fine del corretto funzionamento.
add_action('wp_enqueue_scripts','add_flexslider'); function add_flexslider(){ //script della flexslider. Con l’array ['jquery'], passato come terzo parametro, faccio in modo che la jQuery sia accodata anche se non previsto wp_enqueue_script( 'flexslider-js', plugins_url('/assets/woocommerce-FlexSlider/jquery.flexslider-min.js',__FILE__)), ['jquery'] ); //script per far partire la flexslider con le impostazioni desiderate wp_enqueue_script( 'activate-flexslider', plugins_url('/assets/activate-flexslider.js',__FILE__) ); //css della flexslider fornito con la libreria wp_enqueue_style('flexslider-css', plugins_url('/assets/woocommerce-FlexSlider/flexslider.css', __FILE__) ); //codice css custom per questo specifico sito wp_enqueue_style('flexslider-customcss', plugins_url('/assets/woocommerce-FlexSlider/flexslider-custom.css',__FILE__) ); }
Con wp_enqueue_script viene accodato jquery.flexslider-min.js; nel primo parametro passiamo l’id dello script, nel secondo la url. Dal momento che, come abbiamo detto, questo script necessita di jQuery, passiamo un terzo parametro, un array con gli id di tutte le librerie necessarie. jQuery è già presente nel core di WordPress ed è già registrata, perciò basterà passare il suo id nell’array e verrà accodata se non è stato fatto precedentemente. Per capire meglio il meccanismo della registrazione vedi la documentazione di wp_register_script().
Subito dopo verranno caricati un JavaScript che richiama la flexslider con i parametri necessari, il css della libreria flexslider, un css custom per adattare la slide al layout della pagina. Questo è il codice di activate-flexslider.js.
jQuery(window).load(function() { jQuery('.flexslider').flexslider({ animation: "slide" }); });
Ecco due immagini della slide implementata.
wp_localize_script
Nei siti WordPress può capitare di implementare funzioni JavaScript che abbiano bisogno di valori dinamici che solo Php può fornire (ad esempio le impostazioni di un plugin ricavate da richieste al database). Tuttavia abbiamo visto che alcuni pezzi di codice fanno parte di una dipendenza e che questa può essere gestita solo accodando codici JavaScript a sé stanti che, di contro, non possono incorporare pezzi di codice Php.
Fortunatamente ci torna utile la funzione wp_localize_script(), vediamo in che modo con un esempio.
Poniamo la situazione in cui c’è, nel footer, un form per l’iscrizione alla newsletter che, in fase di invio dei dati, esegue una richiesta ajax. Ecco il codice html del form.
<form id="iscrviti-newsletter"> <div> <label>Nome e cognome <input type="text" name="nome-cognome"></label> </div> <div> <label>Indirizzo email <input type="email" name="email"></label> </div> <div id="wrap-request-result"></div> <div> <input type="checkbox" name="acceptance" value="1"> <small>Autorizzo ad utilizzare i dati forniti secondo le condizioni contentute nella <a href="/privacy-policy/" target="_blank">Privacy Policy</a></small> </div> <div> <button type="submit">Iscriviti</button> </div> </form>
In WordPress, a meno di servirsi delle restAPI, si possono utilizzare i ganci wp_ajax_{$action} e wp_ajax_nopriv_{$action}. Le richieste vanno indirizzate a [url_installazione_sito]/wp-admin/admin-ajax.php, dove [url_installazione_sito] è la url che abbiamo impostato per il nostro sito. Dal momento che questa potrebbe puntare a una sottodirectory, e quindi essere [dominio]/[sottodirectory]/, è bene ricavarla dinamicamente.
Dal momento che il nostro script per la richiesta ajax utilizza jQuery dobbiamo accodarlo come dipendenza di quest’ultima (so che non è necessario usare jQuery per fare richieste ajax ma, oltre ad essere una prassi ancora molto comune, mi serve solo come esempio).
Per far questo prima accodiamo lo script, poi gli diciamo di localizzarlo. Ecco il codice.
//aggancio a wp_enqueue_scripts la funzione per accodare lo script e localizzarlo add_action('wp_enqueue_scripts','add_js_iscrizione_newsletter'); function add_js_iscrizione_newsletter(){ //accodo lo script dichiarandolo dipendenza di jQuery wp_enqueue_script( 'iscrizione-newsletter', plugins_url('iscrizione-newsletter-1.0.0.js', __FILE__), ['jquery'] ,'1.0.0'); //lo script viene localizzato e, prima di stampare il tag per la richiesta http, viene stampato un js inline come un oggetto avente proprietà ajaxurl con la url ricavata da php wp_localize_script( 'iscrizione-newsletter', 'iscrizione_newsletter_obj', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) ); }
ll codice è molto simile a quello visto in precedenza a proposito della flexslider; qui viene però richiamata wp_localize_script() passando due parametri: il primo è il nome che avrà l’oggetto JavaScript (iscrizione_newsletter_obj), il secondo è un array da cui verranno stampati le proprietà e i relativi valori. Quindi, nel codice sorgente del browser, avremo prima uno script JavaScript inline con tale oggetto, poi il tag <script> con la url di iscrizione-newsletter-1.0.0.js. Nel sorgente pagina del browser vedremo:
<script id='iscrizione-newsletter-js-extra'> var iscrizione_newsletter_obj = {"ajaxurl":"https:\/\/articolo-js-css.it\/wp-admin\/admin-ajax.php"}; </script> <script src='https://miosito/wp-content/plugins/codice-js/iscrizione-newsletter-1.0.0.js?ver=1.0.0' id='iscrizione-newsletter-js'></script>
In iscrizione-newsletter-1.0.0.js, di cui non sto a scrivere tutto il codice per brevità, aprirò la richiesta ajax in questo modo
jQuery.ajax({ method: "POST", // specifico la URL della risorsa da contattare url: iscrizione_newsletter_obj.ajaxurl, // resto del codice … });
Link utili
- wp_register_script() → meccanismo per preregistrare gli script al fine di gestire correttamente le dipendenze
- Core-Registered Scripts → script JavaScript molto popolari presenti nel core di WordPress e già registrati. Possono essere accodati con wp_enqueue_script, senza specificare la url, oppure passati come dipendenze per i nostri script.
- Default Scripts and JS Libraries Included and Registered by WordPress → librerie già incluse e registrate in WordPress