# Lekérdezési ciklusok és dinamikus adatok

> Legfrissebb bejegyzések rácsa a kezdőlapon lekérdezési ciklussal és dinamikus adatokkal.

Visszatérünk a kezdőlapra, és a hero alá felveszünk egy „Latest Posts” (legfrissebb bejegyzések) szakaszt.

## Előkészület: minta bejegyzések

A szakaszhoz legalább három közzétett bejegyzés kell, különben a rács üresnek vagy hibásnak látszik, akkor is, ha a Bricks-beállításaid jók. Hozz létre 3 teszt bejegyzést:

1. A vezérlőpulton nyisd meg a **Bejegyzések → Új bejegyzés** oldalt.
2. Adj minden bejegyzésnek címet és rövid kivonatot (használd a kivonat mezőt, ha látszik, vagy írj néhány sort a tartalomba, és a WordPress generál belőle kivonatot).
3. Állíts be mindegyikhez **Kiemelt képet** az oldalsávban.
4. Kattints a **Közzététel** gombra, és ismételd, amíg legalább 3 közzétett bejegyzésed nincs.

Gyors ellenőrzés: a **Bejegyzések → Összes bejegyzés** listán legalább három **Közzétéve** állapotú bejegyzést kell látnod. Ugyanezek a bejegyzések jelennek meg a bejegyzés sablonban is.

## Mi az a lekérdezési ciklus?

A WordPressben a „lekérdezés” egy kérdés, például „add a 3 legfrissebb bejegyzést” vagy „add az összes bejegyzést ebből a kategóriából”. A lekérdezési ciklus a válaszul kapott listát veszi, és egy dizájnt ismétel meg elemenként.

Egyetlen kártyát tervezel (kép, cím, kivonat, gomb), a ciklus végigmegy a bejegyzéseken, és bejegyzésenként egy kártyát jelenít meg. Ha módosítod a lekérdezés szabályait, ugyanaz a dizájn más bejegyzéseket mutat.

## Mi az a dinamikus adat?

Eddig a Címsor vagy Szöveg elemekbe kézzel gépelted a tartalmat: ez statikus szöveg. Dinamikus adatnál az elemet egy WordPress-mezőhöz kapcsolod:

- a címsor a bejegyzés címét,
- a kép a kiemelt képet,
- a szöveg a bejegyzés kivonatát veszi át.

Ciklusban minden kártya a lista aktuális bejegyzésének értékeit mutatja. A Bricks-ben ezeket például `{post_title}` vagy `{featured_image}` néven látod: ezek a valódi WordPress-mezők vizuális helyőrzői.

## A szakasz felépítése

1. Adj hozzá egy új **Szakasz** elemet.
2. A tárolóban adj hozzá egy **Címsor** elemet („Latest Posts”).
3. A címsor alá adj hozzá egy **Blokk** elemet.

## A rács beállítása

3 oszlopos rácsot szeretnénk a bejegyzésekhez. A flexbox egyszerű soros elrendezéshez jó volt; a CSS Grid a másik híres elrendezési rendszer, kétdimenziós elrendezésekhez ideális, ahol a sorok és az oszlopok egyszerre számítanak, például kártyarácshoz.

Ha egy blokkot Grid-re állítasz, a böngésző a gyermekeit rácsra helyezi.

- A **Rács sablon oszlopai** megadja, hány oszlop legyen és milyen szélesek. Az `1fr 1fr 1fr` három egyenlő oszlopot jelent, mindegyik a szabad szélesség egy-egy törtrészét kapja.
- A **Térköz** az oszlopok és sorok közötti helyet adja, így a kártyák minden irányban egyenletesen tagolódnak.

Újabb kártyáknál a rács automatikusan az oszlopokba rendezi őket, majd új sorokba tördeli, nem kell kézzel pozicionálnod.

1. Jelöld ki a blokkot.
2. **Megjelenítés:** `Rács` (Grid).
3. **Rács sablon oszlopai:** `1fr 1fr 1fr`.
4. **Térköz:** `24`.

## A kártya (ciklus elem) létrehozása

A rács blokkjába tegyél egy másik **Blokk** elemet: ez lesz az ismétlődő kártya. A kártya blokkjában add hozzá:

1. **Kép** (kiemelt kép),
2. **Címsor** (a bejegyzés címe, H3),
3. **Egyszerű szöveg** (a bejegyzés kivonata),
4. **Szöveges hivatkozás** („Read more”).

## A lekérdezési ciklus bekapcsolása

1. Jelöld ki a kártya blokkját (a belsőt).
2. Kapcsold be a **Lekérdezési ciklus használata** kapcsolót.
3. A lekérdezés beállításai:
   - **Bejegyzéstípus:** Bejegyzések,
   - **Bejegyzések oldalanként:** 3.

Most 3 bejegyzéskártyának kell látszania.

## Dinamikus adat összekötése

1. **Kép:** a dinamikus adat legyen `Kiemelt kép`.
2. **Címsor:** a dinamikus adat legyen `Bejegyzés címe`, a **Hivatkozás** pedig `Bejegyzés URL-je`.
3. **Kivonat:** a dinamikus adat legyen `Bejegyzés kivonata`.
4. **Read more:** a **Hivatkozás** legyen `Bejegyzés URL-je`.

## Reszponzív ellenőrzés

1. Váltsd a nézetet **Mobil fekvő** (Mobile landscape) töréspontra.
2. Jelöld ki a rács blokkot.
3. A **Rács sablon oszlopai** legyen `1fr`, így a kártyák egymás alá kerülnek.

Kész a dinamikus bejegyzésrács.