Komponensek: létrehozás és vezérlők

A komponens egy saját widget, blokk vagy elem, amelyet egyszer felépítesz, majd bárhol újra felhasználsz. Egy fejlesztő például elkészít egy kártyát, és eldönti, milyen vezérlői legyenek: szöveg, kép, szín. Ezután az oldalakat szerkesztők a kész komponenst a saját tartalmukkal töltik ki.

A komponens felépíthető a blokkszerkesztővel (Gutenberg), Elementorral, Bricksszel vagy Timber/Twiggel. Kész állapotban az Elementorral, a blokkszerkesztővel és a Bricksszel készült oldalakon és sablonokban használható.

A Listázások/komponensek lista

A komponensek a JetEngine → Listázások/komponensek oldalon vannak, a listázási sablonok mellett, közös listában. A lista felett az Összes, a Listázási elemek és a Komponensek szűrő látható, mellettük az elemek számával.

https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-engine

A lista felett két gomb van: az Új elem hozzáadása a listázási sablonhoz, az Új komponens hozzáadása a komponenshez tartozik.

Új komponens létrehozása

1. Kattints az Új komponens hozzáadása gombra.
2. A Komponens neve mezőbe írd be a nevet. Ez lesz a generált widget, blokk vagy elem neve.
3. A Komponens nézete listában válaszd ki, mivel építed fel a komponenst: Elementor, Bricks, Timber/Twig vagy Blokkok (Gutenberg).
4. Kattints a Komponens létrehozása gombra.

https://minta-bolt.hu/wp-admin/edit.php?post_type=jet-engine

A nézetek csak akkor jelennek meg a listában, ha a hozzájuk tartozó bővítmény vagy téma telepítve és aktív. A Timber/Twig választásához a JetEngine → JetEngine → Teljesítmény fülön be kell kapcsolni a Timber/Twig nézetek kapcsolót.

https://minta-bolt.hu/wp-admin/post.php?post=28&action=edit

A kép a blokkszerkesztős komponens szerkesztőjét mutatja. A jobb oldali panelen a Beállítások alatt a két vezérlőgomb, lejjebb a Komponens CSS található.

A vezérlők fajtái

Egy komponensnek két vezérlőcsoportja van: tartalmi és stílusvezérlők. Ezeket a szerkesztő felhasználó a komponens használatakor a widget beállításai között látja.

Tartalmi vezérlők

Beállítás	Mit csinál
Control Label	A vezérlő felirata, amely a komponens widgetének (blokkjának, elemének) beállításai között jelenik meg.
Control Name	A vezérlő neve, amely az adatbázisba mentődik. A komponensen belül egyedi kell legyen a stílusvezérlőkkel együtt, és csak kisbetűt, számot és alsó vonalat tartalmazhat.
Control Type	A vezérlő típusa: Szöveg, Szövegmező, Formázott szöveg, Kiválasztás vagy Egyetlen média. A Kiválasztás típusnál egy extra mezőben megadhatod az opciókat.
Default Value	Az alapértelmezett érték.

A Kiválasztás opcióit soronként egy tétel adja meg, a címke és az érték között :: jellel, például red::Piros.

https://minta-bolt.hu/wp-admin/post.php?post=28&action=edit

A kép a blokkszerkesztő tartalmivezérlő-ablakát mutatja: a Save Controls gomb menti a vezérlőket, az Add new item új tételt ad hozzá.

Stílusvezérlők

