Modo standard per includere JavaScript e CSS in WordPress

Se sei uno sviluppatore di WordPress hai sentito parlare di parole come wp_enqueue_script, wp_enqueue_style e wp_enqueue_scripts. Questi sono i metodi che dovremmo usare per includere JavaScript e CSS in WordPress.

Quando si tratta di WordPress, non si dovrebbero usare script e tag di collegamento per aggiungere file JavaScript e CSS.

Vantaggi dell’utilizzo di metodi standard

Per un sito Web, è comune utilizzare diversi tipi di effetti, animazioni per migliorare l’esperienza dell’utente. Ci sono molti plugin già pronti disponibili su Internet che ci consentono di aggiungere slider, moduli di contatto, carosello ecc. nel tuo sito web. Quando utilizziamo queste risorse esterne, dobbiamo utilizzare i file JS e CSS forniti da loro. Utilizzando i metodi forniti da WordPress, possiamo controllare le pagine su cui tali plug-in possono essere utilizzati solo. Ad esempio, se stiamo visualizzando lo slider sulla home page, non è necessario includere i file JS e CSS dello slider su un’altra pagina. È sempre una buona pratica includere JS e CSS solo quando necessario. Questa è una buona pratica utilizzata per migliorare le prestazioni del sito e velocizzare il caricamento del nostro sito.

Codice effettivo per includere JavaScript e CSS

Supponiamo di avere file custom.js e custom.css che devono essere aggiunti sul nostro sito. Per questo, dobbiamo inserire il codice sotto.

add_action('wp_enqueue_scripts', 'include_js_css');
function include_js_css() {
    wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true);
    wp_enqueue_script('my-custom-script');
 
    wp_register_style( "my-custom-style", get_stylesheet_directory_uri(). "/css/custom.css", array(), false, "all" );
    wp_enqueue_style( "my-custom-style" );
}

Nota: il 3° parametro nella funzione wp_register_script. Abbiamo passato array(‘jquery’) che significa che il nostro custom.js dipende dal file jquery.js. Puoi creare un array emapy qui se il tuo script non ha dipendenze.

L’ultimo parametro è impostato su true, il che significa che include il file custom.js in un piè di pagina (prima della fine del tag body).

Spiegazione dei parametri per la funzione wp_register_script()

$handle (obbligatorio): nome dello script. Dovrebbe essere unico.
$src (Obbligatorio): URL completo dello script o percorso dello script relativo alla directory principale di WordPress.
$deps (Facoltativo): un array di script registrati gestisce questo script da cui dipende.
Valore predefinito: array()
$ver (opzionale): stringa che specifica il numero di versione dello script, se ne ha uno, che viene aggiunto all’URL come stringa di query per scopi di busting della cache. Se version è impostato su false, viene aggiunto automaticamente un numero di versione uguale alla versione di WordPress attualmente installata. Se impostato su null, non viene aggiunta alcuna versione. Il valore predefinito è false
$in_footer (Facoltativo): se accodare lo script prima della chiusura del tag body invece che nell’head. Predefinito ‘falso’.

Spiegazione dei parametri per la funzione wp_register_style()

$handle (Obbligatorio): nome del foglio di stile. Dovrebbe essere unico.
$src (Obbligatorio): URL completo del foglio di stile o percorso del foglio di stile relativo alla directory principale di WordPress.
$deps (Facoltativo): un array di fogli di stile registrati gestisce questo foglio di stile da cui dipende.
Valore predefinito: array()
$ver (opzionale): stringa che specifica il numero di versione del foglio di stile, se ne ha uno, che viene aggiunto all’URL come stringa di query per scopi di busting della cache. Se version è impostato su false, viene aggiunto automaticamente un numero di versione uguale alla versione di WordPress attualmente installata. Se impostato su null, non viene aggiunta alcuna versione. Valore predefinito: falso
$media(Facoltativo): il supporto per il quale è stato definito questo foglio di stile. Accetta tipi di media come "tutto", "stampa" e "schermo" o query multimediali come "(orientamento: verticale)" e "(larghezza massima: 640 px)". Valore predefinito: ‘tutti’.

Si tratta di come includere JavaScript e CSS in WordPress. Se hai domande o suggerimenti, lascia i commenti qui sotto.