Ormai dovrebbe essere chiaro, su questo sito si prende per le corna il toro dello sviluppo Web e lo affrontiamo a testa alta. Molto spesso capita di presentare nuove funzionalità presenti in alcuni linguaggi di programmazione, come le CSS Grid o la sintassi di ES6, ma oggi voglio presentarti una cosa diversa. Qualcosa che riguarda il mio CMS preferito e come utilizzare corettamente JavaScript al suo interno.
Un po’ per uscire dal solito argomento e un po’ perché ci sarà utile nello sviluppo di plugin (che affronteremo in un futuro corso) ho deciso di iniziare di parlarti di un argomento che affligge molti sviluppatori WordPress: il linguaggio JavaScript (JS per gli amici) e le sue librerie.
Nonostante che l’intento di questo articolo non è quello di insegnarti a programmare in JS (cosa che invece faccio nel corso dedicato), voglio comunque mostrarti come sia possibile utilizzare qualsiasi framework JS all’interno di WordPress. Forse ti stai chiedendo il motivo che mi spinge a scrivere un articolo del genere, e ben presto lo scoprirai, ma lasciati rassicurare dicendoti che se sviluppi da anni con JavaScript non avrai alcun problema a implementare le tue applicazioni all’interno di questa piattaforma. Tutto quello che dovrai fare è rispettare alcune linee guida che a breve discuteremo.
Perché, a differenza di quello che puoi pensare, WordPress va molto d’accordo con il codice JavaScript! Puoi sentirti libero di inserire i tuoi script in qualsiasi posizione della pagina e far eseguire complessi script senza alcun problema ma, come spesso accade, esistono molte vie per raggiungere lo stesso risultato, ma quando si lavora con questo CMS dobbiamo rispettare alcune regole.
Quale sarebbe il modo sbagliato?
Prima di vedere come sia possibile implementare il nostro codice JavaScript nel modo più corretto, cerchiamo di capire perché ti dovresti preoccupare di rispettare gli standard WordPress.
In fin dei conti, cosa ci guadagni?
Per capire al meglio le motivazioni che compongono la risposta a questa domanda bisogna fare un passo indietro e analizzare la piattaforma WordPress nella sua completezza. Come ben sai, il nostro amato CMS è cresciuto molto negli ultimi anni e, come abbiamo visto un po’ di tempo fa, porta già con sé un gran numero di librerie JavaScript che utilizza tranquillamente.
Ti sei mai chiesto come funziona la bacheca di WordPress?
Come fa a realizzare tutti quegli effetti di drag’n drop all’interno delle sezioni Widget o nei Menu?
Oppure come fa a salvare in automatico i nostri articoli?
Probabilmente conosci già la risposta ma, se così non fosse, ti svelo immediatamente che si tratta di JavaScript!

