Listázási sablon Timber/Twig nézettel

A Timber egy WordPress-bővítmény, amellyel HTML-t írhatsz a Twig sablonmotorral, a PHP-fájloktól elkülönítve. A JetEngine Timber/Twig nézetében HTML-lel és CSS-sel készíthetsz gyors listázási sablont, amelyet előbeállítások, dinamikus adat gombok, szűrők és feltételes címkék segítenek. A sablon forrása lehet bejegyzés, felhasználó, kifejezés, kapcsolat, beállítóoldal adata, Lekérdezéskészítő, ismétlő mező, egyéni tartalomtípus vagy REST API végpont.

Előfeltétel: a Timber bővítmény telepítve és aktiválva, az aktív JetEngine.

Előkészítés

1. Nyisd meg a JetEngine → JetEngine → Teljesítmény fület, kapcsold be a Timber/Twig nézetek kapcsolót, telepítsd a javasolt Timber bővítményt, és kattints a beállítások mentésére.
2. Ezután a JetEngine → Listázások/komponensek oldalon az Új elem hozzáadása gomb ablakában a Listázási nézet listában megjelenik a Timber/Twig.

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

A képen a Timber/Twig nézetek kapcsoló a Teljesítmény fülön látható.

A sablon létrehozása

1. Kattints az Új elem hozzáadása gombra.
2. Válaszd ki a forrást (például Bejegyzések) és a bejegyzéstípust. A példában a „Doktorok” egyéni bejegyzéstípus elemei szerepelnek: a cím a doktor neve, a tartalom a bemutatkozása, a kiemelt kép a fotója, a metamezők pedig a szakterület, a gyakorlat éveinek száma és az e-mail-cím.
3. Add meg a Listázási elem nevét (nem kötelező), a Listázási nézet legyen Timber/Twig, és kattints a Listázási elem létrehozása gombra.
4. Megnyílik a Timber/Twig szerkesztő a HTML- és a CSS-területtel és az előnézettel.

Dinamikus és alapadatok

A Dynamic data gombbal illeszthetsz be adatot.

• Post: a bejegyzés alapadatai. Válaszd ki például a Post Title elemet, és kattints az Insert gombra: a {{ post.title }} jelölő kerül be. Kézzel is begépelheted.
• Dynamic Data: válaszd a Meta Data forrást és a metamezőt (például a „Szakterület” szöveg mezőt). Ez ilyen jelölőt ad: {{ jet_engine_data(args={source:'meta',meta_key:'_specialty'}) }}. A jelölő után saját szöveget is írhatsz, például „év gyakorlat”.

Az elemeket <div> elemekkel tagold, hogy a jelölők külön sorba kerüljenek.

Szűrők az eredményre

Az Add filter to result gombbal a dinamikus adatot átalakíthatod vagy a kívánt formában jelenítheted meg.

A hosszú bejegyzéstartalom rövidítéséhez:

1. Válaszd a Post → Post Content adatot, majd az Add filter to result gombot.
2. Válaszd a JetEngine Callback lehetőséget, és a Callback function listából a Trim string by charts or words visszahívást. Ez a lehetőség csak akkor jelenik meg, ha a JetEngine → JetEngine → Modulok → Külső modulok fülön bekapcsoltad a Trim String visszahívás modult.
3. A Trimmed Type lehet Words vagy karakterek; a String length a hossz (például 5).
4. Insert.

Eredmény: {{ post.content|jet_engine_callback(args={cb:'jet_engine_trim_string_callback',jet_trim_cb_type:'words',jet_trim_cb_length:'5'}) }}. A szöveg a Timber Trim text by words és Trim text by chars szűrőivel is rövidíthető.

A kiemelt kép beillesztése:

1. Dynamic data → Dynamic Data, forrás Meta Data, a Custom Field Key értéke _thumbnail_id.
2. Add filter to result → JetEngine Callback, a visszahívás Get image by ID, itt a kép méretét is kiválaszthatod.
3. Insert. Eredmény: {{ jet_engine_data(args={source:'meta',custom_key:'_thumbnail_id'})|jet_engine_callback(args={cb:'wp_get_attachment_image'}) }}

Feltételes címkék

A Conditional Tags gomb a JetEngine Dinamikus láthatóság funkciójához hasonlóan működik: az elemet csak a feltétel teljesülésekor jeleníti meg. A JetEngine kibővített feltételeihez kapcsold be a Dinamikus láthatóság modult. A Twig általános szerkezete:

{% if feltetel %}
<!-- ide jön a HTML -->
{% endif %}

Példa: egy címke csak akkor jelenik meg, ha a „Gyakorlat évei” szám nagyobb 10-nél.

1. Kattints a Conditional Tags gombra.
2. Válaszd a Greater than feltételt, a Field a mező neve, az Value 10, a Context Current listing item object, a Data type Numeric.
3. Insert. A beszúrt szerkezet:

{% if jet_engine_show_if(args={"jedv_condition":"greater-than","jedv_field":"_practice-experience","jedv_value":"10","jedv_context":"current_listing","jedv_data_type":"numeric"}) %}
<!-- ide jön a HTML -->
{% endif %}

