Listázási sablon bejegyzéstípushoz Elementorban

Ez a fejezet egy teljes példán mutatja meg, hogyan lesz egy bejegyzéstípus tartalmából kártyás lista az oldalon. A példában egy „Ország” egyéni bejegyzéstípus szerepel, de ugyanígy működik az alap WordPress-bejegyzéseknél és -oldalaknál is. Előfeltétel az Elementor (a szabad verzió elég) és az aktív JetEngine.

A listázási elem létrehozása

1. Nyisd meg a JetEngine → Listázások/komponensek oldalt, és kattints az Új elem hozzáadása gombra.
2. A Listázási elem beállítása ablakban add meg:
   • Lista forrása: Bejegyzések;
   • Bejegyzéstípusból: a bejegyzéstípus, amelyből a tartalom jön (alap típus is választható);
   • Listázási elem neve: a lista neve;
   • Listázási nézet: Elementor, Blokkok (Gutenberg) vagy Bricks.
3. Kattints a Listázási elem létrehozása gombra.

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

A képen a Lista forrása értéke Bejegyzések, ezért megjelent a Bejegyzéstípusból lista.

A sablon beállításai

A szerkesztőben az Elementor panel bal alsó sarkában a fogaskerék nyitja meg a sablon beállításait, ott a Listing Settings fülön:

• Listing source és From post type: ellenőrizd, jó-e a forrás. Ha itt módosítod, utána töltsd újra az oldalt, hogy a dinamikus widgetek a megfelelő metamezőket kínálják.
• Preview width: a kártya előnézeti szélessége, csúszkával vagy pixelben (a példában 400).
• Make listing item clickable: bekapcsolva az egész kártyára kattintva a bejegyzés oldalára jutnak a látogatók.

Tartalom dinamikus widgetekkel

A Listing Elements fülön lévő dinamikus widgetekkel építsd fel a kártyát. A példában ezek szerepeltek:

1. Dynamic Image: a kiemelt képet mutatja. A Source alapértéke Post thumbnail.
2. Dynamic Field: a bejegyzés címe. A Source Post/Term/User/Object Data, az Object Field Title, a HTML-címke például H2.
3. Dynamic Meta: a dátumot, a szerzőt és a hozzászólásokat mutatja. Ami nem kell (például a hozzászólások), azt töröld a listából. Egy-egy tétel lenyitásával ikont, előtagot és utótagot állíthatsz. A Date Settings, Author Settings és Comments Settings szakaszban további beállítások vannak, például a dátum Format mezője.
4. Dynamic Field a kivonathoz: a Source Post/Term/User/Object Data, az Object Field Excerpt. Kapcsold be az Automatically generated excerpt kapcsolót, és a Custom length mezőbe írd a szavak számát (például 20).
5. Dynamic Link a Permalink forrással: a bejegyzés oldalára visz.

Két megjegyzés:

• A kivonat rövidítése csak a frontenden látszik, a szerkesztőben nem.
• Ne használj egyszerre több hivatkozási módot egy sablonban. A Dynamic Link widget és a Make listing item clickable kapcsoló együtt zavaros élményt ad, válassz egyiket.

Stílus

A widgetek stílusát az Elementor Style fülén állíthatod (a példában a Dynamic Link háttér- és szövegszíne, belső margója és lekerekítése), a távolságokat a Advanced fül Padding beállításával, a kártya hátterét a szakasz Style fülén. Mentéshez kattints az Update gombra.

A sablon kinézete az egész Listing Gridre érvényes. Ha az elemek különböző kinézetet kapnak (például más háttérszínt egyes elemeknél), azt a Listing Grid widget fejezet írja le.

Megjelenítés az oldalon

1. Hozz létre oldalt (Oldalak → Új oldal hozzáadása), adj címet, és kattints az Edit with Elementor gombra.
2. Húzd be a Listing Grid widgetet, és válaszd ki az imént készített listázási elemet.
3. Kapcsold be az Equal columns height kapcsolót, ha azt szeretnéd, hogy az elemek magassága egyenlő legyen.
4. Állítsd be a többit, majd Publish/Update.

A Listing Grid régi Posts Query lekérdezése már csak örökölt megoldás. Új munkánál a Lekérdezéskészítőben építs bejegyzés-lekérdezést, és a widget Custom Query fülén add meg.

A frontenden a bejegyzések kártyái jelennek meg, az Olvass tovább gombra kattintva pedig a bejegyzés önálló oldalára jutsz.