A WordPressben ahelyett, hogy egyszerűen hozzáadnád ezeket a fejléchez, az enqueueing nevű módszert kell használnod, amely egy szabványosított módja az eszközök kezelésének, a függőségek kezelésének plusz bónuszával. Az alábbiakban megtudhatod, hogyan kell ezt megtenni a wp_enqueue_scripts segítségével.

• How Enqueueing Works
• Enqueueing Basics With wp_enqueue_scripts
• Dependency Management
• Load Scripts in the Footer
• Specifying Media for Styles

How Enqueueing Works

Egy szkript vagy stílus sorba állításakor két lépés történik. Először regisztrálod – megmondod a WordPressnek, hogy ott van -, majd ténylegesen sorba állítod, ami végül a fejlécbe vagy közvetlenül a záró body tag előtt adja ki.

A két lépés oka a modularitással kapcsolatos. Néha tudni akarsz a WordPressnek egy eszközről, de nem biztos, hogy minden oldalon használni akarod. Például: Ha egy egyéni galéria rövidkódot készítesz, amely Javascriptet használ, akkor valójában csak akkor kell betöltened a JS-t, amikor a rövidkódot használod – valószínűleg nem minden oldalon.

Ez úgy valósítható meg, hogy először regisztrálod a szkriptet, és csak a rövidkód megjelenésekor várakoztatod be ténylegesen (ajánlott olvasmány: The Ultimate Guide to WordPress Shortcodes).

A várakoztatás alapjai a wp_enqueue_scripts segítségével

A szkriptek és stílusok várakoztatásához a front-endben a wp_enqueue_scripts horgot kell használnod. A kampós függvényen belül használhatod a wp_register_script(), wp_enqueue_script(), wp_register_style() és wp_enqueue_style() függvényeket.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) ); wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' );}

A fenti példában ugyanabban a függvényben regisztráltam és sorba állítottam az eszközöket, ami egy kicsit redundáns. Valójában az enqueue függvények segítségével rögtön regisztrálhatunk és enqueue-olhatunk, ugyanazokkal az argumentumokkal, mint a register függvényekben:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}

Ha szét kellene választanom a két függvényt, akkor azt úgy tenném, hogy különböző horgokban használnám őket. Egy valós példában a wp_enqueue_scripts horgot használhatnánk az eszközök regisztrálására, a rövidkód függvényét pedig az eszközök sorba állítására.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery', plugins_url( '/css/gallery.css' , __FILE__ ) ); wp_register_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ) );}add_shortcode( 'custom_gallery', 'custom_gallery' );function custom_gallery( $atts ){ wp_enqueue_style( 'custom-gallery' ); wp_enqueue_script( 'custom-gallery' ); // Gallery code here}

Függőségkezelés

A WordPress sorba állítási mechanizmusa beépített támogatással rendelkezik a függőségkezelésre, mind a wp_register_style(), mind a wp_register_script() függvények harmadik argumentumát használva. Az enqueuing függvényeket rögtön használhatod is, ha nincs szükséged a szétválasztásukra.

A harmadik paraméter a regisztrált szkriptek/stílusok tömbje, amelyeket be kell tölteni, mielőtt az aktuális eszköz sorba kerülne. A fenti példánk nagy valószínűséggel a jQuery-re támaszkodna, ezért most ezt adjuk meg:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) );}

A jQuery-t nem kell magunknak regisztrálnunk vagy beállítanunk a sorba, mert az már a WordPress része. A WordPressben elérhető szkriptek és stílusok listáját a Codexben találod.

Ha vannak saját függőségeid, akkor azokat is regisztrálnod kell, különben a szkriptjeid nem fognak betölteni. Íme egy példa:

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ) ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery' ) );}

Tegyük fel, hogy az első szkript egy galéria, a második pedig annak egy kiterjesztése, ami a képeket egy lightboxban nyitja meg. Vegyük észre, hogy bár a második szkriptünk a jQuery-re támaszkodik, ezt nem kell megadnunk, mivel az első szkriptünk már be fogja tölteni a jQuery-t. Ennek ellenére jó ötlet lehet, ha minden függőséget megadunk, csak azért, hogy semmi ne törjön el, ha elfelejtünk felvenni egy függőséget.

A WordPress most már tudja, hogy milyen szkriptekre van szükségünk, és ki tudja számolni, hogy milyen sorrendben kell őket az oldalhoz hozzáadni.

Skriptek betöltése a láblécben

Ahol csak megtehetjük, hogy a láblécben töltjük be a szkripteket, érdemes. Ez növeli az oldal látszólagos betöltési idejét, és megakadályozhatja, hogy a webhely lógjon a szkriptek betöltése közben, különösen, ha azok AJAX-hívásokat tartalmaznak.

A sorba állítási mechanizmus az ötödik paraméter segítségével (a negyedik egy opcionális verziószám) hozzáadhatja a szkripteket a lábléchez. A fenti példánk a láblécbe töltené be a szkripteket, ha kissé módosítjuk azt.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_enqueue_script( 'custom-gallery', plugins_url( '/js/gallery.js' , __FILE__ ), array( 'jquery' ), '1.0', true ); wp_enqueue_script( 'custom-gallery-lightbox', plugins_url( '/js/gallery-lightbox.js' , __FILE__ ), array( 'custom-gallery', 'jquery' ), '1.0', true );}

A true megadása az ötödik paraméterként a láblécbe teszi a szkripteket, a false használata vagy a paraméter elhagyása a fejlécbe tölti be a dolgokat. Mint már említettem, amikor csak lehetséges, a szkripteket a láblécbe töltsük be.

Specifying Media For Styles

A stílusregiszter/enqueue függvények ötödik paraméterének használatával szabályozhatjuk, hogy a szkript milyen médiatípusra lett definiálva (nyomtatás, képernyő, kézi stb.). Ezzel a paraméterrel korlátozhatja a stílusok betöltését az adott médiatípusra, ami egy praktikus kis optimalizálási trükk.

add_action( 'wp_enqueue_scripts', 'my_plugin_assets' );function my_plugin_assets() { wp_register_style( 'custom-gallery-print', plugins_url( '/css/gallery.css' , __FILE__ ), array(), '1.0', 'print' );}

A használható médiatípusok teljes listáját a CSS specifikációban találja.

Összefoglaló

Az eszközök sorba állítása egy hatékony módja a kezelésüknek. Neked és más plugin/téma készítőknek nagyobb kontrollt biztosít a rendszer egésze felett, és kiveszi a függőségek kezelését a kezedből.

Ha ez nem lenne elég, ez a módja az eszközök hozzáadásának, sok téma piactér és maga a WordPress tároló nem fogja jóváhagyni a munkádat, ha nem ezt a módszert használod.