A megjegyzés helyére írd be: „Több mint 10 év tapasztalat!”. A Reload preview gomb az előnézetet frissíti, de az előnézetben csak az alap bejegyzésadatok látszanak. A JetEngine-adatokat a Listing Grid oldalán vagy a frontenden ellenőrizheted.

CSS

A stílusokat a CSS-területbe írd. Az osztály a HTML-ben:

<a class="doctor-name">{{ post.title }}</a>

A CSS-ben a szelektor elé tedd a selector kulcsszót, hogy a szabály csak erre a listázásra vonatkozzon:

selector .doctor-name {
    font-size: 18px;
}

A feltételes címkék a stílusoknál is használhatók. Például egy szegélyt kaphat a kép, ha az elem helyzete páros:

1. A Conditional Tags gombbal válaszd az Is odd item feltételt, és illeszd be: {% if jet_engine_show_if(args={"jedv_condition":"listing-odd"}) %}. A megjegyzés helyére másold be a kép jelölőjét.
2. Válaszd az Is even item feltételt ("jedv_condition":"listing-even"), és ide a kép jelölőjét tedd, egy even-item osztályú <a> elembe.
3. A CSS-be:

selector .even-item {
    display: flex;
    border: 1px solid;
    padding: 5px;
}

Mentsd a változásokat a Mentés gombbal.

A sablon a Listing Gridben

Hozz létre oldalt a blokkszerkesztővel, Elementorral vagy Bricksszel. A blokkszerkesztőben az Oldalak → Új oldal oldalon add hozzá a Listing Grid blokkot, és válaszd ki a sablont. A rács a metamezők értékeit mutatja, a CSS-stílusok a címeken és a páros elemek képein érvényesek.

Kész elrendezések használata

Ha nem akarsz mindent a nulláról felépíteni, kész kártyaelrendezést is átvehetsz (például egy webes CSS-kártya gyűjteményből), de a bemásolt kódot gondosan át kell nézni. A példában ezek történtek:

1. A HTML-ből csak az első kártyát tartottuk meg, az információs szalagot, a burkoló elemet és a számozást töröltük, mert a sablon egyetlen elem elrendezése.
2. A CSS-ből töröltük a törölt elemekre vonatkozó szabályokat (.info, .cards-wrapper), valamint a body, a, @media és @import szabályokat a stílusok elszigetelése, az ütközések és a felesleges terhelés elkerülése érdekében.
3. A betűcsaládokat a sablon témájához igazítottuk. Érdemes a WordPress-témába integrált betűtípust használni.
4. A HTML-ben a szóközöket tabulátorra cseréltük a hibák elkerülésére.
5. Minden CSS-szelektor elé beírtuk a selector szót, a kettős szelektoroknál mindkettő elé:

selector .card:before, selector .card:after {

6. A .card szabályban a width: 15em; értéket width: 100%; értékre cseréltük (vagy törölhető), hogy az átméretezés ne okozzon gondot.

A statikus adat cseréje dinamikusra

• A hivatkozás és a háttérkép: az href attribútum URL-jét töröltük, a Dynamic data → Dynamic URL lehetőséggel a Permalink forrást illesztettük be ({{ jet_engine_url(args={}) }}). A --bg-img változó URL-je helyére a Dynamic URL Thumbnail URL forrása került. Eredmény:

<a class="card" href="{{ jet_engine_url(args={}) }}" style="--bg-img: url({{ jet_engine_url(args={source:'_thumbnail_url'}) }})">

• A cím: az <h1> elemet <div> elemre cseréltük, hogy ne zavarja az oldal szemantikus hierarchiáját, title osztállyal, a szöveg helyére a Post → Post Title került (<div class="title">{{ post.title }}</div>). A CSS-ben a selector .card h1 { sort selector .card .title { sorra írtuk át.
• A szöveg: a Post → Post Content adat, az Add filter to result gombbal a Trim text by words szűrő, 20 szó, a More string mezőben „…”. Eredmény: <p>{{ post.content|excerpt('20','...') }}</p>.
• A dátum: Post → Post Date, szűrőként a JetEngine Callback Format date visszahívása. Eredmény: <div class="date">{{ post.post_date|jet_engine_callback(args={cb:'jet_engine_date'}) }}</div>.
• A címke: a bejegyzéstípushoz rendelt egyéni taxonómia kifejezésének neve: Post → Post Terms, szűrőként a Get term name visszahívás. Eredmény: <div class="tag">{{ post.terms|jet_engine_callback(args={cb:'jet_get_term_name'}) }}</div>.

A Reload preview gomb után a kép kivételével minden látszik, mert a JetEngine dinamikus adatai csak a Listing Grid oldalon vagy a frontenden ellenőrizhetők. A Listing Grid blokkot az oldalon kiválasztva a rács a bejegyzések képét, címét, szövegét, dátumát és kifejezését mutatja, a frontenden pedig a hover hatás is működik.