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.<\/p>\n
Quando si tratta di WordPress, non si dovrebbero usare script e tag di collegamento per aggiungere file JavaScript e CSS.<\/p>\n
Per un sito Web, \u00e8 comune utilizzare diversi tipi di effetti, animazioni per migliorare l’esperienza dell’utente. Ci sono molti plugin gi\u00e0 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 \u00e8 necessario includere i file JS e CSS dello slider su un’altra pagina. \u00c8 sempre una buona pratica includere JS e CSS solo quando necessario. Questa \u00e8 una buona pratica utilizzata per migliorare le prestazioni del sito e velocizzare il caricamento del nostro sito.<\/p>\n
Supponiamo di avere file custom.js e custom.css che devono essere aggiunti sul nostro sito. Per questo, dobbiamo inserire il codice sotto.<\/p>\n
add_action('wp_enqueue_scripts', 'include_js_css');\nfunction include_js_css() {\n\u00a0\u00a0\u00a0\u00a0wp_register_script('my-custom-script', get_stylesheet_directory_uri(). '\/js\/custom.js', array('jquery'), false, true);\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script('my-custom-script');\n\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_register_style( \"my-custom-style\", get_stylesheet_directory_uri(). \"\/css\/custom.css\", array(), false, \"all\" );\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_style( \"my-custom-style\" );\n}<\/code><\/pre>\nNota<\/strong>: il 3\u00b0 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.<\/p>\nL’ultimo parametro \u00e8 impostato su true, il che significa che include il file custom.js in un pi\u00e8 di pagina (prima della fine del tag body).<\/p>\n
Spiegazione dei parametri per la funzione wp_register_script()<\/h3>\n
$handle<\/strong> (obbligatorio): nome dello script. Dovrebbe essere unico.
\n$src<\/strong> (Obbligatorio): URL completo dello script o percorso dello script relativo alla directory principale di WordPress.
\n$deps<\/strong> (Facoltativo): un array di script registrati gestisce questo script da cui dipende.
\nValore predefinito: array()
\n$ver<\/strong> (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 \u00e8 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 \u00e8 false
\n$in_footer<\/strong> (Facoltativo): se accodare lo script prima della chiusura del tag body invece che nell’head. Predefinito ‘falso’.<\/p>\nSpiegazione dei parametri per la funzione wp_register_style()<\/h3>\n
$handle<\/strong> (Obbligatorio): nome del foglio di stile. Dovrebbe essere unico.
\n$src<\/strong> (Obbligatorio): URL completo del foglio di stile o percorso del foglio di stile relativo alla directory principale di WordPress.
\n$deps<\/strong> (Facoltativo): un array di fogli di stile registrati gestisce questo foglio di stile da cui dipende.
\nValore predefinito: array()
\n$ver<\/strong> (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 \u00e8 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
\n$media<\/strong>(Facoltativo): il supporto per il quale \u00e8 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’.<\/p>\nSi tratta di come includere JavaScript e CSS in WordPress. Se hai domande o suggerimenti, lascia i commenti qui sotto.<\/p>\n