Lekérdezési ciklusok és dinamikus adatok

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.