3 modi per inserire JavaScript in WordPress
Nota dell’autore: Questo post è stato pubblicato originariamente il 14 settembre 2015, ed è stato modificato il 16 settembre 2018.
L’editor di WordPress formatta automaticamente il testo e restringe le tipologie di tag presenti all’interno del contenuto scritto. Mentre alcuni utenti, che provano manualmente a inserire degli script, lo trovano frustrante, non si tratta di una falla del programma, quanto piuttosto di una misura di sicurezza.
L’obiettivo di un CMS (content management system) come WordPress è quello di separare i contenuti dal design grafico. Il fatto che l’amministratore del sito possa scegliere preventivamente, a livello del tema, le opzioni di formattazione e di layout, previene la possibilità che gli autori che inseriscono contenuti possano modificare il design del sito.
Con JavaScript su WordPress è possibile editare lo stile, il layout e i contenuti al di fuori dei limiti della pagina o del post che stai editando. In realtà, infatti, gli autori non avrebbero restrizioni che gli impedirebbero di aggiungere script di natura maligna.
Mentre questa può essere un’ottima restrizione per un redattore nella media, ci sono invece tante valide ragioni per aggiungere JavaScript a una specifica pagina o post:
- Player – Alcuni riproduttori audio o video hanno bisogno di uno script per mostrare il rettangolo del player nella pagina.
- Pagine interattive – Le pagine interattive e i calcolatori richiedono l’embedding di script di terze parti all’interno del sito.
- Form di terze parti – I form per iscrizione o per lead generation contengono in remoto degli script già caricati che devono essere necessariamente inclusi nell’header, nel corpo o nel footer della pagina.
Come aggiungere JavaScript in WordPress, sia nelle pagine che nei post?
Ora andiamo a vedere tre opzioni per capire come inserire JavaScript in WordPress:
- Disabilitare il filtro WordPress sugli script tags
- Usare un plugin per abilitare il caricamento degli script
- Utilizzare Advanced Custom Fields
Addentriamoci nei dettagli.
Metodo 1: Disabilitare il filtro script tags su WordPress
Se hai fiducia che gli autori dei post sul tuo sito non si metteranno nei guai, puoi disattivare il blocco degli script tags all’interno di JavaScript. Nella sezione wp-config.php, all’interno della tua root web directory, dovrai abilitare i tag personalizzati aggiungendo la seguente stringa di codice:
define( 'CUSTOM_TAGS', true );
All’interno della pagina functions.php, aggiungerai il seguente codice:
function add_scriptfilter( $string ) { global $allowedtags; $allowedtags['script'] = array( 'src' => array () ); return $string; } add_filter( 'pre_kses', 'add_scriptfilter' );
Nota: Ancora una volta, dobbiamo avvisarti circa l’utilizzo di questo metodo. Abilitare i tag script attraverso questa funzione disabilita tutte le feature di sicurezza a qualsiasi livello di autorizzazione.
Metodo 2: Usare un plugin per abilitare gli script automaticamente
Ci sono tantissimi plugin WordPress JavaScripts là fuori, sia per gestire i post che le pagine del tuo sito. A tempo debito, dovrai caricare il tuo JavaScript all’interno degli <head> tag della pagina o dopo il contenuto, vicino al tag </body>.
Alcune volte potresti voler caricare JavaScript su tutto il sito; altre volte invece vorrai caricarlo su una pagina o su un post specifico. Dopo aver testato diversi plugin, quello più pertinente che abbiamo trovato risponde al nome di Scripts n Styles.
Il plugin ti permette di includere gli script su tutto il sito:
Altrimenti puoi inserire gli script nella singola pagina o post.
Il plugin ti consente di includere sia una fonte esterna di script o di copia-incollare il tuo JavaScript entro gli <head> tag o sopra il </body> tag.
Se stai usando questo plugin potresti voler modificare le restrizioni relative agli utenti e includere i collaboratori più che gli autori. Questi ultimi potranno sia pubblicare i post che inserire gli JavaScript live; i collaboratori invece potranno soltanto salvare i post senza però poterli pubblicare.
Metodo 3: Utilizzare Advanced Custom Fields
Advanced Custom Fields è un plugin molto utilizzato che ti consente di implementare i campi personalizzati senza dover elaborare tonnellate di codici.
Installa e attiva il plugin per avere nel tuo menù da amministratore una nuova opzione di menù chiamata “Custom Fields”. Il nostro obiettivo con questo esempio è quello di mostrarti come aggiungere un campo che è disponibile soltanto agli amministratori che hanno incorporato un source file JavaScript o un codice JavaScript tra i tag head o prima del body tag di chiusura.
- Entra in Custom Fields > Custom Fields e clicca su “Add New”.
- Rinomina il “Field Group“. Abbiamo rinominato il nostro “JavaScript Settings”.
- Abbiamo abilitato l’opzione per mostrare questa schermata solo agli Amministratori, assicurandoci che i campi possano essere applicati solamente da questi ultimi sul sito.
- Abbiamo intenzione di mostrare i campi in una sezione sotto all’area del contenuto nell’editor di testo, quindi andremo a selezionare “Standard” nello “style” del “Field Group”.
- Ora dobbiamo aggiungere i nostri campi personalizzati relativi agli Header Script e Footer Script e farli funzionare correttamente. Ci sono due settaggi chiave; il nome del campo che verrà riportato nel codice template e la formattazione. Dovrai impostare la formattazione nella modalità “Convert HTML into tags” in modo che i contenuti che vengono incollati vengano eseguiti correttamente nel template.
A questo punto, i campi verranno visualizzati correttamente all’interno del pannello di Amministrazione quando un amministratore effettua l’accesso. Qualsiasi dato inserito verrà salvato e associato alla pagina o al post in cui è stato salvato o pubblicato. Ad ogni modo, non verranno mostrati nel template finché non si editano i template files.
6. All’interno di header.php nel template attivo, aggiungeremo:
<?php the_field(‘header_script'); ?>
prima del tag </head>
All’interno di footer.php nel template attivo, aggiungeremo:
<?php the_field(‘footer_script'); ?>
prima del tag </body>.
7. Salva i file template, aggiorna la pagina o il post in cui hai inserito JavaScript, e clicca su pubblica. La pagina o il post ora verranno pubblicati con JavaScript inserito nel modo corretto all’interno del template.
L’opzione Advanced Custom Fields offre diverse funzionalità. Potresti voler definire delle regole precise specifiche per un tipo di utenza, per delle pagine pubblicate o template piuttosto che quelle relative agli amministratori o a qualsiasi contenuto presente all’interno del sito. Raccomandiamo calorosamente di limitare l’accesso all’aggiunta di script soltanto a pagine, post e utenti ben selezionati.
Una raccomandazione a proposito di JavaScript su WordPress e SEO
Mentre l’utilizzo di JavaScript può semplificare la vita agli sviluppatori, potrebbe rivelarsi un problema per la SEO. I motori di ricerca online faranno il loro meglio per comprendere, interpretare ed eseguire i tuoi codici JavaScript, ma questo processo è tutto fuorché sinonimo di garanzia.
Una pagina o un post su WordPress apparirà nelle pagine dei risultati sui motori di ricerca (ed eventualmente ben posizionata in ottica SEO) soltanto se i motori riusciranno ad analizzare e “digerire” al meglio il tuo contenuto. Quando JavaScript viene implementato in malo modo, ciò non accadrà. Se il motore di ricerca non riuscirà a scandagliare bene il tuo contenuto, questo non riuscirà a posizionarsi bene sui motori di ricerca.
Per prevenire questo tipo di inconvenienti SEO con JavaScript su WordPress, assicurati che il tuo contenuto sia analizzabile dal crawler del motore di ricerca e che non dia origine a qualche rallentamento. E’ consigliabile utilizzare URL reali e settare il file Robots.txt per abilitare il crawling di JavaScript.
Se sei incerto sullo stato di salute del tuo codice JavaScript, usa l’opzione Fetch as Google.
Il tool Fetch as Google ti consente di testare in che modo Google analizza o renderizza un post o una pagina WordPress. Puoi usare questo tool per vedere se il Googlebot può o meno accedere a una pagina sul tuo sito, vedere come la renderizza e determinare se qualche risorsa della pagina viene bloccata al Googlebot. Questo tool simula il processo di avanzamento e rendering di Google, ed è perfetto per “debuggare” e scoprire possibili problemi con JavaScript all’interno del tuo sito.
