Komponensek használata a Query Loopban és a Listing Gridben

A JetEngine komponensei újrahasználható, saját widgetek, elemek vagy blokkok, amelyeket különböző oldalakon és sablonokban is elhelyezhetsz. A komponenst a JetEngine Listing Grid elemébe, widgetjébe vagy blokkjába, illetve a Bricks téma Query Loopjába is beteheted.

Előfeltétel: Elementor (az ingyenes változat elég), a blokkszerkesztő vagy Bricks, és az aktív JetEngine. A példa Bricksben készül.

A példában egy felhasználói adatokat mutató komponenst teszünk a bejegyzések Query Loopjába vagy Listing Gridjébe. A bejegyzések lehetnek alap WordPress-bejegyzések vagy egyéni bejegyzéstípus elemei. A komponens Context (környezet) beállításával minden bejegyzésnél a szerzőjének adatai jelennek meg.

Komponens létrehozása

1. Nyisd meg a JetEngine → Listázások/komponensek oldalt, és kattints az Új komponens hozzáadása gombra.
2. A beállító ablakban add meg a komponens nevét (például „Felhasználói adatok”), és a Komponens nézete listában válaszd ki a szerkesztőt: Elementor, Bricks, Timber/Twig vagy Blokkok (Gutenberg). A példában a Bricks a választott nézet.
3. Kattints a Komponens létrehozása gombra.
4. A szerkesztőoldalon helyezz el három Dynamic Field elemet. Mindháromnál a forrás (Source) legyen Post/Term/User/Object Data, az objektummező (Object field) pedig sorban Login, ID és Email.
5. Mindhárom Dynamic Field elemnél kapcsold be a Customize field output beállítást, és add meg a Field format értékét (például Email: %s).
6. Mentsd a komponens beállításait.

A felhasználói metamezők felvételéről és a felhasználói adatok megjelenítéséről a Listázási sablon felhasználókhoz fejezetben olvashatsz. A komponens tartalmi és stílusvezérlőit a komponensek áttekintése írja le.

Komponens a Query Loopban

1. Nyiss meg egy új vagy meglévő oldalt a Bricks szerkesztővel (Oldalak menü).
2. A „+” ikonnal adj hozzá egy új szakaszt, és a jobb oldali Structure fülön kattints a Container elemre.
3. A CONTENT fülön kapcsold be a Use query loop kapcsolót, és kattints a „végtelen” ikonra.
4. A megjelenő ablakban módosíthatod a lekérdezést. A példában a Type értéke Posts, a bejegyzéstípus Posts; más forrást is választhatsz.
5. Az ablakon kívülre kattintva zárd be, és töltsd meg a konténert a kívánt tartalommal, például dinamikus elemekkel: Dynamic Field (Post/Term/User/Object Data forrással, Title és Content mezővel) és Dynamic Image (Post thumbnail forrással).
6. A bal oldali panelen keresd meg a létrehozott komponenst a neve alapján, és húzd az oldalra.
7. A GENERAL fülön a Component Context mezőnél válaszd a Current Post Author (a bejegyzés szerzője) lehetőséget. A Query Loop első eleménél a szerkesztőben a jelenlegi felhasználó adatai látszanak a szerző helyett, de a frontenden már helyesen működik.
8. Mentsd az oldalt, és nyisd meg a frontenden.

Komponens a Listing Gridben

1. A JetEngine → Listázások/komponensek oldalon kattints az Új elem hozzáadása gombra.
2. Az ablakban válaszd a Bejegyzések listaforrást és a bejegyzéstípust, add meg a Listázási elem neve mezőt, és válaszd ki a Listázási nézet értékét (például Bricks).
3. Kattints a Listázási elem létrehozása gombra.
4. A szerkesztőben helyezz el dinamikus elemeket: Dynamic Field (Post/Term/User/Object Data forrással, Title és Content mezővel) és Dynamic Image (Post thumbnail).
5. A bal oldali panelen keresd meg a komponenst, és húzd a sablonra.
6. A General fülön a Component Context mezőnél válaszd a Current Post Author lehetőséget. A szerkesztőben a komponens itt is a jelenlegi felhasználó adatait mutatja, a Listing Grid oldalán azonban a környezet a várt módon működik.
7. Mentsd a sablont.
8. Hozz létre egy oldalt (vagy szerkessz egy meglévőt), kattints az Edit with Bricks gombra, és húzd be a Listing Grid elemet (Elementorban a widgetet, a blokkszerkesztőben a blokkot). Válaszd ki az imént készített sablont, szabd testre, és mentsd.