WordPress supporta pienamente JavaScript e la libreria jQuery. Tuttavia, il modo in cui WordPress implementa jQuery può portare a degli errori quando si cerca di eseguire delle funzioni. Uno dei problemi più comuni è l’errore “Uncaught TypeError: $ is not a function”.

La risoluzione di questo errore è relativamente semplice se se ne capisce la causa. L’alias “$” è il fulcro del problema, e jQuery e WordPress offrono diversi modi per aggirarlo in modo da poter eseguire le funzioni di cui si ha bisogno.

In questo articolo spiegheremo cos’è l’errore “Uncaught TypeError: $ is not a function” e quali sono le sue cause. Poi, illustreremo anche come risolvere il problema. Cominciamo!

Cos’è l’errore “Uncaught TypeError: $ is not a Function” in WordPress?

L’errore “Uncaught TypeError: $ is not a function” è un errore JavaScript comune che si verifica quando la libreria jQuery non viene caricata correttamente o c’è un conflitto con altri script che utilizzano il simbolo ‘$’.

In WordPress, questo errore ha più a che fare con il modo in cui il Content Management System (CMS) implementa jQuery e meno con problemi di caricamento.

jQuery è una popolare libreria JavaScript. È ampiamente utilizzata nei temi e nei plugin di WordPress per gestire vari elementi dinamici, animazioni e operazioni AJAX:

Homepage della libreria jQuery
Libreria jQuery

In jQuery, il simbolo “$” è un alias per l’oggetto jQuery, che è l’oggetto principale con cui si interagisce quando si lavora con la libreria. Rende il codice più breve, più leggibile e più facile da scrivere.

L’errore “Uncaught TypeError: $ is not a function” non è semplicissimo da risolvere perché il messaggio di errore visualizzato non è chiaro. A differenza di altri errori di WordPress, questo problema può essere causato da elementi non configurati correttamente sul sito o addirittura da una pagina di errore 404:

Screenshot di una pagina di errore 404 “page not found”
Errore 404 “page not found”

Il modo più efficace per diagnosticare il problema è dare un’occhiata alla console dello sviluppatore o utilizzare i log di debug di WordPress.

Quali sono le cause principali dell’errore “Uncaught TypeError: $ is not a Function”?

L’errore “Uncaught TypeError: $ is not a function” è legato a jQuery. Questo problema si verifica quando una funzione che include il simbolo “$” viene eseguita durante il caricamento del sito web.

Ecco alcune potenziali cause dell’errore:

  1. La libreria jQuery non è stata caricata correttamente. Se la libreria jQuery non è correttamente caricata o accodata, il simbolo “$” non verrà riconosciuto come una funzione valida e verrà lanciato un errore. In genere, questo non è un problema in WordPress perché il Content Management System (CMS) carica la libreria in modo nativo.
  2. Utilizzo di jQuery in modalità noConflict. Per impostazione predefinita, WordPress esegue jQuery in modalità noConflict. Ciò significa che non riconosce il simbolo “$” come nome di una funzione. Per poterlo utilizzare, sarà necessario ricorrere a un escamotage.
  3. Conflitti tra plugin o temi. Alcuni plugin o temi possono avere un codice JavaScript non corretto che interferisce con il funzionamento di jQuery o che utilizza il simbolo “$” in un modo che causa problemi con altri script.

In sintesi, WordPress non è configurato per riconoscere il simbolo “$”. Tuttavia, questo non significa che non sia possibile eseguire codice jQuery all’interno del CMS. Dopo tutto, la libreria fa parte di WordPress. Per evitare problemi con il simbolo “$”, sarà necessario utilizzare un workaround.

Come risolvere l’errore “Uncaught TypeError: $ Is Not a Function” (2 metodi)

Prima di metterci al lavoro, è importante notare che jQuery fa già parte di WordPress. Alcuni tutorial indicheranno di inserire jQuery, ma la libreria fa parte del sistema di gestione dei contenuti (CMS) già da tempo.

Inoltre, WordPress esegue jQuery in modalità “noConflict”. Ciò significa che rilascia il simbolo “$” in modo che altre librerie possano utilizzarlo. Invece di disabilitare la modalità “noConflict”, ecco come affrontare il problema.

1. Usare “jQuery” invece di “$”

Se si incontrano dei problemi nell’utilizzo del simbolo “$” nelle funzioni, è possibile usare “jQuery” al suo posto. Per esempio, ecco come potrebbe apparire una funzione jQuery di base che utilizza “$”:

$(function() {
  // Your code here will run once the DOM is ready
});

In questo caso, una soluzione rapida sarebbe quella di sostituire il simbolo “$” con jQuery. Il codice sarà quindi simile a questo:

jQuery(function() {
  // This code will not trigger the error
});

In alternativa, è possibile “avvolgere” il codice in un’espressione di funzione immediatamente richiamabile che contenga il simbolo jQuery. L’esempio che segue non scatenerà l’errore “Uncaught TypeError: $ is not a function” perché utilizza il simbolo jQuery come involucro:

jQuery(function ($) {
    // You can use $ inside the wrapper
    console.log($('.primary-menu'));
});

Dopo aver apportato queste modifiche al codice, è possibile utilizzare la console di sviluppo del browser o il log di debug di WordPress per verificare se l’errore persiste. In tal caso, potrebbe essere necessario mappare “jQuery” con un altro simbolo per evitare altri errori.

2. Utilizzare un alias personalizzato in jQuery

“$” è l’alias predefinito per l’oggetto jQuery. Tuttavia, poiché WordPress esegue jQuery in modalità noConflict, potrebbe essere necessario mappare un alias alternativo per evitare conflitti con altre librerie.

Questo processo è relativamente semplice, in quanto si può mappare l’alias su un nuovo simbolo con una sola riga di codice:

vvar $j = jQuery;

Il codice sostituisce l’alias predefinito con “$j”, ma si può scegliere qualsiasi altra cosa. Alcuni sviluppatori preferiscono questo approccio rispetto al dover digitare l’intero oggetto “jQuery”, come abbiamo mostrato nel metodo precedente.

Se non siete sicuri di dove aggiungere questo codice, potete leggere il nostro tutorial su Come Aggiungere Codice all’Header e al Footer di WordPress. Tenete presente che anche se registrate un nuovo alias, potrete comunque utilizzare “jQuery” al posto di quel simbolo.

Riepilogo

WordPress permette di utilizzare jQuery sul proprio sito web. Tuttavia, se volete evitare errori come “Uncaught TypeError: $ is not a function”, sarà necessario capire come il CMS implementa la libreria. WordPress utilizza la modalità “noConflict” di jQuery, il che significa che non riconosce il simbolo “$”.

L’errore “Uncaught TypeError: $ is not a function” appare quando si cerca di utilizzare una funzione che chiama jQuery utilizzando “$”. Per aggirare questo problema, è possibile digitare l’oggetto jQuery completo o mappare l’alias su un simbolo diverso per evitare conflitti.

Se utilizzate Kinsta, potete attivare la modalità di debug di WordPress nel cruscotto di MyKinsta per diagnosticare i problemi del sito. Inoltre, tutti i nostri piani offrono un’assistenza di alta qualità che vi aiuterà a risolvere qualsiasi problema possiate incontrare. Scoprite i nostri piani!