Tovább a tartalomhoz

Dynamic Repeater

Ismétlő mezők tételeinek megjelenítése a Dynamic Repeater elemmel: elemformátum, makrók, lista és táblázat, számláló, környezet.

A Dynamic Repeater egy ismétlő (Repeater) mező tételeit jeleníti meg. Az adat lehet bejegyzés, kifejezés, felhasználó, egyedi tartalomtípus (CCT) elem, beállítóoldal vagy ACF ismétlő mezője, illetve egy Lekérdezéskészítő lekérdezés eredménye. A tételek külalakját HTML-lel alakítod.

Az elem dinamikusan olvassa az adatot, ezért az objektum egyedi oldalán vagy a listázási sablonjában használd. Ha például a felhasználók metaboxában van ismétlő mező, a Dynamic Repeater a felhasználók listázási sablonjába vagy a felhasználó profiloldalára kerülhet.

Ugyanaz az elem Elementorban Dynamic Repeater widget, a blokkszerkesztőben Dynamic Repeater blokk, Bricksben Dynamic Repeater elem.

https://minta-bolt.hu/wp-admin/post.php?post=24&action=edit
A Dynamic Repeater blokk beállításai

A képen a blokk Általános szakasza látszik a FORRÁS listával, alatta az Elrendezés szakasz az ITEM FORMAT mezővel (alapértéke <span>%name%</span>), a beágyazott ismétlők sablonjaival és az ITEM HTML TAG listával.

A FORRÁS listából választod ki az ismétlő mezőt. A lista forrás szerint csoportosítja a mezőket: bejegyzések, taxonómiák, CCT-k, felhasználók, ACF-mezők, beállítóoldalak (Options) és Lekérdezéskészítő (JetEngine Query). Csak a JetEngine vagy az ACF által létrehozott ismétlő mező dolgozható fel.

Az ITEM FORMAT mező egy ismétlő tétel megjelenését írja le HTML-lel, a változó részeket pedig az ismétlő almezők makróival adod meg. A makró az almező neve százalékjelek között: például %text_rep%, %website_link%, %media_rep%. A makrókat HTML-címkékkel (<span>, <div>) kombinálhatod, és használhatsz attribútumokat, beágyazott stílust is.

Egy média almező alapesetben a kép azonosítóját tárolja, ezért a szerkesztőben az azonosító számot látod. A kép megjelenítéséhez <img> címkét és segédmakrót használj.

Makró Mit ad
%media-mezo|img_url_by_id% A kép azonosítójából a kép webcímét.
%media-mezo|img_alt_by_id% A kép alternatív szövegét.
%media-mezo|file_url_by_id% A csatolmány webcímét az azonosítója alapján (Media ID értékformátumú média mezőhöz).

A media-mezo helyére a média almező nevét írd. A %media_rep% almezőnél a teljes kép így néz ki:

<img src="%media_rep|img_url_by_id%" alt="%media_rep|img_alt_by_id%">

Fájl letöltéséhez:

<a href="%file_rep|file_url_by_id%" download>Fájl letöltése</a>

Ha a média almező értékformátuma Media URL, nincs szükség segédmakróra, elég <img src="%media_rep%">.

A %galeria-mezo|img_gallery_grid% makró a galéria almező több képét jeleníti meg rácsban. A galeria-mezo helyére a galéria almező neve kerül, például %gallery_rep|img_gallery_grid% (Media ID értékformátumnál).

Makró Mit ad
%posts_rep|post_url_by_id% A bejegyzés URL-jét a Posts almezőből.
%posts_rep|post_title_by_id% A bejegyzés címét.
%posts_rep|post_link_by_id% A bejegyzés címét hivatkozásként.
%posts_rep|post_titles_by_ids% Több bejegyzés címét, ha a Posts almezőnél a Multiple kapcsoló be van kapcsolva.

Az URL és a cím makró a Multiple kapcsolóval együtt nem működik. Egy bejegyzés hivatkozása így épül fel:

<a href="%posts_rep|post_url_by_id%">%posts_rep|post_title_by_id%</a>

