Come correggere gli errori JavaScript in WordPress

In qualità di proprietario di un sito WordPress, incontrerai occasionalmente errori che potrebbero impedire al tuo sito di funzionare correttamente. Questi problemi di JavaScript possono essere difficili da risolvere, specialmente per i principianti online.

JavaScript è una parte cruciale dei temi e dei plugin di WordPress. Ciò significa che i problemi relativi a JavaScript possono rapidamente interrompere le funzionalità principali, rallentare il tuo sito o influire sull'esperienza utente.

In questa guida, ti mostrerò come trovare e correggere gli errori JavaScript in WordPress, dall'individuazione nella console del browser all'isolamento dei conflitti di plugin e temi e all'esecuzione di WordPress in modalità di debug sicura.

Come correggere gli errori JavaScript in WordPress

Di solito trovi la causa di un errore JavaScript in pochi minuti, una volta che sai dove cercare. Di seguito sono riportati i cinque posti che controllo per primi, oltre ad alcune abitudini che aiutano a prevenire questi errori in futuro.

Come identificare e risolvere i problemi di JavaScript

Gli errori JavaScript possono verificarsi per una varietà di motivi. Ti mostrerò i posti migliori dove cercare per scoprire cosa sta causando il problema sul tuo sito.

1. Utilizzo degli strumenti per sviluppatori del browser

La console del browser è la tua migliore amica quando si tratta di identificare errori JavaScript. Ecco come accedervi:

Per prima cosa, apri la pagina in cui stai riscontrando l'errore JavaScript. Quindi fai clic con il pulsante destro del mouse in un punto qualsiasi della pagina e fai clic su Ispeziona per aprire il menu degli sviluppatori del tuo browser.

Se preferisci usare una scorciatoia da tastiera, premi Cmd+Option+J su Mac (o Ctrl+Shift+J su Windows) per Chrome. In Firefox, l'equivalente è Cmd+Option+K o Ctrl+Shift+K.

Una volta qui, naviga nella scheda Console per visualizzare gli avvisi relativi a JavaScript. Se non vengono visualizzati errori, potrebbe essere necessario ricaricare la pagina.

I problemi JavaScript appaiono tipicamente in testo rosso nella console. Durante la risoluzione dei problemi, cerca messaggi che forniscano indizi su quale script, file o funzione sta causando il problema.

Una volta identificati gli errori JavaScript nella console, puoi risalire alla loro origine. Ecco alcuni degli errori più comuni che probabilmente vedrai nella console del tuo browser.

• Uncaught ReferenceError: jQuery is not defined: Uno script ha tentato di utilizzare jQuery prima che venisse caricato, o non è stato caricato affatto. I temi a blocchi basati sull'Editor del sito non accodano jQuery a meno che un plugin non lo richieda.
• Uncaught TypeError: $ is not a function: jQuery è stato caricato in modalità noConflict e uno script ha comunque utilizzato la scorciatoia $. L'incapsulamento dello snippet in un blocco jQuery(function($) { }) di solito lo risolve.
• Uncaught SyntaxError: Un errore di battitura o un carattere errante nel codice personalizzato. La console indica il file e il numero di riga, il che è normalmente sufficiente per trovarlo.
• Uncaught TypeError: Cannot read properties of undefined: Lo script è stato eseguito prima che l'elemento a cui fa riferimento esistesse nella pagina. Questo è comune quando uno snippet viene caricato nell'intestazione invece che nel piè di pagina.
• Un 404 o net::ERR_ABORTED su un file .js: Il file non è stato caricato affatto. Controlla la tua CDN, il tuo plugin di cache o un file che è stato rinominato durante un aggiornamento.

Nella maggior parte dei casi, il problema mostrerà il file/la posizione da cui ha origine l'errore. Da lì, puoi capire se è correlato a un plugin o a un tema.

2. Identificazione dei conflitti tra plugin o temi

