Come aggiungere correttamente JavaScript e stili in WordPress

Vuoi imparare come aggiungere correttamente JavaScript e fogli di stile CSS in WordPress? Molti utenti fai-da-te spesso commettono l'errore di chiamare direttamente script e fogli di stile in plug-in e temi. In questo articolo, ti mostreremo come aggiungere correttamente JavaScript e fogli di stile in WordPress. Questo sarà particolarmente utile per coloro che stanno appena iniziando a imparare il tema WordPress e lo sviluppo di plugin.

Errore comune quando si aggiungono script e fogli di stile in WordPress

Molti nuovi plugin di WordPress e sviluppatori di temi commettono l'errore di aggiungere direttamente i loro script o CSS inline nei loro plugin e temi.

Alcuni usano erroneamente il wp_head funzione per caricare i propri script e fogli di stile.

Mentre il codice sopra può sembrare più semplice, è il modo sbagliato di aggiungere script in WordPress e porta a ulteriori conflitti in futuro.

Ad esempio, se carichi manualmente jQuery e un altro plugin carica jQuery tramite il metodo corretto, allora jQuery viene caricato due volte. Se è caricato su ogni pagina, ciò influenzerà negativamente la velocità e le prestazioni di WordPress.

È anche possibile che i due siano versioni differenti che possono anche causare conflitti.

Detto questo, diamo un'occhiata al modo giusto di aggiungere script e fogli di stile.

Perché accodare script e stili in WordPress?

WordPress ha una forte comunità di sviluppatori. Migliaia di persone da tutto il mondo sviluppano temi e plugin per WordPress.

Per far sì che tutto funzioni correttamente e nessuno stia calpestando le dita dei piedi, WordPress ha un sistema accattivante. Questo sistema fornisce un modo programmabile per caricare JavaScript e fogli di stile CSS.

Usando le funzioni wp_enqueue_script e wp_enqueue_style, dici 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 incorporate fornite in bundle 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 temi e plug-in.

Come appropriarsi correttamente degli script in WordPress?

Caricamento degli script correttamente in WordPress è molto semplice. Di seguito è riportato un codice di esempio che incolleresti nel tuo plugin o nel file functions.php del tuo tema per caricare correttamente gli script in WordPress.

 ?funzione php wpb_adding_scripts () wp_register_script ('my_amazing_script', plugins_url ('amazing_script.js', __FILE__), array ('jquery'), '1.1', vero); wp_enqueue_script ( 'my_amazing_script');  add_action ('wp_enqueue_scripts', 'wpb_adding_scripts'); ?> 

Spiegazione:

Abbiamo iniziato registrando la nostra sceneggiatura attraverso il wp_register_script () funzione. Questa funzione accetta 5 parametri:

• $ maniglia - Handle è il nome univoco del tuo script. Il nostro è chiamato "my_amazing_script"
• $ src - src è la posizione del tuo script. Stiamo utilizzando la funzione plugins_url per ottenere l'URL corretto della nostra cartella di plug-in. Una volta che WordPress lo trova, cercherà il nostro nome di file amazing_script.js in quella cartella.
• $ dipendenze - deps è per la dipendenza. Poiché il nostro script utilizza jQuery, abbiamo aggiunto jQuery nell'area delle dipendenze. WordPress caricherà automaticamente jQuery se non viene caricato già sul sito.
• $ ver - Questo è il numero di versione del nostro script. Questo parametro non è richiesto.
• $ in_footer - Vogliamo caricare il nostro script nel footer, quindi abbiamo impostato il valore per essere vero. Se si desidera caricare lo script nell'intestazione, lo si renderebbe falso.

Dopo aver fornito tutti i parametri in wp_register_script, possiamo solo chiamare lo script in wp_enqueue_script () che fa accadere tutto.

L'ultimo passaggio consiste nell'utilizzare l'hook di azione wp_enqueue_scripts per caricare effettivamente lo script. Dato che questo è un codice di esempio, l'abbiamo aggiunto proprio sotto ogni altra cosa.

Se stavi aggiungendo questo al tuo tema o plug-in, puoi posizionare questo hook di azione in cui lo script è effettivamente richiesto. Questo ti permette di ridurre l'ingombro di memoria del tuo plugin.

Ora alcuni potrebbero chiedersi perché stiamo facendo il passo in più per registrare prima lo script e poi accodarlo? Bene, questo consente ad altri proprietari di siti di annullare la registrazione del tuo script senza modificare il codice principale del tuo plugin.

Stili correttamente accodare in WordPress

Proprio come gli script, puoi anche accodare i tuoi fogli di stile. Guarda l'esempio qui sotto:

Invece di usare wp_enqueue_script, stiamo ora usando wp_enqueue_style per aggiungere il nostro foglio di stile.

Si noti che abbiamo usato wp_enqueue_scripts gancio di azione per entrambi gli stili e gli script. Nonostante il nome, questa funzione funziona per entrambi.

Negli esempi sopra, abbiamo usato plugins_url funzione per indicare la posizione dello script o lo stile che volevamo accodare.

Tuttavia, se si utilizza la funzione Script di enqueue nel proprio tema, utilizzare semplicemente get_template_directory_uri () anziché. Se si sta lavorando con un tema figlio, quindi utilizzare get_stylesheet_directory_uri ().

Di seguito è riportato un codice di esempio:

Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere correttamente jacvascript e stili in WordPress. Potresti anche voler studiare il codice sorgente dei principali plugin di WordPress per alcuni esempi di codice di vita reale.

Se questo articolo ti è piaciuto, ti preghiamo di iscriverti al nostro canale YouTube per le esercitazioni video di WordPress. Puoi anche trovarci su Twitter e Facebook.