A %datum-mezo|format_date% vagy a %datum-mezo|format_date(F j, Y)% a dátum, idő vagy dátum-idő almezőt írja ki. A zárójelben a WordPress dátumformátuma áll, amelyet tetszés szerint módosíthatsz.

A %checkbox-mezo|render_acf_checkbox% makró az ACF jelölőnégyzet mező értékeit írja ki. A JetEngine saját Checkbox almezőjének értékei is megjeleníthetők, ha az almezőnél bekapcsoltad a Save as array kapcsolót; ekkor a makróba az almező nevét írod.

A példában a „Túrák” bejegyzéstípus ismétlő mezőjében képek vannak.

  1. A JetEngine → Metaboxok oldalon hozz létre metaboxot a bejegyzéstípushoz, benne egy ismétlő mezővel (a példában repeater_gallery), amelynek almezője a galéria.
  2. Szerkeszd a bejegyzéseket, és tölts fel képeket az ismétlő mezőbe.
  3. A JetEngine → Listázások/komponensek oldalon hozz létre listázási sablont: a Listing Source legyen „Bejegyzések”, a From post type a túrák típusa.
  4. A sablonra húzd a Dynamic Repeater elemet. A FORRÁS listában válaszd ki az ismétlő mezőt, az ITEM FORMAT mezőbe pedig írd a %gallery|img_gallery_grid% makrót, ahol a gallery helyére az ismétlő almezőjének neve kerül.
  5. Az oldalon a Listing Grid elemmel jelenítsd meg a sablont (a Listing listában válaszd ki), és állítsd be a stílust. Mentés után a képek rácsban jelennek meg.

Példa: kapcsolódó bejegyzés hivatkozása

Szekció neve “Példa: kapcsolódó bejegyzés hivatkozása”

Az ismétlő mezőben Posts típusú almező is lehet, amelyben egy kapcsolódó bejegyzést választasz ki (a Search in post types listában a bejegyzéstípus, a Multiple kapcsolóval több érték is választható). A bejegyzéstípus szerkesztőjében (JetEngine → Bejegyzéstípusok) vedd fel az ismétlő mezőt (a példában „Kapcsolódó túra”) és az almezőt, majd a bejegyzésnél válaszd ki a kapcsolódó bejegyzést. A listázási sablonban a Dynamic Repeater FORRÁS listájában válaszd az ismétlő mezőt, az ITEM FORMAT mezőbe pedig ezt írd:

<a href="%_related_tour|post_url_by_id%">%_related_tour|post_title_by_id%</a>

A cím makró teszi a hivatkozást kattinthatóvá. Az oldalon a Listing Grid elemmel jelenítsd meg a sablont. A Multiple kapcsolóval együtt ez a makró nem működik.

A „Túra részletei” metaboxban az ismétlő mező (például „Túraprogram”) egy Média almezőt tartalmaz, amelyhez a bejegyzésnél PDF-et töltesz fel. A listázási sablonba a Dynamic Image, a Dynamic Link és a Dynamic Field mellé tedd a Dynamic Repeater elemet, a FORRÁS a „Túraprogram” legyen, az ITEM FORMAT pedig például:

<a href="%img|file_url_by_id%" target="_blank" rel="noopener noreferrer">A túraprogram</a>

Itt az img az ismétlő almezőjének neve, a link szövege pedig tetszőleges. A Listing Grid elemmel megjelenített listában a hivatkozásra kattintva a fájl letöltődik.

Beágyazott videót a %video|embed_url% makróval is megjeleníthetsz. A „Bemutató” ismétlő mező szöveg típusú almezőjébe a videó webcímét írod a bejegyzésnél, a Dynamic Repeater ITEM FORMAT mezőjébe pedig a makrót, ahol a video az almező neve. Elementorban és a blokkszerkesztőben is ugyanígy működik.

Ma inkább a következő megoldást ajánljuk.

Ha egy szöveg almezőben videó hivatkozás van, ma a Dynamic Field elemet ajánlott használni: a FORRÁS legyen „Repeater Field”, az OBJECT FIELD / META FIELD / REPEATER KEY / COMPONENT PROP mezőbe a szöveg almező nevét írd, kapcsold be a Filter field output kapcsolót, és a Callback listából válaszd a „Beágyazási URL” elemet.