La maggior parte degli errori JavaScript in WordPress è spesso causata da conflitti tra plugin o temi. Se più plugin o temi utilizzano librerie JavaScript incompatibili o funzioni duplicate, possono creare problemi.

Ecco come risolvere i conflitti:

Conflitti tra temi

Ti consiglio di passare temporaneamente a un tema WordPress predefinito. Almeno uno di questi temi è tipicamente preinstallato sul tuo sito WordPress. Sono sempre nominati in base all'anno (ad esempio, Twenty Twenty-Six).

Per attivare uno dei temi predefiniti di WordPress, vai su Aspetto » Temi dalla tua bacheca di WordPress. Quindi, passa il mouse sopra un tema predefinito e fai clic su Attiva.

Se i problemi scompaiono dopo aver cambiato tema, è probabile che ci sia un problema con il tuo tema WordPress.

La soluzione immediata è controllare gli aggiornamenti. Se è disponibile una nuova versione, fai clic sul link Aggiorna ora per aggiornare il tuo tema.

Spesso, un aggiornamento del tema potrebbe aver risolto problemi critici di JavaScript. Se il problema persiste, consiglio di contattare lo sviluppatore del tema e passare temporaneamente a un nuovo tema.

WPForms documenta anche i conflitti comuni dei temi che si presentano più frequentemente.

Conflitti tra plugin

Se passare a un tema predefinito non risolve l'errore, il passo successivo è verificare i conflitti dei plugin.

Per farlo, dovrai disattivare tutti i plugin sul tuo sito e verificare se l'errore JavaScript persiste. Per una guida più completa, consulta la nostra guida su come testare conflitti tra temi o plugin.

Per questo, vai su Plugin » Plugin installati e fai clic sulla casella di controllo per selezionare tutti i plugin.

Successivamente, fai clic sul menu a discesa Azioni di massa e seleziona Disattiva.

Quindi, fai clic su Applica per disattivare tutti i plugin sul tuo sito WordPress.

Se l'errore è scomparso, è probabile che uno dei tuoi plugin WordPress sia la causa del problema. Per trovare il plugin difettoso, riattiva i plugin uno per uno. Per farlo, fai clic su Attiva sotto il nome del plugin.

Crea ora il tuo modulo WordPress

Una volta attivato un plugin, verifica se l'errore si ripresenta. Il plugin che hai attivato prima di vedere nuovamente l'errore è probabilmente il colpevole.

Dopo aver identificato il plugin difettoso, ti consiglio di verificare la disponibilità di aggiornamenti. Se ce ne sono, assicurati di aggiornare il plugin.

Lo sviluppatore del plugin potrebbe aver rilasciato un aggiornamento che risolve il problema. Ma se non ci sono aggiornamenti disponibili, considera l'eliminazione del plugin difettoso e il passaggio a un plugin alternativo.

3. Utilizzo degli strumenti di debug in WordPress

WordPress include strumenti di debug integrati che possono aiutarti a scoprire problemi JavaScript. Quando abiliti la modalità di debug sul tuo sito, WordPress visualizzerà qualsiasi errore che incontra sul frontend del tuo sito.

Per abilitare la modalità di debug, dovrai accedere ai tuoi file WordPress sul tuo server, tramite FTP, cPanel, o un plugin File Manager FTP.

Una volta aperti i file del tuo sito, dovrai aprire wp-config.php per la modifica. Questo si troverà nella cartella principale del tuo sito. Nel tuo file wp-config.php, imposta WP_DEBUG su true. Questo attiva la modalità di debug di WordPress e registra gli errori.

define( 'WP_DEBUG', true );

WPForms ha una guida più completa su come abilitare il debug in WordPress se desideri maggiori dettagli sulle costanti a tua disposizione.

WordPress include anche costanti aggiuntive che ti consentono di risolvere problemi in altre aree del software principale. Ad esempio, se desideri visualizzare le versioni non minificate degli script principali di WordPress, aggiungi il seguente snippet all'editor di codice di wp-config.php:

define('SCRIPT_DEBUG', true);

Quando SCRIPT_DEBUG è abilitato, WordPress caricherà file come wp-includes/js/script.js invece di wp-includes/js/script.min.js. Questo può essere molto utile durante lo sviluppo o il debug di un sito, poiché fornisce l'accesso completo al codice per un'ispezione e una modifica più semplici.

Se desideri archiviare i log degli errori in un file invece di visualizzarli nel frontend del tuo sito, dovrai abilitare la costante WP_DEBUG_LOG. Per farlo, aggiungi la seguente riga di codice al tuo file wp-config.php.

define('WP_DEBUG_LOG', true);

Quando WP_DEBUG_LOG è abilitato, registra gli errori in un file situato in wp-content/debug.log. Questo log contiene spesso informazioni preziose su quali script non funzionano correttamente.

4. Abilitazione della modalità di risoluzione dei problemi

Se la disattivazione dei plugin o il cambio di tema interrompono il tuo sito web, considera l'utilizzo della Modalità di Risoluzione dei Problemi con strumenti come Health Check & Troubleshooting. Per farlo, dovrai installare e attivare il plugin Health Check & Troubleshooting sul tuo sito.

Il plugin ti consente di attivare la Modalità di Risoluzione dei Problemi senza influire sui visitatori del tuo sito. Questo approccio è particolarmente utile sui siti live dove non puoi permetterti tempi di inattività.

Dopo aver attivato il plugin, vai su Strumenti » Stato del sito dalla tua area di amministrazione di WordPress. Quindi, naviga nella scheda Risoluzione dei problemi.

Ora, fai clic sul pulsante Attiva Modalità di Risoluzione dei Problemi per procedere.

Questo disattiverà tutti i plugin sul tuo sito e imposterà anche il tuo sito su un tema predefinito. Verrai indirizzato alla schermata della Modalità di Risoluzione dei Problemi.

Qui puoi gestire il tuo tema e i tuoi plugin in un ambiente controllato. Se ci sono problemi sul tuo sito, li vedrai nella sezione Avvisi.

Il tuo sito utilizzerà un tema WordPress predefinito dopo aver abilitato la Modalità di Risoluzione dei Problemi.

Ti suggerisco di controllare il tuo sito per vedere se l'utilizzo di un tema predefinito risolve l'errore sul tuo sito. In tal caso, il problema è probabilmente correlato al tuo tema WordPress.

Facendo clic sul menu a discesa Plugin disponibili verranno visualizzati tutti i plugin sul tuo sito. Qui potrai attivare i plugin uno alla volta per verificare conflitti tra plugin. Per attivare un plugin, fai clic su Attiva accanto al nome del plugin.

Segui i passaggi nella sezione risoluzione dei conflitti tra plugin di questa guida per maggiori dettagli. Quando hai finito di risolvere i problemi del tuo sito, fai clic sul pulsante Disattiva Modalità di Risoluzione dei Problemi per riportarlo al suo stato originale.

5. Verifica dei conflitti dei plugin di performance

Se l'errore viene visualizzato solo sul tuo sito live, solo per i visitatori disconnessi, o scompare nel momento in cui disattivi la cache, un plugin di performance è la causa probabile.

Impostazioni come Differisci JavaScript, Ritarda JavaScript, Minimizza e Combina cambiano tutte l'ordine di esecuzione degli script. Quell'ordinamento è importante perché jQuery non può essere differito in sicurezza quando altri script si aspettano che sia pronto.

Plugin come WP Rocket, LiteSpeed Cache, Autoptimize e Perfmatters offrono queste opzioni e spesso vengono attivate da un preset di ottimizzazione con un clic piuttosto che deliberatamente.

I temi a blocchi basati sull'Editor del sito non accodano affatto jQuery a meno che qualcosa non lo richieda esplicitamente, quindi uno snippet che funzionava bene su un tema precedente può interrompersi dopo il passaggio a Twenty Twenty-Six.

