Come Aggiungere JavaScript Personalizzato a WordPress (3 Metodi)

Uno dei modi migliori per migliorare la funzionalità front-end del tuo sito Web è aggiungere JavaScript personalizzato di WordPress. Tuttavia, capire come farlo può essere complicato, soprattutto se sei abituato a lavorare con il Customizer per inserire CSS personalizzati.

Fortunatamente, puoi utilizzare alcune strategie diverse 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 JavaScript personalizzata 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. Ecco i tre metodi che tratteremo: puoi fare clic per passare direttamente a un metodo specifico:

1. Utilizza il plug-in Codice testa e piè di pagina (l’opzione più semplice per gli utenti non tecnici)
2. Aggiungi codice al file functions.php
3. Aggiungi codice all’intestazione (utilizzando la funzione wp_enqueue_script o l’hook wp_head)

Facciamo un salto!

1. Installa un plugin come Head & Footer Code

L’utilizzo di un plug-in è uno dei modi più semplici per aggiungere JavaScript personalizzato di WordPress al tuo sito web. Ad esempio, Head & Footer Code è un buon strumento:

Questo plugin gratuito ti consente di inserire il codice in vari modi. Puoi usarlo per Facebook Pixel, Google Analytics, CSS personalizzato e altro.

Per iniziare, aggiungi il plug-in al tuo sito accedendo a Plugin → Aggiungi nuovo dalla dashboard dell’amministratore, quindi cercando “Codice intestazione e piè di pagina”.

Una volta cliccato sul Installa ora e Attivare pulsanti, è possibile individuare le impostazioni del plug-in andando a Strumenti → Codice intestazione e piè di pagina. In questa schermata sono presenti tre caselle per l’intestazione, il piè di pagina e le sezioni del corpo:

Puoi inserire il tuo JavaScript personalizzato di WordPress in una qualsiasi di queste caselle. Quando hai finito, seleziona il Salvare le modifiche pulsante nella parte inferiore dello schermo. Il codice verrà quindi caricato in ogni pagina del tuo sito.

Pro e contro dell’utilizzo di un plug-in

Il vantaggio principale dell’utilizzo di un plug-in è che è un’opzione adatta ai principianti. Non devi preoccuparti di modificare i file del tuo tema. Il plug-in 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 plug-in di terze parti, che alcuni proprietari di siti cercano di evitare. Se vuoi mantenere le tue estensioni al minimo, potresti stare meglio usando uno degli altri metodi. Inoltre, il plug-in è progettato per modifiche JavaScript a livello di sito piuttosto che per 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 e gli hook integrati per modificare il file funzioni.php file. Questo approccio prevede il caricamento manuale degli script sul tuo server.

Prima di iniziare, ti consigliamo di creare un tema child. Questo passaggio aiuta a garantire 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 prevede l’utilizzo di È_PAGINA funzione. Puoi aggiungere una logica condizionale per applicare il tuo codice JavaScript personalizzato a un singolo articolo o pagina.

Per iniziare, individua e apri il tuo file funzioni.php file, quindi copia e incolla il seguente frammento di codice:

function ti_custom_javascript() {
    ?>
        <script>
          // your javscript code goes here
        </script>
    <?php
}
add_action('wp_head', 'ti_custom_javascript');

Questo codice aggiungerà JavaScript alla tua intestazione. Per applicarlo a un singolo post, puoi utilizzare quanto segue:

function ti_custom_javascript() {
  if (is_single ('3')) { 
    ?>
        <script type="text/javascript">
          // your javscript code goes here
        </script>
    <?php
  }
}
add_action('wp_head', 'ti_custom_javascript');

Tieni presente che dovrai sostituire il file 3 nell’esempio precedente con il numero ID postale a cui si desidera aggiungere il codice. Per individuare quel numero, vai al post dalla dashboard dell’amministratore, quindi fai clic su Modificare. 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 codice JavaScript personalizzato nell’area designata. Puoi anche ripetere lo stesso processo per una singola pagina WordPress.

Pro e contro della modifica del file functions.php