Az Iconpicker almezőből az ikon a következő kóddal jeleníthető meg, ahol az icons_rep az almező neve:

<i class="%icons_rep%"></i>
Beállítás Mit csinál
ITEM HTML TAG A tételt körülvevő HTML-címke: DIV, TR (táblázatsor) vagy LI (listaelem).
ITEMS DELIMITER A tételek közé kerülő karakter vagy HTML-címke.
BEFORE ITEMS MARKUP és AFTER ITEMS MARKUP HTML a tételek előtt és után.
Add counter to repeater items Bekapcsolva minden tétel sorszámot kap (lásd lent).
Hide if value is empty Ha nincs tétel, az elem nem jelenik meg az oldalon.
FALLBACK Üres érték helyett megjelenő szöveg.
CONTEXT Melyik objektumból olvassa az adatot.

Pontozott lista készítéséhez válaszd az ITEM HTML TAG listában az LI értéket, a BEFORE ITEMS MARKUP mezőbe írd be a <ul>, az AFTER ITEMS MARKUP mezőbe a </ul> címkét.

Táblázathoz válaszd a TR értéket, a markup mezőkbe a <table> és </table> címke kerül, az ITEM FORMAT mezőben pedig az almezőket <td> és </td> közé teszed:

<td>%nev%</td><td>%szerep%</td>

Az Add counter to repeater items kapcsoló bekapcsolása után minden tétel egymás utáni sorszámot kap. A kapcsoló alatt még három beállítás jelenik meg:

  • Add leading zero before counter items: a számok elé nullát tesz (01, 02, …).
  • Text after counter number: szöveg vagy írásjel a szám után, például pont.
  • Position: a számláló helye a tételhez képest: a tételek felett, a tételek bal oldalán vagy a jobb oldalán.

A Stílus fülön (Elementorban) a General szakaszban az irányt módosíthatod, a Counter szakaszban a számláló megjelenését: színt, betűtípust, méretet.

Egy példa a számláló beállítására egy „Csapat” bejegyzéstípussal:

  1. Hozd létre a bejegyzéstípust és a metaboxát, majd vegyél fel egy ismétlő mezőt szöveges almezőkkel.
  2. Hozz létre egy listázási sablont a JetEngine → Listázások/komponensek menüben.
  3. Húzd a sablonra a Dynamic Repeater elemet, a FORRÁS listából válaszd ki az ismétlő mezőt, az ITEM FORMAT mezőben pedig add meg az almezők makróit.
  4. Kapcsold be az Add counter to repeater items kapcsolót, és állítsd be a nullát, a szöveget és a pozíciót.
  5. A Stílus fülön finomítsd a megjelenést.

A CONTEXT listában választod ki, honnan vegye az adatot:

Kontextus Mit ad
Alapértelmezett objektum Az aktuális oldal vagy listázási sablon adatait.
Aktuális felhasználó (globális) A bejelentkezett felhasználó adatait.
Aktuális felhasználó (aktuális hatókör) A listában éppen feldolgozott felhasználó adatait, például felhasználólistában.
Lekérdezett felhasználó Azét a felhasználóét, akit az URL (azonosító, felhasználónév vagy keresőbarát név) megad.
Aktuális bejegyzés szerzője A megnyitott bejegyzés szerzőjének mezőjét.
Alapértelmezett WordPress-objektum (az aktuális oldalhoz) A WordPress által az aktuális oldalhoz rendelt objektumot. Egyedi oldalon ez a bejegyzés, akkor is, ha a listázáson belül vagy.
Szülő objektum A szülő objektum adatait.
Aktuális CCT tétel szerzője A megnyitott CCT tétel szerzőjének mezőjét, a CCT listázási sablonjában.
Kapcsolódó elemek innen … Az adott kapcsolat kapcsolódó elemeinek adatait.

Készült:

Tiszteletben tartjuk a magánszférádat

Sütiket használunk a böngészési élmény javítására és a forgalom elemzésére. Az analitika csak akkor indul, ha engeded. Adatvédelmi irányelvek, Sütitájékoztató.

Sütibeállítások