Molto spesso non si tratta neanche di codice JavaScript vanilla, questo perché gli sviluppatori WordPress sono molto furbi e raramente reinventano la ruota. Se controlli attentamente il codice della tua bacheca, non ti sarà difficile trovare il framework jQuery caricato al suo interno e alcune librerie incluse in jQuery UI, queste aiutano a gestire alcune funzionalità che le pagine di amministrazione presentano.
La prima cosa che voglio farti capire con tutto questo è che grazie a WordPress hai a tua disposizione un gran numero di librerie JavaScript pronte da utilizzare che ti aiuteranno ad aggiungere effetti e comportamenti che renderanno unico il tuo prodotto. Con tutto questo potere a nostra disposizione si è sentito fin da subito la necessità di fornire degli strumenti per controllarlo e sfruttarlo al meglio.
Probabilmente hai pensato “Dove posso trovare la URL che punta a jQuery?” e sei andato ad aprire il file header.php
. Dato che non era presente all’interno di questo file hai inseririto all’interno dell’elemento head
qualcosa come:
<script type="text/javascript" src="percorso/jquery.js"></script>
Fermati un attimo a pensare! WordPress permette a qualsiasi sviluppatore di sviluppare il proprio tema o plugin, che cosa succede se due plugin hanno bisogno della stessa libreria?
Molto probabilmente ogni singolo sviluppatore andrà a inserire una versione di questa libreria all’interno della cartella del suo progetto, agendo in questo modo, le nostre pagine HTML si troveranno ad analizzare due elementi <script>
che puntano allo stesso file. Benché questo possa sembrare problema risolvibile, dobbiamo stare sempre attenti a risparmiare le risorse del nostro server e offrire il miglior prodotto che possiamo realizzare.
Far caricare due librerie al browser che sta visualizzando la pagina, oltre a comportare dei rischi di compatibilità, non fa altro che avviare uno spreco di tempo causando rallentamenti alla velocità con la quale la pagina viene composta. Avere un sito ottimizzato è sicuramente un vantaggio in questo mondo frenetico.
Per tua fortuna WordPress ha sviluppato un modo che ti permetterà di dirgli quali librerie servono al tuo plugin/tema senza doverti preoccupare troppo di prestazioni o problemi di compatibilità.
Ecco come si inserisce JavaScript in WordPress
Fino a ora abbiamo visto soltanto problemi e difficolta che ci hanno fatto pensare che far lavorare assieme WordPress e JavaScript sia soltanto qualcosa di stupido ma, come spesso accade, gli sviluppatori di questa piattaforma sono in grado di sfornare delle soluzioni davvero ingegnose che permettono di rendere il tuo codice compatibile con questa piattaforma e, allo stesso tempo, di sfruttare le strutture messe a disposizione per velocizzare lo sviluppo e ridurre il carico di lavoro al server.
Andiamo dritti al punto della questione, per implementare una qualsiasi libreria JavaScript avrai bisogno di una singola funzione:
wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );
Ecco la funzione che ti permetterà di fare tutto questo. Grazie a wp_enqueue_script()
sarai in grado di dire a WordPress di quale libreria hai bisogno. La piattaforma sarà in grado di confrontare questa tua richiesta con le altre giunte dai temi o plugin installati e, se non ha ancora caricato il tuo script, provvederà a caricarlo rispettando le relative dipendenze e personalizzazioni.

