Javascript hozzáadása a WordPress témákhoz A helyes út

A Javascript hozzáadása a WordPress témához egy speciális módszer, amely megakadályozza a beépülő modulokkal vagy a szülő WordPress témákkal való konfliktusokat. A probléma az, hogy sok „fejlesztő” közvetlenül a header.php vagy footer.php fájlba hívja a javascript fájljait, ami a helytelen módszer..


Ebben az útmutatóban megmutatom, hogyan kell helyesen meghívni a javascript fájlokat a function.php fájl használatával, hogy azok közvetlenül a webhely fej- vagy lábléccímkéjébe kerüljenek. Ilyen módon, ha egy disztribúciós témát fejlesztett ki, és a végfelhasználó módosítani szeretné a szkripteket egy lehetséges gyermektémán keresztül, vagy ha tömörítést / gyorsítótárazást vagy más optimalizáló plugint használ, akkor megfelelően fog működni. És ha gyermektémával dolgozik, akkor a szkripteket a megfelelő módon adják hozzá, anélkül, hogy a header.php vagy footer.php fájlokat lemásolnák a gyermek témájába, amelyeknek soha nem lenne szükségük (jól kódolt témák esetén)

Rossz út a Javascript hozzáadása a WordPress témákhoz

A javascript felhívása a header.php fájlba vagy a footer.php fájlba, például az alább látható módon, NEM a helyes út, és nagyon ajánlom ellene, gyakran konfliktusokat okoz más pluginekkel, és a CMS-sel való munka során kézzel kell tennem a dolgokat. jó ötlet.

A Javascript hozzáadásának helyes módja a WordPress témákhoz

A javascript hozzáadása a WordPress témához annál jobb, ha ezt a function.php fájl segítségével használja wp_enqueue_script. A javascript betöltéséhez a wp_enqueue_scripts művelet segítségével megőrizheti a témát a bajoktól.

Példa

wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);

A fenti kód betölti a webhelyen a my-script.js fájlt. Mint láthatja, csak a $ kezelőt szerepeltem, de függőségeket is hozzáadhat a szkripthez, a verziószámhoz, és hogy a fejlécbe vagy a láblécbe tölti-e be (alapértelmezés szerint fejléc).

A wp_enqueue_script () függvény technikailag bármilyen téma- vagy plugin-sablonfájlban használható, de ha globális szkripteket tölt be, akkor azt a téma function.php fájljába vagy külön fájlba kell helyezni, amely kifejezetten a szkriptek betöltésére szolgál a webhely. De ha csak egy szkriptet kíván betölteni egy adott sablonfájlra (például a galériabejegyzésekre), akkor a függvényt közvetlenül a sablonfájlba helyezheti, azonban személyesen azt javaslom, hogy az összes szkriptet egy helyen tartsa, és feltételesen használja a betöltést. szkriptek, ha szükséges.

WordPress által üzemeltetett szkriptek

A WordPress egyik nagyszerű dolga, hogy már van egy csomó szkript, amelyet a házigazda tárolt és regisztrált, és amelyet felhasználhat a témafejlesztés során. Például a jQuery-t, amelyet szinte minden projektben használnak, MINDIG mindig a WordPress-ből kell betölteni, és soha nem szabad harmadik fél webhelyén, például a Google-ban tárolni. Tehát, mielőtt egyéni szkriptet adna a projekthez, ellenőrizze a regisztrált szkriptek hogy megbizonyosodjon arról, hogy ez még nem szerepel a WordPress-ben, és ha van, akkor töltse be azt, ahelyett, hogy regisztrálja a sajátját.

A WordPress Enqueue Hook használata

Korábban megemlítettük a szkript betöltéséhez szükséges funkciót a webhelyen, azonban ha nem sablonfájlokkal, például a function.php fájllal dolgozol, akkor ezt a funkciót hozzá kell adnia egy másik függvénybe, amely a megfelelő WordPress horgokba van kapcsolva, így a szkriptek regisztrálva van a WordPress összes többi szkriptével, a harmadik fél beépülő moduljaival és a szülői témával, ha gyermektémát használ.

A WordPressnek két különféle akcióhorogja van, amelyekkel szkripteket hívhat.

  1. wp_enqueue_scripts – parancsfájlok betöltésére használt művelet
  2. admin_enqueue_scripts – parancsfájlok betöltésére használt művelet a WP adminban

Íme egy példa (amelyet hozzáadhatunk a function.php fájlhoz) arról, hogyan lehet létrehozni egy funkciót, majd a WordPress horog segítségével hívni a szkripteket.

/ **
* Kérd meg egy szkriptet
* /
funkció myprefix_enqueue_scripts () {
wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array (), true);
}
add_action ('wp_enqueue_scripts', 'myprefix_enqueue_scripts');

jegyzet: Lásd, hogyan használjuk a „get_template_directory_uri” funkciót a szkript helyének meghatározásakor? Ez a funkció létrehoz egy URL-t a témamappához. Gyerek témával dolgozik, inkább a „get_stylesheet_directory_uri” kifejezést kell használni, hogy az a gyermektémára, és nem a szülői témára mutatjon..

Inline Javascript kód hozzáadása

Bár a beépített javascriptet bármilyen sablonfájlba könnyen beillesztheti a szkriptcímke segítségével, jó ötlet lehet, ha a WordPress horgokat is használja a beillesztett kód hozzáadásához, különösen akkor, ha ez alapvető plugin vagy témakód. Az alábbiakban bemutatunk egy inline szkriptet a webhelyére:

funkció myprefix_add_inline_script () {
wp_add_inline_script ('saját szkript', 'riasztás (' hello world ');', 'után');
}
add_action ('wp_enqueue_scripts', 'myprefix_add_inline_script');

Ehhez hozzáteszi a beillesztett javascriptet az előzőleg regisztrált „saját szkript” szkript után. A wp_add_inline_script használatakor csak a már regisztrált szkript előtt vagy után is hozzáadhat inline kódot, tehát ha egy adott szkript kódját próbálja módosítani, akkor ellenőrizze, hogy az utána betöltődött-e, vagy ha csak hozzá kell adnia egyéni kódot, akkor be is illesztheti. a jquery szkripthez, amelyet általában a legtöbb WordPress-témakör betölt, és ha nem, akkor a wp_enqueue_script segítségével töltse be a jQuery WordPress-tárolt verzióját..

Ennek a módszernek az alkalmazásával az emberek könnyen eltávolíthatják a szöveges szkripteket egy gyermektéma vagy egy plugin-kiegészítő révén, ez megőrzi az összes egyedi javascriptet, gondosan rendezve, és a WordPress elemzi, amely biztonságosabb lehet. Gyerek témát használva betölti a szkripteket a function.php fájlon keresztül, ahelyett, hogy a header.php vagy footer.php fájlokat másolja át a gyermek témájára..

Ugyanakkor, ha gyermek témában dolgozik, akkor ezt nem kell megtennie, egyszerűen leteheti a kódot a fejlécbe, akár a wp_head, akár a wp_footer kampók segítségével, például az alábbi példa:

add_action ('wp_footer', function () {?>  
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me

    Like this post? Please share to your friends:
    Adblock
    detector
    map