Un paio di giorni fa, subito dopo aver effettuato alcune importanti modifiche a un paio di blog che gestisco, mi sono imbattuto in un problema misterioso: improvvisamente il mio pannello di amministrazione non si riusciva più a caricare correttamente alcuni contenuti dinamici asincroni, come ad esempio il grafico di visite e accessi del "Site Stats" dashboard widget di Jetpack, ovvero l'indicatore di visite e accessi.
Al suo posto compariva infatti la classica "rotellina infinita" di caricamento:
Seguita dal seguente errore in console:
admin-script.js?ver=1.0.0:17
Uncaught TypeError: jQuery(...).typeWatch is not a function
Il Problema
A quanto pare, qualcosa nelle varie operazioni che avevo fatto non era andata a buon fine, privando entrambi i siti del riferimento al plugin jquery.typewatch (che, per la cronaca, serve per analizzare i tempi di pressione dei tasti della tastiera da parte dell'utente) nonostante questo continui ad essere richiesto dal pannello admin di WordPress. Sfortunatamente, nonostante il ragionevole lasso di tempo speso a cercare di comprendere le ragioni della problematica, non sono riuscito a cavare un ragno dal buco in merito alle possibili cause.
La Soluzione
Nell'attesa di avere il tempo di ripristinare un backup funzionante del sito e ripercorrere i passaggi che hanno portato a questa situazione, ho applicato un workaround che mi ha consentito di risolvere temporaneamente il problema. Si tratta di una semplice funzione da aggiungere al file functions.php del proprio tema, che richiama a sua volta la funzione nativa wp_enqueue_script per aggiungere uno script JavaScript personalizzato alla pagina oggetto della request.
Per far sì che questa funzione venga eseguita in tutte le pagine del pannello di amministrazione, è sufficiente collegarla come event handler dell'apposito hook admin_enqueue_scripts nel seguente modo:
|
1 2 3 4 5 6 7 |
/* 2017.10.25 - Added to fix the jquery.typeWatch bug in Admin pages */ function fix_typewatch_bug( $hook ) { wp_enqueue_script( 'jquery_typewatch', 'https://cdnjs.cloudflare.com/ajax/libs/TypeWatch/3.0.0/jquery.typewatch.min.js'); } add_action('admin_enqueue_scripts', 'fix_typewatch_bug'); |
Aggiungendo queste righe di codice al file functions.php il plugin jquery.typewatch sarà caricato in tutte le pagine del pannello di amministrazione: in questo modo ho potuto risolvere agevolmente il mio problema. Se non sapete come modificare il file functions.php, sappiate che basta andare su Aspetto > Editor dal pannello di amministrazione di WordPress: nel caso in cui stiate utilizzando un tema figlio (child theme), cosa peraltro altamente consigliata se prevedete di effettuare modifiche al vostro tema, vi consiglio di dare un'occhiata a questo articolo per maggiori istruzioni.
Aggiungere file CSS
Pur non essendo strettamente legato al problema in esame, può essere utile sapere che è possibile utilizzare la stessa tecnica di cui sopra è possibile aggiungere anche file CSS. E' sufficiente utilizzare la funzione wp_enqueue_style in aggiunta o in sostituzione della funzione wp_enqueue_script utilizzata in precedenza, nel seguente modo:
|
1 2 3 4 5 6 7 |
/* 2017.10.25 - Added to fix the jquery.typeWatch bug in Admin pages */ function add_custom_css_file( $hook ) { wp_enqueue_style( 'your_custom_css_file', 'https://yoursite.com/your_custom_css_file.css'); } add_action('admin_enqueue_scripts', 'add_custom_css_file'); |
Aggiungere JS e CSS a tutte le pagine
Nel caso non ci si voglia limitare alle pagine del pannello di amministrazione ma si voglia aggiungere uno script a tutte le pagine, è sufficiente sostituire l'hook admin_enqueue_scripts con wp_enqueue_scripts :
|
1 2 3 4 5 6 7 |
/* 2017.10.25 - Added to fix the jquery.typeWatch bug in Admin pages */ function add_custom_css_file( $hook ) { wp_enqueue_style( 'your_custom_css_file', 'https://yoursite.com/your_custom_css_file.css'); } add_action('wp_enqueue_scripts', 'add_custom_css_file'); |
Per il momento è tutto: felice sviluppo!