Grazie a questa unica funzione potrai caricare script che WordPress già conosce e anche registrare i tuoi script personali lasciando che sia la piattaforma a preoccuparsi del resto.
Per capire meglio il comportamento di questa funzione, andiamo a vedere uno per uno i parametri che ci permettono di configurarla:
$handle
– con questo parametro puoi identificare il tuo script con un semplice nome. Questo è l’unico parametro obbligatorio richiesto dalla funzione e può essere un nome che WordPress conosce, come ad esempio `jquery`, oppure può essere un nome che rappresenta il tuo script;$src
– nel caso in cui WordPress non conosca lo script che stiamo caricando, come nel caso di uno script contenente codice JavaScript per il proprio tema/plugin, questo parametro sarà di fondamentale importanza dato che permette di conoscere il percorso allo script. Se invece facciamo riferimento a uno script la piattaforma conosce già questo parametro verrà semplicemente ignorato;$deps
– se, per esempio, vuoi caricare le librerie di jQuery UI che ovviamente dipendono dalla libreria jQuery, questo è il parametro che dovrai utilizzare per dire a WordPress che il codice contenuto all’interno dello script ha bisogno di questa libreria. In questo modo la piattaforma sarà in grado di caricare jQuery prima del tuo script; lo stesso discorso vale per i tuoi script che dipendono da altre librerie che hai introdotto nella piattaforma 😉$ver
– con questo parametro hai la possibilità di definire una versione dello script che potrà essere utilizzata per evitare problemi con la cache di alcuni server;$in_footer
– questo parametro si spiega da solo. Se il valore passato è `true` stiamo dicendo a WordPress che vogliamo caricare questo script soltanto prima della chiusura del tag `body`, con il valore di default (`false`) lasciamo che lo script venga caricato nel `head`.
Tutte le volte che mi trovo a pensarci mi viene un sorrisetto sulle labbra, posso lasciare che sia WordPress a caricare i miei file JavaScript utilizzando una singola funzione; è qualcosa di veramente troppo comodo!
Ovviamente, dato che questa piattaforma porta con se un gran numero di librerie pronte da richiamare, farà sicuramente comodo scoprire quali siano gli $handle
necessari.
Sembra che ci sia tutto il necessario per divertirsi, da una parte abbiamo un sacco di librerie pronte da essere caricate senza preoccuparsi delle dipendenze mentre dall’altra possiamo scrivere tutto il codice che desideriamo e lasciare che sia WordPress a gestirne il loro caricamento.
Purtroppo dobbiamo calmare per un attimo i bollenti spiriti e realizzare che non è tutto rose e fiori.
Attento al $
Con questo titolo non ti sto avvertendo di un improvviso aumento del prezzo del dollaro, mi sto riferendo piuttosto alla possibilità di incontrare qualche problema durante lo sviluppo del tuo codice jQuery.
Se conosci da vicino questo linguaggio, sono sicuro che troverai familiare il seguente codice:
$(document).ready(function(){ $("#box").addClass("rosso"); });
Se invece non conosci jQuery, al momento ti è sufficiente sapere che questo codice aggiunge un attributo class="rosso"
all’elemento HTML con id="box"
, questo è tutto quello che devi sapere perché non è di jQuery di cui voglio parlarti.
Ho aperto questa sezione perché voglio farti prestare attenzione al suo simbolo $
. Con questo simbolo il framework jQuery, come altri framework JavaScript, crea una scorciatoia per richiamare l’oggetto jQuery
che gli permette di dare vita a tutte le sue funzionalità.
Anche se mi ripeto, questo simbolo non è utilizzato soltanto da jQuery e all’interno di WordPress ci sono molte altre librerie JavaScript che lo usano. Quindi il simbolo $
potrebbe creare dei conflitti e mandare il sistema in confusione perché non riesce a comprendere quale libreria desideriamo utilizzare.
Per risolvere questo problema, gli sviluppatori WordPress hanno inserito al suo interno una versione di jQuery denominata noConflict che ti permetterà di far convivere questa con le altre librerie presenti.

