👉 Come risolvere '$ is not a function' in WordPress: 4 modi
Modifichi functions.php, aggiungi un paio di righe di jQuery e il sito va in crash con una schermata bianca. La console mostra: Uncaught TypeError: $ is not a function. Ti suona familiare?
Ogni sviluppatore WordPress incontra questo errore almeno una volta. Copi del codice jQuery funzionante da CodePen o da uno snippet, lo incolli sul tuo sito e WordPress non lo capisce. Il motivo non è un codice difettoso o un conflitto tra plugin. Il motivo è il modo in cui WordPress gestisce jQuery.
Vedremo quattro metodi collaudati per correggere l'errore "$ is not a function", dal wrapper IIFE sicuro fino alla disattivazione completa del noConflict. Ogni metodo include codice pronto all'uso che puoi copiare e incollare.
💡 Panoramica rapida:
- Racchiudi il codice jQuery in una funzione anonima IIFE, il metodo più sicuro e universale
- Usa jQuery document ready con un parametro dollaro per gli script nell'head
- Assegna un tuo alias tramite noConflict, comodo quando il simbolo del dollaro è usato da un'altra libreria
- Disattiva globalmente il noConflict, solo quando non ci sono altre librerie sul sito
Perché l'errore "$ is not a function" si verifica in WordPress
WordPress carica jQuery in modalità noConflict. Questo significa che la variabile $, l'alias breve di jQuery, non è disponibile globalmente. Gli sviluppatori del core di WordPress lo hanno fatto intenzionalmente per evitare conflitti: molte librerie JavaScript (Prototype, MooTools, versioni meno recenti di Bootstrap) usano anch'esse $ come loro abbreviazione principale.
Quando scrivi nel tuo script:
1 $("#element").hide();
WordPress non sa che $ è jQuery. Vede una chiamata a una funzione sconosciuta e restituisce TypeError: $ is not a function. Fuori da WordPress, su una pagina HTML "nuda", questo stesso codice funzionerebbe senza problemi, perché lì jQuery registra $ globalmente.
Tecnicamente, WordPress capisce solo il nome completo: jQuery("#element").hide(). Ma scrivere jQuery invece di $ in ogni riga di uno script di più righe è scomodo, il codice si appesantisce e perde leggibilità. Per fortuna, ci sono quattro modi per aggirare questa limitazione.
Prima di modificare qualsiasi file del tema, fai un backup del tuo sito. Un punto e virgola mancante in functions.php e il sito va giù. Con un backup, puoi annullare le modifiche in un minuto.
Metodo 1: wrapper IIFE, sicuro e universale
Il modo più affidabile per riavere $ negli script WordPress è un'Immediately Invoked Function Expression (IIFE). Passi jQuery come argomento e all'interno della funzione ti riferisci ad esso tramite il familiare $.
Codice per footer.php o inserimento a basso livello (footer del sito):
1 (function($) { 2 // Your jQuery code here 3 $("#element").hide(); 4 })(jQuery);
Cosa succede qui: una funzione anonima accetta il parametro $ e viene immediatamente invocata con l'argomento jQuery. All'interno di questa funzione $ === jQuery, mentre all'esterno $ rimane indefinito. Il conflitto con altre librerie è eliminato.
Questo metodo funziona per gli script nel footer. Se lo script deve essere eseguito nel <head>, usa il metodo 2.
Metodo 2: jQuery(document).ready con parametro $
Quando uno script deve essere eseguito nell'header della pagina (prima del caricamento del DOM), racchiudilo in jQuery(document).ready. Nota: il $ viene passato al parametro della callback, non è un errore di battitura ma un punto chiave.
Codice per header.php o functions.php tramite wp_enqueue_script:
1 jQuery(document).ready(function($) { 2 // Your jQuery code here 3 console.log($); 4 });
Il metodo .ready() attende il caricamento completo del DOM e jQuery passa sé stesso alla callback come $. All'interno di questa callback, $ funziona di nuovo come in un normale ambiente JavaScript. E, a differenza del metodo 1, lo script parte dal <head>, il che è utile per operazioni critiche di inizializzazione.
La maggior parte degli sviluppatori di temi e plugin conosce questa particolarità di WordPress, quindi nei prodotti di qualità vedrai quasi sempre jQuery invece di $, o uno dei wrapper qui sopra.
Metodo 3: crea il tuo alias tramite noConflict
jQuery ti permette non solo di ripristinare $, ma anche di assegnare qualsiasi altro alias breve, ad esempio le variabili $j o jq, o qualsiasi variabile tu preferisca. Questo è comodo quando il sito usa già un'altra libreria che si è presa $.
1 var jq = jQuery.noConflict(); 2 jq("div p").hide(); 3 4 // Another library continues using its own $ 5 $("content").style.display = "none";
Il metodo jQuery.noConflict() libera $ per altre librerie e restituisce jQuery alla tua variabile (jq nell'esempio). Dopo di che, le chiamate si fanno tramite jq(...), mentre $ funziona per la libreria vicina, il conflitto scompare completamente.
Questo approccio è particolarmente utile sui siti dove un tema WordPress convive con un framework JavaScript di terze parti che usa $ per i propri scopi.
Metodo 4: disattivare completamente noConflict (usare con cautela)
Se sai per certo che il sito non ha altre librerie che reclamano $, puoi disattivare la modalità noConflict globalmente:
1 $ = jQuery.noConflict(true);
Dopo questa riga, $ funziona di nuovo come alias globale di jQuery ovunque, in qualsiasi script, in qualsiasi punto della pagina. Tuttavia, questo metodo è il più rischioso. Se in seguito installi un plugin che usa anch'esso $, il sito si romperà con un bug difficile da riprodurre.
Raccomandiamo i metodi 1 e 2 come primari, sono sicuri, isolati e coprono la stragrande maggioranza degli scenari reali. Il metodo 4 è per situazioni in cui mantieni un ampio script legacy e non puoi wrappare ogni funzione separatamente.
Nel video qui sopra, una dimostrazione visiva di tutti e quattro i metodi in azione. Guardalo se preferisci la spiegazione visiva al testo.
⁉️🤔 Domande frequenti
Perché WordPress ha disattivato $ per jQuery in primo luogo?
Gli sviluppatori del core di WordPress hanno attivato
jQuery.noConflict()di default per proteggere i siti da conflitti con altre librerie JavaScript. Prototype.js, MooTools e alcuni framework meno recenti registrano anch'essi una variabile globale$. Se WordPress assegnasse$a jQuery, qualsiasi tema o plugin con una tale libreria romperebbe il pannello di amministrazione o il frontend. WordPress esegue jQuery in modalità noConflict dalla versione 3.6, non è un bug ma una decisione architetturale. La variabile$nello scope globale rimane libera per librerie di terze parti. È esattamente per questo che$("#id")fuori da un wrapper restituirà sempreTypeError.
Posso semplicemente includere jQuery una seconda volta, al di fuori di WordPress?
Tecnicamente sì, puoi includere jQuery tramite un link CDN una seconda volta e questo registrerà
$globalmente. Ma è una cattiva pratica: due versioni di jQuery su una pagina entrano in conflitto, il peso della pagina aumenta e i plugin di WordPress si aspettano esattamente la versione di jQuery registrata tramitewp_enqueue_script. Lavora sempre con la versione di jQuery fornita da WordPress, è testata per la compatibilità con il core e il pannello di amministrazione. Includere jQuery di nuovo significa creare nuovi problemi invece di risolvere quello originale.
Cosa fare se l'errore appare solo su pagine specifiche?
Verifica se la pagina specifica carica uno script di terze parti tramite un plugin o un widget. Alcuni plugin di caching e minificazione riordinano gli script in modo aggressivo e jQuery potrebbe caricarsi dopo il tuo codice. Disattiva i plugin di ottimizzazione uno per uno per trovare il colpevole. Nella maggior parte dei casi, il problema "$ is not a function su una sola pagina" è causato dall'ordine di caricamento degli script. Un plugin di minificazione o caching mette il tuo script prima di jQuery e
$non esiste ancora al momento della chiamata. Soluzione: escludi lo script dalla minificazione oppure wrappalo nell'IIFE del metodo 1, che non dipende dal$globale.
Esiste un plugin già pronto che corregge questo errore?
Non esiste un plugin dedicato "per correggere $ is not a function" e non serve. Il problema si risolve con un wrapper di una riga e installare un plugin separato per questo è eccessivo. Tuttavia, esistono plugin come Code Snippets che ti permettono di aggiungere codice JavaScript e PHP senza modificare i file del tema, il che è più sicuro per i principianti. Code Snippets memorizza il tuo codice nel database, non in
functions.php. Se commetti un errore di sintassi, il plugin annulla automaticamente le modifiche e il sito non va in crash. Ai principianti consigliamo di aggiungere qualsiasi codice JS tramite esso, non modificando i file del tema.
L'errore "$ is not a function" è risolto, e ora?
Concetto principale: il problema non è nel tuo codice e non è in WordPress. Questo è un comportamento standard del CMS e si risolve con un wrapper. Nella stragrande maggioranza dei casi, il metodo 1 (IIFE) o il metodo 2 (.ready() con $) sono sufficienti. Non rompono altri script e funzionano in qualsiasi versione di WordPress, dalla 4.0 all'ultima.
Se lavori spesso con jQuery in WordPress, prendi l'abitudine di iniziare ogni script con (function($) { e terminarlo con })(jQuery);, questo diventerà memoria muscolare in una settimana ed eliminerà per sempre l'errore.
Condividi l'articolo con i colleghi che modificano ancora functions.php per tentativi ed errori, un wrapper già pronto farà risparmiare loro un'ora di debugging.
Un team professionale di scrittori e redattori specializzati nella creazione di contenuti di qualità.