Aggiunta di Javascript ai temi di WordPress nel modo giusto

Esiste un modo specifico per aggiungere Javascript al tuo tema WordPress al fine di prevenire eventuali conflitti con plugin o temi WordPress principali. Il problema è che molti “sviluppatori” chiamano i loro file javascript direttamente nel file header.php o footer.php che è il modo sbagliato di farlo.


In questa guida ti mostrerò come chiamare correttamente i tuoi file javascript usando il tuo file Functions.php in modo che vengano caricati direttamente nel tag head o footer del tuo sito. In questo modo, se si sta sviluppando un tema per la distribuzione e l’utente finale desidera modificare gli script tramite un tema figlio che può o se sta utilizzando la minimizzazione / memorizzazione nella cache o altri plug-in di ottimizzazione, funzionerà correttamente. E se stai lavorando con un tema figlio, i tuoi script vengono aggiunti nel modo giusto, senza copiare i file header.php o footer.php nel tema figlio che non dovrebbero mai essere necessari (quando si lavora con un tema ben codificato)

Modo sbagliato di aggiungere Javascript ai temi di WordPress

Chiamare il javascript nel tuo file header.php o footer.php come mostrato di seguito, NON è il modo corretto e lo sconsiglio vivamente, spesso a volte causa conflitti con altri plugin e fare cose manualmente quando si lavora con un CMS non è mai una buona idea.

Il modo giusto per aggiungere Javascript ai temi di WordPress

Il modo migliore per aggiungere javascript al tuo tema WordPress è farlo tramite il file Functions.php usando wp_enqueue_script. L’uso dell’azione wp_enqueue_scripts per caricare il tuo javascript ti aiuterà a mantenere il tema fuori dai guai.

Esempio

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);

Il codice sopra caricherà il file my-script.js sul tuo sito. Come puoi vedere, ho incluso solo $ handle, ma puoi anche aggiungere dipendenze per lo script, il numero di versione e se caricarlo nell’intestazione o nel piè di pagina (il valore predefinito è intestazione).

La funzione wp_enqueue_script () può essere tecnicamente utilizzata in qualsiasi file modello di tema o plug-in, ma se stai caricando script globali ti consigliamo di posizionarlo nel file function.php del tuo tema o in un file separato appositamente progettato per caricare script sul luogo. Ma se stai solo cercando di caricare uno script su un file modello specifico (ad esempio sui post della galleria) potresti posizionare la funzione nel file modello, tuttavia, personalmente ti consiglio di tenere tutti gli script in un posto e usare le condizioni per caricare script se necessario.

Script ospitati da WordPress

Una cosa interessante di WordPress è che ci sono già un sacco di script ospitati e registrati che puoi usare nello sviluppo del tuo tema. Ad esempio jQuery che viene utilizzato in quasi tutti i progetti dovrebbe SEMPRE essere caricato da WordPress e mai ospitato su un sito di terze parti come Google. Quindi, prima di aggiungere uno script personalizzato al tuo progetto, controlla l’elenco di script registrati per assicurarti che non sia già incluso in WordPress e, in caso affermativo, dovresti caricarlo anziché registrarlo.

Usando il gancio Enqueue di WordPress

In precedenza avevamo menzionato la funzione necessaria per caricare uno script sul tuo sito, tuttavia, quando lavori con file non modello come il tuo file Functions.php, dovresti aggiungere questa funzione all’interno di un’altra funzione agganciata agli hook di WordPress appropriati, in questo modo i tuoi script ottengono registrato con tutti gli altri script registrati da WordPress, plugin di terze parti e il tema principale quando si utilizza un tema figlio.

WordPress ha due diversi hook di azione che puoi usare per chiamare i tuoi script.

  1. wp_enqueue_scripts – azione utilizzata per caricare script sul front-end
  2. admin_enqueue_scripts – azione utilizzata per caricare script nell’amministratore WP

Ecco un esempio (che verrebbe aggiunto al tuo file Functions.php) su come creare una funzione e quindi utilizzare l’hook di WordPress per chiamare i tuoi script.

/ **
* Accodare uno script
* /
funzione myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

Nota: Vedi come stiamo usando la funzione “get_template_directory_uri” quando definiamo la posizione del tuo script? Questa funzione crea un URL per la cartella del tema. Se stai lavorando con un tema figlio, vorrai utilizzare “get_stylesheet_directory_uri” invece in modo che punti al tema figlio e non al tema principale.

Aggiunta del codice Javascript incorporato

Mentre puoi facilmente incollare javascript inline in qualsiasi file modello tramite il tag script, può essere una buona idea usare anche hook di WordPress per aggiungere il tuo codice inline, specialmente quando si tratta di un plug-in principale o di un codice tema. Di seguito è riportato un esempio di aggiunta di script incorporati al tuo sito:

funzione myprefix_add_inline_script () {
wp_add_inline_script ('my-script', 'alert ("hello world");', 'after');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Ciò che farà sarà aggiungere il tuo javascript inline dopo lo script “my-script” precedentemente registrato. Quando usi wp_add_inline_script puoi solo aggiungere il codice inline prima o dopo uno script già registrato, quindi se stai provando a modificare il codice di un particolare script assicurati che sia caricato dopo di esso, o se devi solo aggiungere un codice personalizzato puoi agganciare nello script jquery che viene generalmente caricato dalla maggior parte dei temi di WordPress e in caso contrario è possibile utilizzare wp_enqueue_script per caricare la versione di jQuery ospitata da WordPress.

Utilizzando questo metodo le persone possono rimuovere facilmente i tuoi script incorporati tramite un tema figlio o un componente aggiuntivo del plugin, mantiene tutti i tuoi javascript personalizzati ben organizzati ed è analizzato da WordPress che può essere più sicuro. E se stai usando un tema figlio puoi caricare i tuoi script tramite il tuo file Functions.php invece di copiare i file header.php o footer.php sul tuo tema figlio.

Detto questo, se stai lavorando su un tema figlio non devi farlo, puoi semplicemente scaricare il tuo codice nell’intestazione usando i ganci wp_head o wp_footer come nell’esempio seguente:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me