Tavaline viis JavaScripti ja CSS-i kaasamiseks WordPressi

Kui olete WordPressi arendaja, kuulsite sellistest sõnadest nagu wp_enqueue_script, wp_enqueue_style ja wp_enqueue_scripts. Need on meetodid, mida peaksime kasutama JavaScripti ja CSS-i kaasamiseks WordPressi.

WordPressi osas ei tohiks JavaScripti ja CSS-failide lisamiseks kasutada skripti ja linkide silte.

Standardmeetodite kasutamise eelised

Veebisaidi jaoks on kasutuskogemuse parandamiseks tavaline kasutada erinevaid efekte, animatsioone. Internetis on saadaval palju valmis pluginaid, mis võimaldavad meil teie veebisaidile lisada liugureid, kontaktivorme, karusselli jms. Neid väliseid ressursse kasutades peame kasutama nende pakutavaid JS- ja CSS-faile. Kasutades WordPressi pakutavaid meetodeid, saame juhtida lehti, millel sellised pistikprogrammid saavad kasutada. Näiteks kui kuvame avalehel liugurit, pole teisele lehele vaja lisada liuguri JS- ja CSS-faile. Alati on hea tava lisada JS ja CSS ainult vajaduse korral. See on hea tava, mida kasutati saidi jõudluse parandamiseks ja saidi kiiremaks laadimiseks.

Tegelik kood JavaScripti ja CSS-i lisamiseks

Oletame, et meil on custom.js ja custom.css failid, mis tuleb meie saidile lisada. Selleks peame paigutama koodi alla.

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" );
}

Märkus. Funktsiooni wp_register_script kolmas parameeter. Läbisime massiivi (‘jquery’), mis tähendab, et meie custom.js sõltub failist jquery.js. Siin saate emapseeritud massiivi, kui teie skriptil pole sõltuvusi.

Viimase parameetri väärtuseks on seatud tõene, mis tähendab, et lisada jaluses (enne kehamärgendi lõppu) fail custom.js.

Funktsiooni wp_register_script () parameetrite selgitus

$ käepide (kohustuslik): skripti nimi. Peaks olema ainulaadne.
$ src (kohustuslik): skripti täielik URL või skripti tee WordPressi juurkataloogi suhtes.
$ deps (valikuline): sellest skriptist sõltub registreeritud skripti massiiv.
Vaikeväärtus: array ()
$ ver (valikuline): string, mis määrab skripti versiooni numbri, kui see on olemas, mis lisatakse URL-ile päringustringina vahemälu kustutamise eesmärgil. Kui versiooni väärtuseks on seatud vale, lisatakse automaatselt versiooninumber, mis võrdub praeguse installitud WordPressi versiooniga. Kui see on nullitud, ei lisata versiooni. Vaikeväärtus on false
$ in_footer (valikuline): kas skript loovutatakse enne kehamärgendi sulgemist, mitte peas. Vaikimisi ‘false’.

Funktsiooni wp_register_style () parameetrite selgitus

$ käepide (kohustuslik): stiililehe nimi. Peaks olema ainulaadne.
$ src (kohustuslik): stiililehe täielik URL või stiililehe tee WordPressi juurkataloogi suhtes.
$ deps (valikuline): sellest stiilitabelist sõltub registreeritud stiililehe massiiv.
Vaikeväärtus: array ()
$ ver (valikuline): string, mis määrab stiililehe versiooni numbri, kui sellel on, mis lisatakse URL-ile päringustringina vahemälu kustutamise eesmärgil. Kui versiooni väärtuseks on seatud vale, lisatakse automaatselt versiooninumber, mis võrdub praeguse installitud WordPressi versiooniga. Kui see on nullitud, ei lisata versiooni. Vaikeväärtus: false
$ media(Valikuline): meedia, mille jaoks see stiilitabel on määratletud. Aktsepteerib selliseid meediumitüüpe nagu „kõik", „print” ja „ekraan” või selliseid meediumipäringuid nagu „(orientatsioon: portree)” ja „(maksimaalne laius: 640 pikslit)”. Vaikeväärtus: ‘kõik’.

See kõik käib JavaScripti ja CSS-i kaasamise kohta WordPressi. Kui teil on küsimusi või ettepanekuid, jätke kommentaarid allpool.