Meg akarja tanulni a JavaScript betöltését a WordPressre?

Minden WordPress téma általában PHP, HTML, CSS és JavaScript fájlokból áll. A JavaScript népszerű programozási nyelv a fejlesztők körében. WordPress téma. Ez egy olyan nyelv, amely interaktívvá teszi a HTML oldalt, és lehetővé teszi a szerverrel való interakciót is.

Óriási előnyt jelent a webhelyén történő használatának ismerete.

Annak érdekében, hogy valóban használni tudja a JavaScriptet, tudnia kell, hogyan kell betölteni azt a webhelyére.

De korábban, ha még soha nem telepítette a WordPress Discover programot Hogyan kell telepíteni a WordPress blog 7 lépések et Hogyan lehet megtalálni, telepíteni és aktiválni a WordPress téma a blog 

És hát hát miért vagyunk itt?

Hogyan töltsd be a JavaScript szkripteket a WordPress programban

Tegyünk egy lépést hátra, és nézzük meg először, hogyan tölti be a WordPress a szkripteket és stílusokat. Megtudta, hogy a JavaScript fájlok létrehozásakor felveheti őket az oldalra a fejléc részben vagy a láblécben.

Fedezze fel a következő oktatóanyagot: Hogyan tömörítheti a CSS, a HTML és a Javascript fájlokat

A WordPress pontosan ugyanezt teszi, de ezeket a szkriptcímkéket nem lehet egyszerűen a fejlécfájlba vagy láblécbe ejteni. WordPress téma. A WordPress egy "okos betöltési mechanizmust" használ enqueueing ".

Ez a mechanizmus szükséges a függőségek értelmezéséhez. Ha jQuery kódot ír a WordPress témához, akkor maga a jQuery programot kell először betölteni.

Olyan kódot ír, amely egy jQuery bővítményre támaszkodik. Ebben az esetben először a jQuery-t kell betölteni, aztán a jQuery-bővítményt, majd a kódot.

A "parancsfájlok" szkriptek (Add to Que)

A szkripteket sorba állíthatja a WordPress témamappájában vagy a saját mappájában WordPress plugint. Íme a teljes kód a jQuery-n alapuló szkripthez:

my_theme_scripts of function () {

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', tömb ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Először is, egy függvénynek " hajlott A WordPress (WordPress horgok használata). A függvény első érve ADD_ACTION () megmondja a WordPressnek, hogy hol kell ezeket a szkripteket elhelyezni:

• A nyilvános térben
• A műszerfalon

Ha a " wp_enqueue_scripts Betölti őket a nyilvános térbe, ha " admin_enqueue_scripts Betölti őket a műszerfalra.

A « ADD_ACTION Használhatja a " wp_enqueue_script A szükséges szkriptek hozzáadásához. A függvény egy szükséges paramétert és négy opcionális paramétert vesz:

• Az első paraméter a szkript neve. Választhat, amit akar, de feltétlenül használjon egyedi nevet.
• A második paraméternek tartalmaznia kell a fájl helyét a WordPress témán vagy WordPress plugint.
• A harmadik paraméter egy sor függőséget tartalmaz. A fenti példában azt mondtam, hogy a jQuery függőség. Minden függőség betöltődik a kérdéses szkript elé.
• A negyedik paraméter egy verziószám
• Az ötödik és az utolsó paraméter jelzi, hogy a fejlécre vagy a láblécre szeretné-e betölteni a parancsfájlt. Használja a "true" -t a láblécbe, vagy a "false" -t a fejlécbe (ezt a paramétert sem lehet kitölteni).

a melléképületek

A WordPress a jQuery egy példányát kínálja, ezért gond nélkül hozzáadhatja függőségként. Számos más jQuery szkript és bővítmény található, amelyeket a WordPress kínál. Ha a kódod valamelyiküktől függ, akkor nem kell használnod az egyik példányodat, csak függőségként adod hozzá. itt van egy a WordPress által kínált parancsfájlok listája.

Ha több független parancsfájlt is felvesz, pontosan ugyanúgy hozzáadhatja őket függőségként. Vessen egy pillantást az alábbi példára:

my_theme_scripts of function () {

 wp_enqueue_script ("saját bázis szkript", get_template_directory_uri (). '/js/my-base-script.js', tömb ('jquery'), '1.0.0', igaz);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', tömb ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Mivel az első szkript a jQuery-től függ, akkor a következő szkript is attól függ. Tehát nem kell hozzáadnia a jQuery-t mindkét függőségéhez. Ez megkönnyíti a függőség kezelését.

Feltételes betöltés

Előfordulhat, hogy a szkriptet minden oldalon szeretné használni, de gyakran a szkriptet egy adott oldalra szeretné betölteni. Ez különösen igaz, ha megfontoljuk a szkriptek hozzáadását az irányítópulthoz. Jó példa erre rövid kódok használata. A rövid kódok lehetővé teszik a felhasználók számára, hogy néhány egyszerű trükkel fejlett megjelenítéseket hozzanak létre a vizuális szövegszerkesztőben.

my_theme_scripts of function () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', tömb ('jquery'), '1.0.0', true);

 wp_enqueue_script ('my-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Mentöttük a szkriptet, hogy a WordPress megismerje a szkriptet, de a " Enqueue ”. Ilyen módon a szkript csak akkor adódik hozzá az oldalhoz, ha a rövid kódot ezen az oldalon használják.

A szkriptek feltételekkel történő betöltésének másik módszere a feltételes függvények használata. Ha szkriptet szeretne betölteni a kategória összes archív oldalára, használhatja a függvényt is_category ().

Például létrehozhat egy körhinta képeket, amelyeket a felhasználók így hozzáadhatnak a cikkhez: [carousel ids = '42,124,123,331,90, XNUMX ′]. A cikk oldalán körhinta jön létre az azonosítójuk által megjelölt képek felhasználásával.

Ehhez létre kell hoznia egy fájlt " carousel.js Ami a jQuery-en alapul. Íme egy odajutási kód (Nem hoz létre körhintat, de lehetővé teszi, hogy megnézze, hogyan történik a betöltési folyamat):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('saját körhinta', get_template_directory_uri (). '/js/my-carousel.js', tömb ('jquery'), '1.0.0', igaz);

}

add_shortcode ('körhinta', 'saját_karusszel');

my_carousel funkció ($ args) {

 $ atts = shortcode_atts (tömb (

 'Ids' => ",

 ), $ Atts, „körhinta”);

 wp_enqueue_script ('saját körhinta');

 // A körhinta itt megjelenítésének kódja

}

Szkriptek eltávolítása és cseréje

Ez messze egy általános forgatókönyv, de néha el kell távolítania vagy cserélnie kell a szkriptet. Olyan helyzetekbe kerültem, amikor egy bővítmény által hozzáadott szkript (de a téma nem használja) kompatibilitási problémákat okozott. A "visszavonás" volt a legjobb megoldás, mivel a hiba teljesen eltűnt.

A jQuery egy újabb verzióval is helyettesíthető, ha tesztel valamit, hogy megbizonyosodjon arról, hogy kompatibilis-e az újabb verziókkal.

Ezekben a helyzetekben a funkciók wp_deregister_script () "És" wp_dequeue_script () Hasznosak. Így szerkesztheti a WordPress-ben már hozzáadott kódot.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', tömb (), '3.0.0', true);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', tömb ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Végső gondolat

Ez a módszer a WordPress-be történő feltöltéshez nagyszerű, mert lehetővé teszi a szkriptek moduláris hozzáadását. Ez lehetővé teszi a függőségek moduláris hozzáadását.

Fedezzen fel néhány prémium WordPress-bővítményt  

Használhatsz mást is WordPress plugin modern megjelenést kölcsönözni és optimalizálni blogja vagy weboldala kezelését.

Kínálunk itt néhány prémium WordPress plugin-ot, amelyek segítenek abban.

1. Prémium SEO csomag

A prémium SEO csomag a WordPress plugint amely optimalizálja a SEO-t és tömöríti a CSS-t, hogy javítsa webhelye betöltési sebességét.

A beépülő modul néhány kattintással lehetővé teszi webhelye tervezésének kezelését is. Jellemzői: CSS és JS tömörítés, video és kódrészlet webhelytérkép integráció, HTML és XML fájl formázás, 404 és 301 oldal átirányítás, közösségi média megosztás, 'ALT címke, jól testreszabható elrendezés

Letöltés | demó | Web hosting

2. Woocommerce Delivery Time Picker a szállításhoz

A Woocommerce Delivery Time Picker for Shipping egy WooCommerce kiterjesztés, amely lehetővé teszi az ügyfeleknek, hogy kiválasszák a szállítási dátumot és időpontot a fizetés oldalon. 

Az ügyfelek kiválaszthatják a csomag kiszállítási idejét otthon. A kiszállítási idő a weboldal adminisztrátorainak látható lesz, e-mailben a weboldal vagy az online áruház adminisztrátorainak is elküldésre kerül.

Letöltés | demó | Web hosting

3. Hero Menü

Ez a bővítmény lehetővé teszi, hogy saját, egyedi WordPress menüt készítsen néhány meglehetősen egyszerű lépésben. Különösen lehetővé teszi, hogy egyszerűen és intuitívan hozzon létre egy elegáns és professzionális WordPress menüt. 

A legösszetettebb funkciókkal teli mega menütől a legegyszerűbb menüig, a legördülő menüvel, a WordPress bővítménnyel HeroMenu bármilyen menüt beállít, és percek alatt elindul.

A szolgáltatások szempontjából többek között kínál: tökéletes működés PC-n, táblagépen és okostelefonon, -tól Egyéni CSS Saját stílusok hozzáadása a menübe, egy megamenükészítő, több támogatott böngésző: Chrome, Firefox, Safari, Opera, IE9 és így tovább.

Letöltés | demó | Web hosting

Ajánlott források

Nézzen meg más ajánlott forrásokat, amelyek segítenek megoldani a többi gyakori WordPress-hibát. 

• Hogyan Fix átirányítás hibák WordPress
• Hogyan hozzunk létre egy egyéni elrendezést Elementor
• Hogyan lehet létrehozni egy intranet WordPress a szervezet számára
• Hogyan hozzunk létre egy bejelentkezési oldalt WordPress

Következtetés

Itt van ! Ez az oktatóanyag, remélem, hogy segített megérteni, hogyan kell betölteni a JavaScriptet a WordPressre. Ne habozzon, ossza meg barátaival a szociális hálózatok előnyösek. 

Azonban Ön is képes lesz konzultálni a mi erőforrások, ha további elemekre van szüksége az internetes oldalak létrehozására irányuló projektek végrehajtásához, olvassa el a WordPress blog létrehozása.

De addig is mesélj nekünk az önről észrevételek és javaslatok a dedikált részben.

...