Un'interruzione della CDN fa qualcosa di simile, interrompendo i tuoi script ogni volta che un plugin carica jQuery da una CDN anziché da WordPress stesso.

• Per testare questo, disattiva tutte le ottimizzazioni JavaScript nel tuo plugin di prestazioni, cancella ogni cache e ricarica la pagina.
• Se l'errore scompare, riattiva un'impostazione alla volta finché non ricompare. Quindi aggiungi lo script che si interrompe all'elenco di esclusione di quell'impostazione.
• Per jQuery stesso, il percorso da escludere è /wp-includes/js/jquery/jquery.min.js.

Se WP Rocket è il tuo plugin di caching, WPForms ha una documentazione su come configurare le sue impostazioni di ottimizzazione. La documentazione su JavaScript non caricato correttamente copre una lista di controllo più ampia.

Migliori pratiche per evitare errori JavaScript

Di seguito, condividerò alcuni suggerimenti per aiutarti a proteggere il tuo sito WordPress e prevenire problemi relativi a JavaScript.

• Mantieni il tuo sito aggiornato: Aggiornare regolarmente WordPress, il tuo tema e altri plugin può aiutare a evitare conflitti e bug. Spesso, il problema che incontri sarà probabilmente stato risolto da un recente aggiornamento del plugin o del tema. Lasciare accumulare gli aggiornamenti è uno degli errori più comuni di WordPress che incontro.
• Usa un tema child per le personalizzazioni: A volte, l'aggiornamento del tema o dei plugin sovrascriverà gli snippet di codice personalizzati che hai aggiunto al tuo sito. Ciò può comportare funzionalità JavaScript non funzionanti. L'utilizzo di un tema child garantisce che i tuoi snippet personalizzati rimangano invariati.
• Ricontrolla gli snippet JavaScript personalizzati: Se hai aggiunto JavaScript personalizzato nel tuo tema o plugin WordPress, verifica che sia formattato correttamente. Controlla anche che sia compatibile con gli altri script del tuo sito. Suggerisco di racchiudere JavaScript inline con una funzione o di utilizzare jQuery per evitare conflitti.
• Accoda correttamente gli script: Se stai aggiungendo script personalizzati, dovresti accodarli correttamente utilizzando le funzioni di WordPress per prevenire problemi di caricamento. Ecco un esempio:

function my_custom_scripts() { 
          wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js', array('jquery'), null, true); 
} 
add_action('wp_enqueue_scripts', 'my_custom_scripts');

• Testa su più browser: I browser moderni hanno in gran parte standardizzato le loro implementazioni JavaScript. Tuttavia, è ancora importante testare il tuo sito su diversi browser, comprese le versioni precedenti di Internet Explorer. Questo può aiutare a identificare problemi specifici del browser nelle prime fasi del processo di sviluppo web.
• Implementa una corretta gestione degli errori: Le buone pratiche di gestione degli errori nel tuo snippet JS personalizzato possono impedire che molti problemi causino interruzioni importanti. Ciò include l'uso di blocchi try-catch e la fornitura di opzioni di fallback ove possibile.

Successivamente, Esplora i migliori plugin da usare in WordPress

In questo post, ti ho mostrato come identificare e correggere errori JavaScript in WordPress. Come regola generale, ricorda di mantenere aggiornati i plugin e i temi e di seguire le best practice quando aggiungi JavaScript personalizzato.

Inoltre, assicurati di utilizzare plugin consigliati sul tuo sito WordPress ed evita di utilizzare versioni craccate di plugin come il plugin WPForms Pro craccato.

Crea ora il tuo modulo WordPress

Pronto a creare il tuo modulo? Inizia oggi stesso con il plugin per la creazione di moduli WordPress più semplice. WPForms Pro include molti modelli gratuiti e offre una garanzia di rimborso di 14 giorni.

Se questo articolo ti è stato utile, seguici su Facebook e Twitter per altri tutorial e guide gratuite su WordPress.