Come aggiungere correttamente fogli di stile CSS e JavaScripts in WordPress

Vuoi imparare come aggiungere correttamente fogli di stile CSS e JavaScripts in WordPress? Molti utenti fai-da-te spesso commettono l’errore di chiamare direttamente i loro script e fogli di stile in plugin e temi. In questa guida, ti mostreremo come aggiungere correttamente fogli di stile CSS e JavaScripts in WordPress. Ciò sarà particolarmente utile per coloro che hanno appena iniziato a imparare lo sviluppo di temi e plugin di WordPress.

Errore comune quando si aggiungono Javascripts e fogli di stile CSS in WordPress

Molti plug-in di WordPress e sviluppatori di temi commettono l’errore di aggiungere direttamente i loro script o CSS incorporati nei loro plug-in e temi.

Alcuni usano erroneamente la function wp_head per caricare i loro script e fogli di stile.

<?php
add_action('wp_head', 'bfast_bad_script');
function bfast_bad_script() {
echo 'jQuery goes here';
}
?>

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 si carica jQuery manualmente e un altro plug-in carica jQuery tramite il metodo corretto, allora jQuery viene caricato due volte. Se viene caricato su ogni pagina, ciò influirà negativamente sulla velocità e sulle prestazioni di WordPress .

È anche possibile che le due versioni siano diverse e quindi possano causare conflitti. Detto questo, diamo un’occhiata al modo giusto di aggiungere script e fogli di stile CSS.

Perché accodare scripts e fogli di stile CSS in WordPress?

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

Per assicurarsi che tutto funzioni correttamente e che nessuno stia calpestando gli altri, WordPress ha un sistema di accodamento. Questo sistema fornisce un modo programmabile per caricare JavaScript e fogli di stile CSS in WordPress.

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 integrate fornite in bundle con WordPress anziché caricare più volte lo stesso script di terze parti. Ciò riduce il tempo di caricamento della pagina e aiuta a evitare conflitti con altri temi e plugin.

Come accodare correttamente gli script in WordPress?

Il caricamento corretto degli script in WordPress è molto semplice. Di seguito è riportato un codice di esempio che si potrebbe incollare nel file del tuo plugin-specific o nel file functions.php del tuo tema in modo da caricare correttamente gli script e i fogli di stile CSS in WordPress.

?php
function bfast_adding_scripts() {
 
bfast_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', 'bfast_adding_scripts' );  
?>

Spiegazione:

Abbiamo iniziato registrando il nostro script tramite la funzionebfast_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 plugin. Una volta trovato, WordPress cercherà il nostro nome file amazing_script.js in quella cartella.
• $ deps – deps è per dipendenza. Poiché il nostro script utilizza jQuery, abbiamo aggiunto jQuery nell’area delle dipendenze. WordPress caricherà automaticamente jQuery se non è già stato caricato 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 su true. Se si desidera caricare lo script nell’header, basta impostare il valore su false.

Dopo aver fornito tutti i parametri bfast_register_script, possiamo semplicemente chiamare lo script in cui tutto accade  wp_enqueue_script()

L’ultimo passaggio consiste nell’utilizzare l’hook dell’azione wp_enqueue_scripts per caricare effettivamente lo script. Poiché questo è un codice di esempio, lo abbiamo aggiunto proprio sotto tutto il resto.

Se lo si stava aggiungendo al tema o al plug-in, è possibile posizionare questo hook di azione (add_action) dove lo script è effettivamente richiesto. Ciò consente di ridurre il footprint di memoria del plug-in.

Ora qualcuno potrebbe chiedersi perché stiamo facendo il passo in più di registrare prima lo script e poi accodarlo? Bene, questo consente ad altri proprietari di siti di annullare la registrazione dello script senza modificare il codice principale del plug-in.

Come accodare correttamente i fogli di stile CSS in WordPress

Proprio come gli script, puoi anche accodare i tuoi fogli di stile CSS in WordPress. Guarda l’esempio seguente:

<?php
function bfast_adding_styles() {
wp_register_style('my_stylesheet', plugins_url('my-stylesheet.css', __FILE__));
wp_enqueue_style('my_stylesheet');
}
add_action( 'wp_enqueue_scripts', 'bfast_adding_styles' );  
?>

Invece di usare wp_enqueue_script, ora stiamo usando wp_enqueue_styleper aggiungere il nostro foglio di stile CSS.

Si noti che abbiamo utilizzato il wp_enqueue_scriptsnell’hook di azione sia per gli stili che per gli script. Nonostante il nome, questa funzione è disponibile per entrambi.

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

Tuttavia, se stai usando la funzione di script enqueue nel tuo tema, usa semplicemente get_template_directory_uri(). Se stai lavorando con un tema child, usa get_stylesheet_directory_uri().

Di seguito è riportato un codice di esempio:

<?php
  
function bfast_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', 'bfast_adding_scripts' );  
?>

E’ tutto! Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere correttamente fogli di stile CSS e JavaScripts in WordPress.

Related Posts