C’è da capire che questo conflitto non colpisce soltanto le librerie interne a WordPress, ma interesserà anche il tuo codice rischiando di non farlo funzionare correttamente. Quindi, se vuoi sviluppare in jQuery, dovrai seguire anche tu il culto del noConflict andando a inserire il seguente codice all’interno dei tuoi script in modo da usare il simbolo$j
come sinonimo di $
:
var $j = jQuery.noConflict(); $j(document).ready( function(){ $j("#box").addClass("rosso"); });
Come puoi vedere, prima ancora di andare a scrivere il tuo codice jQuery, devi dichiarare una variabile che conterrà l’oggetto jQuery
in versione noConflict e soltanto a questo punto sarai libero di utilizzare questa variabile ogni volta che desideri utilizzare il simbolo $
. Questa è una soluzione intelligente che ti permetterà di far funzionare qualsiasi tuo script senza doverti preoccupare troppo dei problemi che potrebbero sorgere, ma esiste un altro modo che ti permetterà di continuare a usare il $
…
Anche se la soluzione che abbiamo visto ci permette di accorciare la parola jQuery in due sole lettere ($j
), vogliamo forse mettere in dubbio la comodità che si ottiene nell’utilizzare soltanto il <strong>$</strong>
?!?
Se non vuoi perdere questa funzionalità allora il seguente codice fa proprio al caso tuo:
jQuery(document).ready( function($) { $("#box").addClass("rosso"); });
Personalmente questa è la soluzione che preferisco, tutto quello che devo fare è cambiare leggermente il codice che mi permette di mettere jQuery in ascolto al load della pagina e successivamente sono libero di scrivere tutti i $
che desidero.
Ti consiglio di tenere a portata di mano questo blocco di codice e utilizzare l’antichissima tecnica del copia/incolla che molti di noi sviluppatori coltivano da diversi anni 😉
Conclusioni
Abbiamo terminato questo tuffo nel codice JavaScript e, anche se non abbiamo parlato molto di questo linguaggio, abbiamo sicuramente visto che è possibile far convivere questo codice e le sue svariate librerie all’interno di una piattaforma potente e complessa come WordPress.
Riprenderemo in futuro, sopratutto con lo sviluppo di plugin, questo argomento ma se intanto hai ancora qualche dubbio su come inserire del codice jQuery all’interno del tuo tema o plugin ti invito a scrivere i tuoi problemi all’interno dei commenti.
Se invece la tua curiosità si è posata sul linguaggio di programmazione JavaScript ti consiglio proprio di seguire il nostro corso che ti guiderà nelle basi di questo linguaggio e ti permetterà di gestire in completa autonomia gli eventi che avvengono all’interno del tuo browser.
Fantastico! sto creando un tema WP, ieri sera mi sono spaccato la testa e non capivo perché non riuscivo a far funzionare i miei script jquery. Ho provato, riprovato, e riuscivo a farli funzionare solo sostituendo la libreria jquery di default installata con WordPress con una versione di jQuery più vecchia.
Oggi ho trovato questo articolo e in meno di 5 secondi… Voilà! funziona tutto a dovere!
Grazie mille, acquisterò il tuo ebook, ma mi piacerebbe anche collaborare con te
Ciao Roberto,
mi fa veramente piacere sapere che questo articolo ti sia stato utile e che tu desideri approfondire le tue conoscenze WordPress! Ti ringrazio per voler comprare il mio libro e sarei più che felice di sapere quello che ne pensi una volta che lo hai letto.
Per quanto riguarda la tua partecipazione al progetto aspettati una mia mail a breve che ci facciamo una bella chiacchierata via Hangouts!
A presto, Andrea.
Ovviamente vale solo per il .org non per il.com ? Giusto? Dato che per .com non ho alcuna possibilità di personalizzare il tema, non avendo accesso i file php. Magari è una domanda stupida ma non sono un’esperta e spesso non viene specificata questa info.
Grazie
Ciao Valentina,
si queste istruzioni valgono soltanto per chi utilizza la versione WordPress standalone (quella che puoi scaricare dal .org per capirci). In questo blog trattiamo nello specifico argomenti per sviluppatori WordPress che sono più rivolti alla versione del .org perché, come hai detto anche tu, sul .com non c’è possibilità di modificare il codice.
Ovviamente se un giorno diventi una sviluppatrice di temi per WordPress.com queste informazioni ti saranno comunque utili 😉
Ciao Andrea.
Leggevo il tuo articolo, perchè sto cercando di implementare in wordpress una piccola funzione realizzata in javascript. Seguendo le tue istruzioni ho implementato in function.php il seguente codice “wp_enqueue_script(‘funzione-cookie.js’, ‘http://www.miosito.it/wp-content/themes/dms/js/funzione-cookie.js’, false, ‘2.0’, false ” è corretta?
Ciao Giacomo,
diciamo che stai legando una funzione generale ad un intero dominio. La soluzione più corretta sarebbe quella di usare una funzione come get_template_uri() che restituisce il percorso alla cartella contenente il tuo tema alla WordPress Way. Oltre a questo ti consiglio di consultare l’esempio nella pagina che ti ho collegato dato che presenta il codice che ti permette di aggrapparti all’hook adeguato per aggiungere uno script al tuo tema.
Se non conosci gli Hook ti consiglio di leggerti questo articolo introduttivo e gli altri che puoi trovare all’interno di questo blog.
Ciao andrea,
ho letto l’articolo ed è molto interessante, ma avrei un problema, ho provato a caricare uno script solo per una singola pagina di wordpress; in locale funziona lo script poi lo passo nella pagina di wordpress e non funziona. Da come ho capito dovrei registrare lo script ma non so come fare e non so come richiamarlo nella pagina wordpress una volta registrato e dovrei caricare questo script solo ed unicamente in una pagina di wordpress.
di seguito ti lascio i link per dei codici che uso e come li ho usati
– Codice Jquery: http://pastebin.com/rWbnSYYS
– Codice pagina wordpress: http://pastebin.com/S56U1Mr7
– Codice pagina in locale: http://pastebin.com/KeLUdqAk
Spero tu mi possa aiutare perchè non ci sto capendo molto dato che non sono molto esperto e vorrei cercare di capire come farlo funzionare dato che ho bisogno solo ed esclusivamente in una singola pagina.
Grazie Mille
Grazie mille
Ciao Domenico,
per prima cosa ti faccio i miei complimenti per aver utilizzato PasteBin per aver condiviso con noi il tuo codice, hai contribuito a mantenere il commento pulito e privo di errori 🙂
Venendo invece al tuo problema diciamo che dal mio punto di vista ci sono alcuni errori o pratiche che potrebbero essere migliorate. Per prima cosa ti sconsiglio di utilizzare la libreria jQuery dalla CDN di Google perché questa non controlla i conflitti tra diverse librerie JavaScript. Dato che WordPress porta con se diverse librerie JS e che jAuery è già inserito no modo noConflict ti consiglio di utilizzare quella.
Cercando di aiutarti ho creato due Gist (preferisco questo a PasteBin 😉 ) dove troverai il codice che ti consiglio di inserire all’interno di
functions.php
e quello che dovrai inserire all’interno del tuo file JavaScript che creerai al posto di inserire codice jQuery in linea, questo ti aiuterà anche sotto altri punti di vista.Seguendo i passi che ti ho appena suggerito tutto dovrebbe funzionare correttamente e se leggi nel dettaglio questo articolo dovresti capire come mai ci è utile utilizzare un codice jQuery in noConflict ma se ti è rimasto qualche dubbio non esitare a chiedere 😉
wp_enqueue_script e wp_register_script().
Un piccolo aiuto per capire bene la differenza.
Si registra uno script quando si vuole utilizzarlo come dipendenza di una’altro script che si vuole mettere in coda utilizzando wp_enqueue_script?
Tendenzialmente è consigliato usare prima
wp_register_script()
perché permette di registrare un tuo script e farlo conoscere a WordPress, successivamente potrai richiamarlo attraversowp_enqueue_script()
e assegnarlo come dipendenza anche agli altri script 😀Spero di aver risolto il tuo dubbio ma se così non dovesse essere continua pure a chiedere 😉
Ciao Andrea e grazie per il post, lo spieghi meglio del codex di WP 😉
Vorrei chiedere un piccolo aiuto su una questione, sostanzialmente sono in fissa perchè sto cercando di sostituire la prima sezione del tema Zerius (http://it.wordpress.org/themes/zerius/ child di zerif-lite) con una animazione Javascript come queste: http://tympanus.net/codrops/2014/09/23/animated-background-headers/
è una cosa fattibile? Come dovrei procedere?
Ciao Marco,
certo che potrai realizzare una soluzione del genere ma per farlo devi essere padrone del codice e sapere dove mettere le mani. Dal mio punto di vista con un
wp_enqueue_script()
colleghi il file JS proposto dal tutorial e lo modifichi per selezionare la sezione del tema che vuoi modificare.Purtroppo non conosco il tema in questione e non per farmi pubblicità, ma se sei interessato al codice abbiamo aperto una scuola dedicata dove ogni mese carichiamo un nuovo corso: skillsAndMore
Buondì
grazie per la tua guida ma forse le cose qui sopra richieste dai altri utenti non si avvicinano allamia richiesta
in breve vorrei inserire un java script. Vorrei caricare la libreria come richiesta ma non mi è chiara la sintassi da eseguire.
sarebbe giusto così:
wp_enqueue_script( ‘//assets.pinterest.com/js/pinit.js’,$in_footer );
in lato pratico sarebbe da caricare il script pinit.js :
Ciao Manuel,
se sostituisci
$in_footer
contrue
, visto che è sicuramente meglio caricare questa libreria dopo che il DOM è stato generato, allora credo proprio che non avrai alcun problema. Piccola cosa per essere sicuri che i tu abbia appreso bene i concetti dell’articolo, assicurati di inserire sempre un handle per lo script che stai inserendo perché è un parametro obbligatorio della funzione e altrimenti afrai non pochi problemi.Ciao Andrea,
mi aiuti a far funzionare anche in WordPress, questo codice che funziona egregiamente in HTML. Anche in modalità compatibile, non riesco a farlo funzionare.
Grazie
EDIT
Ho sostituito il blocco di codice con questo Gist all’interno del quale trovi il tuo codice in old-script.js e anche l’esempio che ti suggerisco come new-script.js.
Ciao Mirko,
ho provveduto a portare il tuo codice su Gist assieme al mio suggerimento.
Come puoi vedere probabilmente il tuo codice non funziona perché anche il primo avvio viene richiamato jQuery utilizzando direttamente il $ e potrebbe causare problemi. Se continua prova a sostituire tutti i simboli
$
conjQuery
e fai un test.Altre cose che devi tenere in considerazione sono:
.datepicker()
è un metodo di jQuery UI, sei sicuro di averlo caricato e segnalato come dipendenza?Poi una mia piccola curiosità, è codice preso da BootStrap? Hai implementato tutto quello che serve nel modo corretto?
Questi problemi capitano spesso per inesperienza. Anche io ho perso molto tempo all’inizio perché non sapevo bene quello che facevo ma studiare un po’ JavaScript è stato utile anche per quello 😉
Piccola nota che non è rilevante ai fini della tua richiesta, ti consiglio di dare una veloce lettura a questo precedente articolo dove potrai scoprire alcuni degli strumenti più utili per condividere codice online. Spero che tu possa beneficiare dal loro utilizzo.
Ciao, non mi funziona, in functions.php ho messo wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); (senza gli apici interni).
Questo codice funziona ma non trova il codice jQuery che dovrebbe rendere più lento il movimento. L’ho inserito in una pagina di prova in WP.
Ciao Alberto,
per prima cosa mi sono permesso di modificare il tuo commento togliendo il codice e pubblicandolo su Gist, uno strumento molto utile per condividere il codice che trovi descritto in questo articolo.
Detto questo all’interno del tuo
functions.php
il codice non viene caricato perché hai bisogno di agganciarlo ad un Hook. Come ho spiegato in questo articolo gli Hook sono delle strutture molto interessanti che WordPress ci offre per agganciarci in punti ben definiti nell’esecuzione della nostra piattaforma.Nel tuo caso specifico dovresti sfruttare l’Hook
wp_enqueue_scripts
per far collegare il tuo codice JavaScript nel momento in cui la piattaforma carica i file di questo tipo. Trovi un esempio concreto in questo Gist.Creata la funzione PHP che si aggancia al corretto Hook sarai in grado di richiamare i file presenti nella cartella del tuo tema indicando il percorso grazie alla funzione
get_stylesheet_directory()
. Questa è una delle ultime funzioni introdotte in WordPress per identificare i percorsi ai file inclusi in un tema o plugin, se vuoi approfondire ti consiglio questa registrazione della talk che ho dato al WordCamp Torino sullo stesso argomento.Resto a tua disposizione se hai bisogno di maggiori informazioni e non dimenticare che come Skillato avrai la possibilità di consultare tutti i corsi e di avere il supporto diretto tramite il nostro canale Slack e il forum interno a questa piattaforma.