Beépülő modulok CSS és jQuery hozzáadásához Divi és WordPress rendszerhez
A beépülő modulok könnyen használható felületeket biztosítanak. A kódot elkülönítve tartják a témától, így ha bármilyen módosítást hajt végre a témán, a kódot ez nem érinti.
A beépülő modulok másik előnye, hogy rengeteg lehetőség áll rendelkezésére. A WordPress Repository -ban több ezer plugin érhető el ingyenesen , valamint rengeteg prémium bővítmény fejlesztői ügynökségektől és független fejlesztőktől. Kiválaszthatja az Ön számára legmegfelelőbb felületet és szolgáltatásokat, és valóban létrehozhat egy egyéni webhelyet. Amikor olyan kódokat írunk, mint a CSS vagy a jQuery, rengeteg beépülő modul áll rendelkezésre.
Divi Modul egyéni CSS-választók
Divi Modul egyéni CSS-választók
Az első helyen a Divi Module Custom CSS Selectors bővítmény található . Ez a könnyű és praktikus beépülő modul csendesen működik a Divi webhely színfalai mögött, megnövelve a Speciális lap Egyéni CSS opciójában található CSS-választók számát.
Alapértelmezés szerint a Divi minden modulon belül tartalmaz néhány CSS-választót. Ezek a kódbeviteli terek elkülönítik az egyes modulok egyedi aspektusait, lehetővé téve az egyes elemek megcélzását és a CSS használatával stílusossá tételét. Bár ez egy nagyszerű előfeltétel, a rendelkezésre álló választóelemek száma nem olyan széles. A Divi Module Custom CSS Selectors ezt orvosolja azzal, hogy több mint 500 választót ad hozzá a Speciális laphoz, lehetővé téve a stíluslap teljes megkerülését.
Ez a beépülő modul rendkívül egyszerűvé teszi a CSS hozzáadását a Divi-hez, és időt és energiát takarít meg a Divi webhelyek készítése során. Tekintse meg a bővítmény részletes oktatóanyagát , és vásárolja meg a Divi Space áruházból .
Egyéni CSS és JavaScript fejlesztői kiadás
Egyéni CSS és JavaScript fejlesztői kiadás
A népszerű beépülő modul, a Custom CSS és JavaScript Developer Edition néhány új eszközt ad a WordPress Megjelenés menüjéhez: egyet a Javascripthez és egyet a CSS-hez. Mindegyiknek több lapja van, ahol bizonyos típusú kódokat adhat hozzá. Javítja a teljesítményt azáltal, hogy az egyéni CSS- és JavaScript-kódot a fájlrendszeren keresztül szolgálja ki, nem pedig az SQL-adatbázison. Rendszerezheti a kódot virtuális fájlokkal, amelyek minden fájlhoz lapot hoznak létre. Tartalmazza a szintaxis kiemelését. Bármely WordPress témával működik, és élő előnézettel rendelkezik.
A részletes oktatóanyagért tekintse meg az Egyéni CSS és JavaScript hozzáadása a Divi webhelyhez plugin segítségével című cikket . Van egy ingyenes verzió is , amely nem tartalmazza az extra lapokat és funkciókat, de továbbra is lehetővé teszi a Javascript és a CSS használatát. További információ az Egyéni CSS és JavaScript Developer Edition bővítményről .
Egyszerű egyéni CSS és JS
Egyszerű egyéni CSS és JS
Az Egyszerű egyéni CSS és JS új menüt ad a WordPress irányítópultjához HTML-, CSS- és JavaScript-szerkesztőkkel. Miután létrehozta a kódot, kiválaszthatja, hogy a webhelyen hol működjön a kód. Válasszon soron belüli, külső fájlt, fejlécet vagy láblécet. Adjon hozzá kódot az előtérhez vagy a háttérhez. A szintaxis kiemelve van.
Fejlécek és láblécek beszúrása
Fejlécek és láblécek beszúrása
A Fejlécek és láblécek beszúrása egy területet ad a WordPresshez két mezővel, ahol hozzáadhat HTML-t, CSS-t vagy JavaScriptet: egyet a fejléchez és egyet a lábléchez. Beállítása és használata egyszerű. A kód minden olyan oldalon vagy bejegyzésen megjelenik, amely fejlécet vagy láblécet jelenít meg.
CSS és JavaScript eszköztár
CSS és JavaScript eszköztár
A CSS és JavaScript Toolbox lehetővé teszi, hogy kódot hozzon létre webhelye bizonyos helyeihez. Nevezze el a kódot, válassza ki a helyet, és kezdje el létrehozni a kódot a szerkesztőben. Tartalmazza a szintaxis kiemelését. Adjon hozzá sablonokat a kódsablonkezelőből. Hozzon létre HTML-t, PHP-t, Javascriptet vagy CSS-t, és készítsen biztonsági másolatot a kódjáról. Kód hozzáadása oldalakhoz, bejegyzésekhez, egyéni bejegyzésekhez, kategóriákhoz stb. Adjon hozzá kódot a frontendhez vagy a háttérhez.
Eszközök CSS és jQuery hozzáadásához Divi és WordPress rendszerhez
Az eszközök lehetővé teszik kód létrehozását és tesztelését, mielőtt hozzáadná a kódot webhelyéhez. Gyakran olyan funkciókat kínálnak, amelyeket kifejezetten a fejlesztők számára hoztak létre, mint például a szintaxis kiemelése, kódkönyvtárak létrehozása, speciális tesztelési szolgáltatások, a kód összeállítása, amikor az kész, a kód megosztása egy csapattal vagy a nyilvánossággal stb. Vannak online eszközök. valamint offline letölthető és használható programok.
CodePen
CodePen
Létrehozhat kódot a Divi-ben vagy más eszközzel, és beillesztheti a kódot a Divi-be. A CodePen egy online közösségi fejlesztőkörnyezet, ahol a fejlesztők kódot hozhatnak létre és megoszthatnak, vagy csapatokkal együttműködve létrehozhatják kódjukat. Hozzon létre tollakat, projekteket, bejegyzéseket, gyűjteményeket és egyebeket.
Létrehozhatja a HTML-t, a CSS-t és a JavaScriptet a CodePen kódgenerátorban, előállíthatja a kódot a toll URL-címének a generátorba történő beillesztésével, előállíthatja a lefordított kódot, majd másolja és illessze be a kódot a Divi kódmodulba . Ennek a módszernek az az előnye, hogy létrehozhatja a HTML-t, a CSS-t és a JavaScriptet külön fájlként, majd lefordíthatja őket, ha már a kívánt módon működnek.
jQuery függvénygenerátor
jQuery függvénygenerátor
A Divi Space jQuery Function Generator egy online eszköz, amely megkönnyíti a kód létrehozását, hogy beillessze a Divibe. A legördülő menüből válassza ki, hogy mit szeretne tenni (például CSS hozzáadása, elem hozzáadása, elem animálása stb.). Ezután válassza ki, hogy mikor szeretné végrehajtani a kódot (mikor töltődik be az oldal, mikor kattintanak egy elemre, lebegve stb.). Végül válassza ki, hogyan adja hozzá a fájlt a Divi-hez.
Minden lépés egy kódszintet ad a kódmezőhöz. Miután kiválasztotta az összes beállítást, hozzáadhatja egyéni kódját, majd egyszerűen másolja be a kódot a Divibe.
Atom
Atom
Az Atom egy kódszerkesztő, más néven IDE, amely letölthető és offline is használható. Intelligens felhasználói felülettel rendelkezik, amely leegyszerűsíti a navigációt. A funkciók közé tartozik a környezettudatos automatikus kiegészítés, a vázlatnézet, a definíció elérése és az összes hivatkozás megkeresése. Tartalmazza továbbá a dokumentum formázását, az egérrel a felfedéshez szükséges információkat, valamint a hibák és figyelmeztetések megjelenítéséhez szükséges diagnosztikát. Rengeteg fejlett funkcióval rendelkezik, mint például az együttműködési eszközök és a GitHub integráció. Ha elkészült a kóddal, egyszerűen másolja ki és illessze be a Divi-be.
Magasztos szöveg
Magasztos szöveg
Egy másik kódszerkesztő vagy IDE, a Sublime Text szintén letölthető program, amely hatékony szerkesztési funkciókkal rendelkezik. Tartalmaz egy tiszta felhasználói felületet mappákkal, lapokkal és szintaktikai kiemeléssel. Az eszközök közé tartozik a többszörös kijelölés, így a változók egyidejű átnevezése, a Goto bármi funkció a fájlok és a függvények gyors ugrásához, a goto definíció a forrásban való navigáláshoz és még sok más. A teljesítményt szem előtt tartva tervezték. Hozza létre a kódot, majd másolja és illessze be a Divi-be.
zárójelek
zárójelek
A Brackets egy kódszerkesztő Windows és Mac rendszerhez, amelyet a webfejlesztők és a frontend fejlesztők szem előtt tartásával terveztek. Könnyű, és tartalmaz beépített szerkesztőket, előfeldolgozó támogatást, a kód élő előnézetét, szintaktikai kiemelést és még sok mást. Segítséget nyújt anélkül, hogy akadályozná. A funkciókat akár olyan bővítményekkel is bővítheti, mint például a Beautify bővítmény, amely formázást biztosít a JavaScript, HTML és CSS számára. Miután létrehozta a kódot, kimásolhatja és beillesztheti a Divibe.
Kód hozzáadása a Divi-hez a használatával
Többféleképpen is hozzáadhat kódot a Divi témához. Ezek a módszerek a következőket tartalmazzák:
- A Divi kód modul, ill
- Az Integrációk lap a Divi téma beállításaiban
Divi kód modul
Divi kód modul
A Divi Builder tartalmaz egy kódmodult , amely lehetővé teszi kód hozzáadását bármely oldalhoz, projekthez vagy bejegyzéshez. A kódmodullal rövid kódokat vagy statikus HTML-kódot adhat hozzá a terv jellegétől függően. A modul a többi Divi modulhoz hasonlóan tartalmazza a Tartalom, a Tervezés és a Speciális füleket.
A kódmodul és működésének részletes leírásáért olvassa el az Elegant Themes útmutatót.
Divi témabeállítások Integrációs lap
Divi témabeállítások Integrációs lap
A Divi Theme másik területe, ahol egyéni kódot adhat hozzá , a Divi Theme Options konzol Integrációk lapja . Itt engedélyezheti a kódot a fejléchez, a törzshöz, az egy felső és egy alsó részhez. Mindegyikhez más-más mező tartozik, ahová beillesztheti a kódját. A kód szkriptezésének megkönnyítése érdekében az integrációs Tab kódbeviteli szakaszok szintaktikai kiemelést és egyéb kódformázó eszközöket tartalmaznak.
0 hozzászólás