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

> Lépésről lépésre: listázási sablon készítése egyéni bejegyzéstípushoz dinamikus widgetekkel, és megjelenítése Listing Griddel.

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.

![A Listázási elem beállítása ablak Bejegyzések forrással](./kepek/listazas-3-uj-elem-bejegyzesek.webp)

*A Listázási elem beállítása ablak Bejegyzések forrással* (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](https://hub.hellowp.io/hu/plugins/jet-engine/listazas-listing-grid/) 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.