Come inserire codice Javascript in WordPress: 3 metodi

Inserire Javascript su WordPress

Durante la creazione di un sito web con WordPress, ti sarà sicuramente capitato di dover inserire del codice Javascript all’interno del sito per gli scopi più disparati, dall’inserimento del codice di Google Analytics, all’utilizzo di script personalizzati.

Dato che WordPress, almeno fino ad oggi, non mette a disposizione nessuno strumento predefinito per l’inserimento di codice Javascript all’interno del sito, in questo articolo vedremo quali sono i metodi per farlo e, sopratutto, come farlo 🙂

Sei in cerca di una live chat per il tuo sito web? Chatra è uno dei migliori programmi di live chat in circolazione, dai un'occhiata.

Inserire script in WordPress

Tecnicamente esistono 3 metodi per inserire codice Javascript in WordPress, due di questi sono validi un po’ per tutti, l’ultimo invece dipende dal tema WordPress che si sta utilizzando.

Inserire script in WordPress mediante l’uso di plugin

Questo è senza dubbio il metodo più veloce per inserire codice Javascript in WordPress, dato che sarà sufficiente installare un plugin e successivamente incollare lo script che vogliamo utilizzare.

Uno dei migliori plugin per eseguire questa operazione è Insert Headers and Footers, un plugin con oltre 1 milione di installazioni nel mondo e di una semplicità disarmante.

Una volta installato ed attivato, sarà sufficiente andare su “Impostazioni-> Insert Headers and Footers” dove avremo a disposizione tre blocchi per inserire il nostro codice.

Inserire script in WordPress con il plugin Insert Headers and Footers
Inserire script in WordPress con il plugin Insert Headers and Footers

Ovviamente il codice Javascript andrà inserito nel blocco di nostro interesse. Se vogliamo far comparire il nostro codice all’interno del tag <head> allora dovremo utilizzare il primo blocco, se invece vogliamo far comparire il codice subito dopo l’apertura del tag <body> utilizzeremo il secondo blocco, l’ultimo blocco invece va utilizzato se vogliamo inserire del codice prima della chiusura del tag </body>.

Una volta incollato il codice sarà sufficiente cliccare sul tasto “Save” per salvare le impostazioni e, se tutto è stato fatto correttamente, il codice Javascript inizierà a funzionare all’interno del sito web.

Inserire script in WordPress mediante l’uso del child theme

Probabilmente la miglior soluzione per inserire codice Javascript in WordPress, dato che sarà possibile personalizzare molti aspetti che vedremo più avanti.

L’unico requisito, in questo caso, è quello di utilizzare un child theme per il sito WordPress. Sconsigliamo fortemente di inserire codice personalizzato andando a modificare i file del tema principale perché verranno automaticamente persi una volta che ci sarà un nuovo aggiornamento del tema. Usa sempre un child theme!

Quindi, tutto ciò che bisogna fare è modificare il file “functions.php” del proprio child theme e inserire questo codice:

function wpspecial_script_header() {
	?>
		<script>
		  // Inserisci qui il tuo codice javascript
		</script>
	<?php
}
add_action('wp_head', 'wpspecial_script_header');

Successivamente basterà inserire il codice Javascript personalizzato al posto della scritta “// Inserisci qui il tuo codice javascript“.

In questo caso, il codice Javascript inserito andrà a posizionarsi all’interno del tag <head> del sito web (lo puoi notare dal gancio utilizzato wp_head() all’ultima riga del codice).

Se invece volessimo far comparire il codice Javascript prima della chiusura del tag </body> e quindi nel footer, potremo utilizzare questo codice:

function wpspecial_script_footer() {
	?>
		<script>
		  // Inserisci qui il tuo codice javascript
		</script>
	<?php
}
add_action('wp_footer', 'wpspecial_script_footer');

Come puoi notare il codice è praticamente identico, cambia solo il gancio in cui il codice andrà a posizionarsi (in questo caso wp_footer() che puoi notare all’ultima riga del codice).

E se volessi mostrare il codice Javascript solo in alcune pagine o articoli del sito?
Niente paura, come ti dicevo prima, utilizzando un child theme è possibile personalizzare tantissimi aspetti di WordPress, tra cui anche questo.

Ipotizziamo di voler inserire del codice Javascript in WordPress solo per una specifica pagina, il codice da incollare nel child theme sarà di questo tipo:

function wpspecial_script_header_pagina() {
	if (is_page('125')) { // Inserisci l'ID della pagina
	?>
		<script>
		  // Inserisci qui il tuo codice javascript
		</script>
	<?php
	}
}
add_action('wp_head', 'wpspecial_script_header_pagina');

Il codice è molto simile ai precedenti, ma con un semplice controllo all’inizio. Quel controllo (if) ci consente di “stampare” il codice Javascript solo nella pagina in cui vogliamo.
In questo caso dovremo trovare e inserire l’ID corretto della pagina affinché il codice funzioni correttamente.

Possiamo fare la stessa cosa anche nel caso in cui si trattasse di un articolo (post) anziché una pagina, il codice da utilizzare sarà questo:

function wpspecial_script_header_articolo() {
	if (is_single('125')) { // Inserisci l'ID della pagina
	?>
		<script>
		  // Inserisci qui il tuo codice javascript
		</script>
	<?php
	}
}
add_action('wp_head', 'wpspecial_script_header_articolo');

Come puoi vedere, cambia solo il nome della funzione in cui effettueremo il controllo, se una pagina (is_page) oppure se un articolo (is_single).

Una volta inserito il codice correttamente, salviamo il file “functions.php” del child theme e andiamo a vedere se il codice Javascript inserito sta funzionando.

Inserire script in WordPress mediante le opzioni del tema

Questa pratica è la meno consigliata, ed anche quella più rara da trovare dato che tutto dipende dal tema WordPress che si sta utilizzando.

Alcuni temi WordPress mettono a disposizione, tra le varie opzioni disponibili, anche un blocco in cui poter inserire del codice Javascript personalizzato (solitamente suddiviso in due blocchi, un per l’header e uno per il footer).

Esempio di tema WordPress con opzione per inserimento codice Javascript
Esempio di tema WordPress con opzione per inserimento codice Javascript

Incollando il codice Javascript nei relativi box, è possibile inserire degli script personalizzati nel sito in maniera molto simile al primo metodo visto precedentemente (quello con l’uso di un plugin).

Per sapere se il tuo tema WordPress ha questa opzione, prova a guardare all’interno del pannello di controllo oppure dai un’occhiata alla documentazione del tema cercando per “Custom JS code” oppure per “Insert custom JS“.

Ripeto, questa opzione non sempre è disponibile nelle opzioni del tema, quindi potresti anche non trovarla. In questo caso basterà utilizzare uno dei due metodi citati precedentemente.

Conclusioni

Bene, abbiamo visto come fare per inserire del codice Javascript in WordPress nei modi più semplici possibili.

E tu? Hai mai dovuto inserire del codice Javascript nel tuo sito WordPress? Quale metodo hai utilizzato? Hai avuto particolari difficoltà? Faccelo sapere nei commenti 😉

Sei in cerca di una live chat per il tuo sito web? Chatra è uno dei migliori programmi di live chat in circolazione, dai un'occhiata.

Piaciuto l'articolo? Condividilo sui social!

Scrivi una risposta

Il tuo indirizzo email non sarà pubblicato.I campi obbligatori sono contrassegnati *