Uno dei modi migliori per migliorare la funzionalità front-end del tuo sito web è aggiungere JavaScript personalizzato a WordPress. Ad ogni modo, capire come farlo può essere complicato, soprattutto se sei abituato a lavorare con il Customizer per inserire CSS personalizzati.
Fortunatamente, puoi utilizzare diverse strategie a seconda del tuo livello di esperienza e di ciò che stai cercando di ottenere. Dopo aver appreso quali sono le tue opzioni, sarai in grado di scegliere la soluzione per aggiungere JavaScript personalizzato a WordPress che ha più senso per te.
In questo post, ti guideremo attraverso tre metodi che puoi utilizzare per aggiungere JavaScript personalizzato al tuo sito WordPress, oltre a discutere i pro e i contro di ciascuna opzione.
Iniziamo.
L’utilizzo di un plugin è uno dei modi più semplici per aggiungere JavaScript a WordPress. Head & Footer Code, ad esempio è un ottimo strumento:
Questo plugin gratuito ti consente di inserire codice in vari modi. Puoi usarlo per Pixel Facebook , Google Analytics , CSS personalizzato e altro.
Per iniziare, aggiungi il plugin al tuo sito navigando su Plugin → Aggiungi nuovo dalla dashboard di amministrazione, quindi cerca “Head & Footer code”.
Dopo aver fatto clic sui pulsanti Installa ora e Attiva , puoi individuare le impostazioni del plugin andando su Strumenti → Head & Footer code . In questa schermata sono presenti tre caselle per le sezioni header, footer e body:
Puoi inserire il tuo JavaScript personalizzato di WordPress in una di queste caselle. Al termine, seleziona il pulsante Salva modifiche nella parte inferiore dello schermo. Il codice verrà quindi caricato su ogni pagina del tuo sito.
Pro e contro dell’utilizzo di un plugin
Il vantaggio principale dell’utilizzo di un plugin è che è un’opzione adatta ai principianti. Non devi preoccuparti di modificare i file del tuo tema . Il plugin Head & Footer Code potrebbe anche tornare utile se stai cercando un modo semplice per aggiungere altri tipi di codice e CSS personalizzati.
Tuttavia, lo svantaggio di questo metodo è che comporta l’installazione di un plugin di terze parti, soluzione che alcuni proprietari di siti vogliono evitare. Se vuoi mantenere i tuoi plugin al minimo, potresti fare meglio utilizzando uno degli altri metodi. Inoltre, il plugin è progettato per modifiche JavaScript a livello di sito piuttosto che pagine o post specifici.
2. Usa il tuo file functions.php
Un altro metodo per aggiungere JavaScript personalizzato di WordPress al tuo sito web è sfruttare le funzioni integrate e gli hook per modificare il file functions.php . Questo approccio prevede il caricamento manuale degli script sul server.
Prima di iniziare, ti consigliamo di creare un child theme . Questo passaggio ti garantisce che sarai ancora in grado di aggiornare il tema principale in modo sicuro. Dovresti anche fare un backup del tuo sito nel caso qualcosa vada storto.
Questo metodo implica l’utilizzo della funzione IS_PAGE . Puoi aggiungere la logica condizionale per applicare il tuo codice JavaScript personalizzato a un singolo articolo o una pagina.
Per iniziare, individua e apri il tuo file functions.php , quindi copia e incolla il seguente snippet di codice:
function cm_custom_javascript() {
?>
<script>
// il tuo javascript va qui
</script>
<?php
}
add_action('wp_head', 'cm_custom_javascript');
Questo codice aggiungerà il codice JavaScript al tuo header. Per applicarlo a un singolo post, puoi utilizzare quanto segue:
function cm_custom_javascript() {
if (is_single ('3')) {
?>
<script type="text/javascript">
// il tuo javascript va qui
</script>
<?php
}
}
add_action('wp_head', 'cm_custom_javascript');
Tieni presente che dovrai sostituire il numero 3 nell’esempio precedente con il numero ID del post a cui desideri aggiungere il codice. Per individuare quel numero, accedi al post dalla dashboard di amministrazione, quindi fai clic su Modifica . Nell’URL della barra del browser, il numero ID è il numero accanto a “post=”:
Salva il tuo file una volta sostituito il numero ID e aggiungi il tuo JavaScript personalizzato nell’area designata. Puoi anche ripetere lo stesso processo per una singola pagina di WordPress.
Pro e contro della modifica del file functions.php
Un vantaggio della modifica del file functions.php è che non è necessario installare un altro plugin. Puoi anche utilizzare questa tecnica per aggiungere caratteristiche e funzionalità sia al tuo tema che a WordPress stesso. Questo metodo può inserire JavaScript in un singolo articolo o pagina o in tutte le pagine.
L’unico aspetto negativo di questo metodo è che implica lavorare con il codice e modificare i file del tuo sito. Pertanto, potrebbe non essere l’opzione migliore se non hai esperienza in questo reparto.
3. Aggiungi JavaScript al tuo header
C’è un modo per aggiungere JavaScript personalizzato di WordPress inserendo il tag <script> direttamente nel tuo file header.php . Tuttavia, questo metodo non è raccomandato. Può interferire con la sequenza di caricamento di WordPress e causare conflitti con altri temi e plugin.
Se desideri aggiungere JavaScript personalizzato a tutte le tue pagine tramite l’header del tuo sito, ci sono due modi per farlo. Puoi modificare il file functions.php e utilizzare la funzione wp_enqueue_script, che crea una funzione generica. In alternativa, puoi usare l’ hook wp_head.
Diamo un’occhiata a entrambe le opzioni…
Aggiungi JavaScript al tuo header usando la funzione wp_enqueue_script
Innanzitutto, ti consigliamo di caricare il tuo file JavaScript personalizzato nella directory del tuo tema. Puoi farlo tramite un client FTP (File Transfer Protocol) o il File Manager di cPanel.
Passa alla cartella dei temi del tuo sito ( wp_content → themes → [iltuotema] ). Quindi, seleziona Carica :
Prendi nota del percorso esatto di questo file. Dovrebbe essere qualcosa come “https://www.iltuodominio.it/wp-content/themes/twentytwentyuone/js/myjsfile.js”.
Quindi, individua e apri il tuo file functions.php , quindi copia e incolla il seguente snippert di codice:
function cm_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/scriptesempio.js');
}
add_action('wp_enqueue_scripts', 'cm_custom_javascript');
Assicurati di sostituire l’URL del template con il tuo. Infine, salva il tuo file.
Aggiungi JavaScript personalizzato usando l’hook wp_head
Puoi anche utilizzare l’ action hook wp_head per aggiungere JavaScript personalizzato al tuo header tramite script inline. Ancora una volta, questo metodo non è preferibile perché può creare troppi script. Ad ogni modo, è meglio che inserire direttamente gli script nel file header.php .
Questo metodo, che puoi utilizzare anche per il footer, utilizza gli action hook per aggiungere script inline al tuo sito. Mentre wp_enqueue_script accoda script personalizzati, l’approccio wp_head stampa gli script nel template header (e footer, se si utilizza l’hook wp_footer ).
Per iniziare, vai al file functions.php , quindi copia e incolla quanto segue:
function cm_custom_javascript() {
?>
<script>
// il tuo javascript va qui
</script>
<?php
}
add_action('wp_head', 'cm_custom_javascript');
Nota che l’ hook wp_head si attiva solo sul front-end del tuo sito web. Ciò significa che qualsiasi JavaScript personalizzato che aggiungi utilizzando questo metodo non verrà visualizzato nelle aree di amministrazione o di accesso. Tuttavia, se si desidera aggiungere JavaScript a tali aree, è possibile utilizzare rispettivamente gli hook di azione admin_head e login_head .
Pro e contro dell’aggiunta di JavaScript all’header
La funzione wp_enqueue_script è preferita dagli sviluppatori perché previene i conflitti che possono sorgere con altre opzioni, come l’aggiunta diretta di script al file header.php . Inoltre, l’utilizzo di questo metodo non crea script dipendenti.
Il problema principale con l’aggiunta di JavaScript personalizzato di WordPress all’intestazione del tuo sito è che può causare problemi con altri plugin che caricano i propri script. Questa configurazione può anche causare il caricamento di più script più di una volta, il che può ostacolare la velocità e le prestazioni complessive del tuo sito web
Leggi anche: Come eliminare JS e CSS che bloccano il rendering delle pagine del sito
Conclusione
Per impostazione predefinita, WordPress non ti consente di inserire fsnippet di codice JavaScript nelle tue pagine e nei tuoi post. Fortunatamente, con alcuni accorgimenti puoi aggiungere il tuo JavaScript personalizzato senza danneggiare il tuo sito web WordPress. Il metodo migliore dipende dal tuo livello di conoscenza con la modifica dei file del tuo sito e dove desideri applicare gli script.
Come abbiamo visto in questo post, ci sono tre modi per aggiungere JavaScript personalizzato al tuo sito WordPress:
- Installa un plugin come Head & Footer Code.
- Usa il tuo file functions.php per aggiungere JavaScript personalizzato a una singola pagina o post.
- Aggiungi JavaScript per l’header utilizzando la funzione wp_enqueue_script l’hook wp_head.
Ora che sai come aggiungere JavaScript personalizzato a WordPress, potresti essere interessato anche alla nostra altra guida su come aggiungere CSS personalizzati a WordPress.
Buon lavoro.