Un vantaggio di modificare il tuo funzioni.php file è 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. Ad esempio, questo metodo può inserire JavaScript in un singolo articolo o pagina o in tutte le pagine.

L’unico svantaggio 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 dipartimento.

C’è un modo per aggiungere JavaScript WordPress personalizzato inserendo il file <script> tagga direttamente nel tuo header.php file. Tuttavia, questo metodo non è raccomandato. Può interferire con la sequenza di caricamento di WordPress e causare conflitti con altri temi e plugin.

Se vuoi aggiungere JavaScript personalizzato a tutte le tue pagine tramite l’intestazione del tuo sito, ci sono due modi per farlo. Puoi modificare il file funzioni.php file e utilizzare il wp_enqueue_script function, che crea una funzione generica. In alternativa, puoi utilizzare il wp_head gancio di azione.

Diamo un’occhiata a entrambe le opzioni…

Aggiungi JavaScript all’intestazione utilizzando la funzione wp_enqueue_script

Innanzitutto, ti consigliamo di caricare il tuo file JavaScript personalizzato nella directory del tuo modello. Puoi farlo tramite un client FTP (File Transfer Protocol) o File Manager.

Passa alla cartella dei modelli del tuo sito (wp_content → temi → [yourtheme]). Quindi, seleziona Caricamento:

Prendere nota del percorso esatto di questo file. Ad esempio, dovrebbe essere qualcosa del tipo “

Quindi, individua e apri il tuo funzioni.php file, quindi copia e incolla il seguente frammento di codice:

function ti_custom_javascript() {
wp_enqueue_script( 'example-script', get_template_directory_uri() . '/js/examplescript.js');
}
add_action('wp_enqueue_scripts', 'ti_custom_javascript');

Assicurati di sostituire l’URL del modello con il tuo. Infine, salva il tuo file.

Aggiungi JavaScript personalizzato utilizzando l’hook wp_head

Puoi anche usare il wp_head gancio di azione per aggiungere JavaScript personalizzato all’intestazione tramite script inline. Di nuovo, questo metodo non è preferibile perché può creare troppi script. Tuttavia, è meglio che inserire direttamente gli script nel tuo header.php file.

Questo metodo, che puoi utilizzare anche per il piè di pagina, utilizza gli action hook per aggiungere script incorporati al tuo sito. Mentre il wp_enqueue_script funzione accoda gli script personalizzati, il wp_head approach stampa gli script nel modello di intestazione (e nel piè di pagina, se si utilizza il file wp_footer gancio).

Per iniziare, vai al tuo funzioni.php file, quindi copia e incolla quanto segue:

function ti_custom_javascript() {
?>
<script>
// your javascript code goes here
</script>
<?php
}
add_action('wp_head', 'ti_custom_javascript');

Si noti che il wp_head hook si attiva solo sul front-end del tuo sito web. Ciò significa che qualsiasi codice 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 il file admin_head e login_head action hook, rispettivamente.

Pro e contro dell’aggiunta di JavaScript all’intestazione

Il wp_enqueue_script La funzione è preferita dagli sviluppatori perché previene i conflitti che possono sorgere con altre opzioni, come l’aggiunta diretta di script al tuo header.php file. Inoltre, l’utilizzo di questo metodo non crea script dipendenti.

Il problema principale con l’aggiunta di JavaScript WordPress personalizzato 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.

Inizia con il JavaScript personalizzato di WordPress

Come abbiamo discusso in questo post, ci sono tre modi in cui puoi aggiungere JavaScript personalizzato di WordPress al tuo sito web:

1. Installa un plugin come Head & Footer Code.
2. Usa il tuo funzioni.php file per aggiungere JavaScript personalizzato a una singola pagina o post.
3. Aggiungi JavaScript alla tua intestazione utilizzando il file wp_enqueue_script funzione o wp_head gancio.

Ora che sai come aggiungere JavaScript personalizzato a WordPress, potresti essere interessato alla nostra altra guida sull’aggiunta di CSS personalizzati a WordPress.