Hogyan vezeti be megfelelően a WordPress a JavaScriptet?JS és CSS fájlok egyéni betöltése

用WordPress weboldalprogramozók, fejlesztőWordPress bővítményVagy a WordPress-téma testreszabásakor néhány JavaScript- és CSS-parancsfájl-erőforrásra hivatkozik.

• Általában az emberek közvetlenül a HTML-hez használnak link-, script-címkéket.
• Valójában a WordPress beépített kifinomult funkciókkal és módszerekkel rendelkezik a szkriptekre való hivatkozáshoz.
• Így a WordPress beépített metódushivatkozásainak használata professzionálisabb és bővíthetőbb.

A hibás idézési módszer

Két általános idézési módszer létezik, ez rendben van, csak nem tökéletes vagy ésszerű.

1. típus:A linkcímkék CSS-fájlokra utalnak

• A szkriptcímkék JS-fájlokat alkalmaznak.Itt nem részletezzük.

2. típus:Használja a wp_head függvényt

• A wp_head függvény valamilyen egyéni vagy rendszer által meghatározott tartalom kiadására szolgál.
• Néha a következő kódot használjuk a fájl hivatkozására:

<?php
add_action('wp_head', 'wpcwl_normal_script');
function wpcwl_normal_script() {
echo '资源文件的链接';
}
?>

• Másolja a fenti kódot a functions.php fájlba a megfelelő fájlok hivatkozásához.

WordPress Enqueue Scripts erőforrás-mechanizmus

Amint azt mindannyian tudjuk, a WordPress számos bővítményt tartalmaz:

• Szinte minden beépülő modul hivatkozik valamilyen erőforrásfájlra.
• A két beépülő modul által hivatkozott erőforrások között elkerülhetetlenül ütközések lesznek, amelyek instabillá válnak, és befolyásolhatják a hatékonyságot.

Használja a wp_enqueue_script függvényt

• A WordPress erőforrásaira való hivatkozáshoz használjawp_enqueue_scriptOlyan függvény, amely a sorba állított vagy rendezett függvény nevében tartalmazza az enqueue szót.
• Az erőforrások sorba rendezésének WordPress-módszerével (Enqueue Scripts) a hivatkozások elkülönülnek a megfelelő fájloktól és az alapkódtól.
• Ha a felhasználó le akarja tiltani az erőforrást, törölheti, módosíthatja és megjegyzést fűzhet hozzá anélkül, hogy az alapkódból módosítaná.

Ezenkívül néhány gyakran használt könyvtár, például a jQuery, a jQuery UI stb. beépült a WordPressbe.

A wp_enqueue_script függvény segítségével közvetlenül hívhatjuk meg a beépített könyvtárat, ami elmenti a kódot és egy áttekinthetőbb specifikációt.

Ha ezzel a funkcióval hivatkozik saját JS- és CSS-fájljaira, akkor használnia kellwp_register_scriptA függvény regisztrál egy azonosítót (handle), majd használjawp_enqueue_scriptA függvény meghívja a jelzőnek megfelelő erőforrást.

Hogyan lehet megfelelően importálni a JS- és CSS-fájlokat a WordPress-be?

A WordPress ésszerű importálási módszereket biztosít a JS és CSS módszerekhez.

A következő kóddal importálhatja a plugin.css fájlt a bővítménybe ▼

<?php
function wpcwl_add_styles() {
wp_register_script('plugin_stylesheet', plugins_url('plugin.css', __FILE__));
wp_enqueue_script('plugin_stylesheet');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_styles' ); 
?>

A fenti a wp_register_script függvényt használja a plugin_stylesheet azonosítójú erőforrás létrehozásához.

Ezután adja hozzá a sorba állított kérelmeitwp_enqueue_scriptsakciók működnek.

Bár a függvény neve egy szkript, semmi köze az erőforrásfájl típusához, és CSS és JS esetén egyaránt érvényes.

A wp_register_script függvény valóban nem ilyen egyszerű, öt paramétere lehet:

1) $handle:Erőforrás azonosító.

• 由wp_enqueue_scriptátruházás.

2) $src:Az erőforrás helye.

• A relatív vagy abszolút címek a WordPress beépített függvényeit használják a címek stb.
• GyakoriHelymeghatározásfunkcióval rendelkezikplugins_url,get_template_directory_uri等.

3) $deps:támaszkodni.

• Ha a jQuery beépülő modulra hivatkozik, és a jQuery buildre kell hagyatkoznia, akkor ki kell töltenie a jQuery mezőt.
• Vegye figyelembe, hogy tömbként adják át.

4) $ver:Erőforrás verzió, opcionális.

5) $in_footer:Az aljára teszed?

• Normális esetben a JS fájlokat az oldal aljára kell elhelyezni, ezt a paramétert igazra állíthatja, üresen hagyhatja vagy False értékre, hogy felülre kerüljön.

Nézzünk egy teljesebb JavaScript fájl hivatkozási példát ▼

<?php
function wpcwl_add_scripts() {
wp_register_script('plugin_script', plugins_url('plugin_script.js', __FILE__), array('jquery'),'1.1', true);
wp_enqueue_script('plugin_script');
}

add_action( 'wp_enqueue_scripts', 'wpcwl_add_scripts' ); 
?>

A WordPress témák a wp_enqueue_script segítségével importálják az erőforrásokat

Programozók a WordPress téma fejlesztésében, használatábanwp_enqueue_scriptErőforrások importálása.

• A fenti példák példák a WordPress beépülő modulok fejlesztéséhez szükséges hivatkozott erőforrásokra.
• A témában hivatkozott módszer hasonló.

A fő különbség az, hogy a megfelelő függvény használatával lekérjük a témakönyvtárat, hogy megkapja a téma alatti erőforrásfájl címét.

Te tudod használniget_template_directory_urifüggvényt az aktuális témakönyvtár lekéréséhez.

Ha gyermektémát használ, akkor használnia kellget_stylesheet_directory_uriA függvény lekéri a szülőtéma könyvtárát a megfelelő erőforrások lekéréséhez.