Jelenleg csak a színvezérlők támogatottak. Három beállításuk van: a Control Label, a Control Name (ugyanazokkal a szabályokkal, mint a tartalmi vezérlőnél) és a Default Value. Blokkszerkesztőben az alapértéket hexadecimális színkódként add meg (például #0DC167).

Vezérlők szerkesztése nézetenként

Elementor

1. Add hozzá a widgeteket az oldalhoz, amelyeket vezérelni szeretnél.
2. A bal alsó sarokban kattints a fogaskerék ikonra a komponens beállításaihoz. Három fül van: Általános beállítások, Component Content Controls és Component Style Controls.
3. Az általános fülön megváltoztathatod a komponens Címét és az Állapotát (Piszkozat, Jóváhagyásra vár, Privát, Közzétéve).
4. A tartalmi vezérlők fülön alapból egy szövegvezérlő van. A tételek mellett duplikáló és törlő ikon látható. Új tételt az Add Item gombbal adhatsz hozzá.
5. A stílusvezérlők fülön az Add Item gombbal hozhatsz létre színvezérlőt.

Blokkszerkesztő (Gutenberg)

A komponens beállításai az Item/Component fül Beállítások paneljén vannak.

• Add/Edit Content Controls: megnyitja a tartalmi vezérlők ablakát. Az Add new item gombbal adhatsz hozzá tételt, a Save Controls gombbal mentheted a vezérlőket.
• Add/Edit Style Controls: ugyanilyen ablak a stílusvezérlőknek.
• Komponens CSS: itt adhatsz meg CSS-szabályokat a komponenshez. A felvett stílusvezérlők a szövegmező alatt jelennek meg, és a CSS-kódban felhasználhatók.

Bricks

1. A JetEngine → Listázások/komponensek oldalon vidd az egeret a komponens fölé, és kattints az Edit component gombra.
2. Az ablakban a Content Controls és a Style Controls fülön ugyanazok a beállítások vannak, mint fent.
3. Kattints a Save & Go To Editor gombra, és a szerkesztőben add hozzá az elemeket.

Timber/Twig

A Timber szerkesztőben kattints a Settings gombra. Az ablak két fülén (Content Controls, Style Controls) a New Control gombbal adsz hozzá vezérlőt. A stílusvezérlők Default Value mezőjében használhatsz egyéni színt vagy az Elementor globális színeit: ehhez a mező alatti Use CSS Variable gombbal választhatsz értéket.

Közvetlenül a vezérlőpulton

A vezérlők a JetEngine → Listázások/komponensek oldalon is szerkeszthetők: vidd az egeret a komponens fölé, és kattints az Edit Component gombra. Az ablakban a tartalmi és a stílusvezérlők ugyanazokkal a beállításokkal elérhetők.

A vezérlők hozzárendelése az elemekhez

A vezérlő csak akkor működik, ha a hozzá tartozó elemhez is hozzárendeled.

Elementor

1. Nyisd meg a vezérlendő widget beállításait.
2. Kattints a dinamikus címkék ikonra, és válaszd a Component Control Value (szöveghez), a Component Control Image (képhez) vagy a Component Control Color (színhez) címkét.
3. A Control Name mezőbe írd be a komponens beállításaiban megadott nevet.

Másik lehetőség: a widget Forrás listájában a Component Control Value értéket választod, és a következő mezőbe írod a vezérlő nevét.

Blokkszerkesztő

1. A blokk mezője fölött kattints a Dynamic Tags gombra.
2. Az Adatforrás fülön válaszd a Custom data forrást, a SELECT DATA TO SHOW listában pedig a Component Control Value értéket.
3. Add meg a CONTROL NAME értéket. Ha képvezérlőt rendelsz hozzá, kapcsold be az Is Image kapcsolót, és állítsd be a kép megjelenítését.

Közvetlenül a blokk beállításaiban is megteheted: a Dynamic Image blokknál válaszd a Component Control Value forrást, és add meg a vezérlő nevét az OR SET MANUALLY mezőben.

Bricks

1. Az elem beállításainál kattints a Dynamic Data gombra.
2. Válaszd ki a létrehozott vezérlőt. Ismételd meg ezt minden vezérelt elemnél.
3. A stílusvezérlőket a STÍLUS fülön rendeled hozzá. A háttérszín esetén a BACKGROUND részben kattints a csepp ikonra, válaszd a RAW opciót, és kattints a Dynamic Data gombra, majd válaszd ki a stílusvezérlőt.

Timber/Twig

1. A HTML-részben kattints a Dynamic data gombra, és válaszd a Component Control Value makrót.
2. Adj meg Control Name értéket, és szükség esetén kapcsold be az Is Image kapcsolót.
3. A beszúráshoz kattints az Insert gombra.
4. A stílusvezérlőket a CSS-kódba a var() gombbal illesztheted be.

A komponens használata a szerkesztőben

A kész komponenst a szerkesztő keresőjében a nevével találod meg: Elementorban a widgetek között, a blokkszerkesztőben a blokkok között, Bricksben az elemek között. A tartalmi és stílusvezérlők a widget Tartalom és Stílus fülén jelennek meg.

A Formázott szöveg vezérlő a blokkszerkesztőben másképp működik: Elementorban és Bricksben a szöveget már a komponens létrehozásakor megadhatod, a blokkszerkesztőben pedig a komponens oldalon való használatakor. Ehhez kattints a Formázott szöveg neve melletti Edit HTML gombra, illeszd be a szöveget (lehet benne link, dőlt vagy félkövér rész is), és mentsd a Done gombbal.

A komponens felhasználási példái: komponens Elementorban, a komponens környezete, komponens a Query Loopban és a Listing Gridben, adatok lekérése komponenssel.