Come aggiungere JavaScript personalizzato in WordPress

Uno dei modi per personalizzare il tuo sito, è sicuramente quello di aggiungere JavaScript personalizzato in WordPress. Tuttavia, se sei alle prime armi, non è un’operazione del tutto scontata, specie se sei abituato ad aggiungere solo del CSS tramite la personalizzazione del tema.

In questo articolo ti spiegherò un paio di metodi per aggiungere JavaScript personalizzato in WordPress, e potrai così scegliere il tuo preferito, a seconda del grado di complessità e preparazione che hai all’interno del mondo WordPress.

Puoi saltare al metodo che preferisci dall’elenco qui sotto:

Prima di tutto: backup

Se sei arrivato in questo articolo, molto probabilmente avrai bisogno di aggiungere del codice JavaScript personalizzato all’interno del tuo sito in WordPress.

Queste operazioni sono molto delicate, in quanto vanno ad aggiungere del codice, che se non inserito con i dovuti criteri, potrebbe compromettere completamente il tuo sito.

Perciò il mio consiglio è quello di metterti totalmente al riparo, creando una copia di backup del tuo sito.

Aggiungi codice JavaScript personalizzato in WordPress nel functions.php

Il primo metodo che andremo a vedere per aggiungere JavaScript personalizzato in WordPress, è attraverso l’uso del functions.php. Attenzione: questo è un file che contiene tutte le funzionalità di WordPress e per tanto ti consiglio di procedere con questo metodo, solo se sai bene cosa stai facendo.

Fatta questa doverosa premessa, ora è il momento perfetto per creare la copia di backup del tuo sito! Non appena avrai concluso, recati nel tuo tema child (se non lo hai ancora fatto, scopri come fare per creare un tema child e perché è importante averne uno installato).

Per cominciare dovrai recarti nel file functions.php. Successivamente dovrai copiare e incollare il seguente snippet di codice:

function my_custom_script() {
?>

    <script>
      // il tuo codice javascript qui...
    </script>
<?php
}
add_action('wp_head', 'my_custom_script');

Dall’esempio di sopra puoi notare due cose:

1. il codice JavaScript può essere incorporato direttamente nella funzione my_custom_script();
2. In questo specifico caso, lo script verrà incluso nell’Hook wp_head che esegue il codice durante il caricamento dell’header. Se vuoi caricare il tuo script nel footer, aggancia il codice all’Hook del foter con la funzione: add_action(‘wp-footer’, ‘my_custom_script’).

Migliora le performance

Se vuoi evitare di caricare lo script in tutto il sito, allora il mio consiglio è quello di individuare la pagina o l’articolo in cui vuoi includere lo script, e inserirlo solo in quel punto.

Caricare il codice custom in uno specifico post

function my_custom_script_single() {
  if (is_single ('31')) {.  //sostituire 31 con id del post
?>

    <script>
      // il tuo codice javascript qui...
    </script>
<?php
  }
}
add_action('wp_head', 'my_custom_script_single');

In questo caso, dovrai sostituire il numero 31 dell’esempio qui sopra, con l’ID dell’articolo in cui vuoi caricare il codice. Per scoprire qual’è l’ID dell’articolo in questione, accedi da backend all’articolo desiderato e ricercalo nella barra degli indirizzi. Lo puoi trovare subito dopo la parola “post=” come nell’immagine successiva:

Caricare il codice custom in una pagina specifica

Infine potrai caricare il tuo codice in una singola pagina, attraverso la funzione IS_PAGE. In questo caso il codice da inserire sarà:

function my_custom_script_page() {
  if (is_page ('80')) { //sostituire 80 con id della tua pagina
?>

    <script>
      // il tuo codice javascript qui...
    </script>
<?php
  }
}
add_action('wp_head', 'my_custom_script_page');

Avrai sicuramente notato che, l’unica differenza tra le due versioni, è il controllo che eseguiamo per verificare se è un articolo con id=31, piuttosto che una pagina con id=80. Semplice vero?

Alla fine delle modifiche, salva il file functions.php e aggiorna il tuo browser, per verificare se le modifiche stanno funzionando.

Aggiungere codice javascript personalizzato in WordPress con plugin

Questo è sicuramente il metodo più semplice e più consigliato se non sei particolarmente skillato sul codice. Anche se il metodo visto in precedenza, è abbastanza semplice, il mio consiglio è di utilizzare il seguente metodo se non ti senti a tuo agio con il codice!

Detto questo, uno dei plugin che mi sento di consigliarti in questo caso è Insert Header and Footer, un plugin che ha oltre 1 milione di installazioni attive, e davvero, davvero semplice da usare.

Appena avrai installato il plugin, recati su “Impostazioni/Insert Headers and Footers” e dovresti trovarti di fronte una schermata di questo tipo:

Ora, non ti resta che inserire il codice javascript personalizzato nel blocco di tuo interesse. Se per esempio vorrai che il tuo codice javascript venga eseguito all’interno del tag <head></head>, allora dovrai inserire il tuo script proprio nel primo blocco, piuttosto che usare il secondo nel quale invece, dovrà essere inserito il codice se vuoi che quest’ultimo venga eseguito nel <footer></footer>.

Una volta inserito il tuo codice, ti basterà premere il pulsante “Save” per rendere effettive le modifiche e, se tutto è andato bene, avrai il tuo bel codice javascript personalizzato in wordpress funzionante!

Se ti è stato utile questo post, fammelo sapere nei commenti, e se pensi che possa essere utile a qualcuno, condividilo pure.

Grazie per l’attenzione e alla prossima!