Timber/Twig nézet: a szerkesztő és a funkciók áttekintése

A listázási sablon a Listing Grid elemeinek elrendezését és megjelenését határozza meg. A Timber egy WordPress-bővítmény, amellyel a Twig sablonmotorral írhatsz HTML-t, a PHP-fájloktól elválasztva. A Timber/Twig nézettel HTML-ből és CSS-ből építhetsz sablonokat, előbeállítások, dinamikus adat gombok, szűrők és feltételes címkék segítségével. A megoldás rugalmas, gyors, és tiszta HTML- és CSS-szerkezetet ad.

Előfeltétel: telepített és aktív Timber bővítmény, aktív JetEngine. Egy lépésről lépésre követhető példát a Listázási sablon Timber/Twig nézettel fejezetben találsz.

Ahhoz, hogy Timber/Twig nézettel listázási sablont készíthess, kapcsold be a Timber/Twig nézetek kapcsolót a JetEngine → JetEngine → Teljesítmény fülön.

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 listák oldala

A JetEngine → Listázások/komponensek oldalon látod az összes listázási elemet, amelyet a különböző szerkesztőkkel (Elementor, blokkszerkesztő, Bricks, Timber) készítettél. Az Új elem hozzáadása gombra kattintva egy ablak nyílik, ahol új listázási sablont hozhatsz létre.

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

A képen az ablak mezői látszanak: Lista forrása, Bejegyzéstípusból, Listázási elem neve és Listázási nézet.

A lista forrása

A Lista forrása választható értékei:

Forrás	Mit jelent
Bejegyzések	A JetEngine-nel létrehozott egyéni bejegyzéstípusok, valamint az alap WordPress-bejegyzések, oldalak, médiafájlok és WooCommerce-termékek. Választás után a Bejegyzéstípusból listában add meg a típust.
Query Builder	A Lekérdezéskészítővel létrehozott egyéni lekérdezés szűkített adatai. Válaszd ki forrásként a lekérdezést.
Kifejezések	Az egyéni taxonómiák, az alap WordPress-kategória és a WooCommerce termékkategóriák kifejezései, amelyekhez metaboxot is rendelhetsz. A From taxonomy listában add meg a taxonómiát.
Felhasználók	A felhasználók alapmezői (azonosító, bejelentkezési név, becenév, e-mail-cím stb.) és az egyéni metaboxok mezői.
Ismétlő mező	Egy ismétlő metamező elemei. A bejegyzéstípus listában válaszd ki, melyikhez rendelted az ismétlőt. A Repeater source értéke JetEngine, JetEngine Options Page vagy ACF lehet. A következő sorban a Repeater field (JetEngine vagy ACF forrásnál) vagy a Repeater option (beállítóoldalnál) mezőt töltsd ki.
User Appointments	JetAppointment mellett érhető el: a felhasználó időpontfoglalásainak adatai (dátum, idő, szolgáltatás és szolgáltató neve).
Egyéni tartalomtípus	A From content type listában válaszd ki a tartalomtípust. Csak akkor érhető el, ha az Egyedi tartalomtípusok modul be van kapcsolva az Alapértelmezett modulok fülön.
Custom Content Type Repeater Field	Az egyéni tartalomtípus ismétlő mezője; a megjelenő listában választod ki.
REST API Endpoint	Egy másik weboldalon lévő egyéni tartalomtípus elemei. A From API endpoint listában válaszd ki a végpontot. Csak akkor érhető el, ha a REST API-listázások modul be van kapcsolva.
JetReviews	A JetReviews bővítménnyel készített vélemények és hozzászólások.

Listázási elem neve és nézete

• Listázási elem neve: a sablon megkülönböztetésére szolgál; üresen is hagyhatod, ilyenkor a név magától generálódik.
• Listázási nézet: négy szerkesztő közül választhatsz: Elementor, blokkszerkesztő, Bricks és Timber/Twig. Az alapérték a blokkszerkesztő. Az Elementort és a Timbert bővítményként kell telepíteni és aktiválni, a Bricksnek témaként telepítettnek kell lennie.

A Listázási elem létrehozása gomb létrehozza a sablont, és megnyitja a szerkesztőoldalt a kiválasztott nézetnek megfelelően.

A Timber/Twig szerkesztő

Ha a Listázási nézet értéke Timber/Twig, a sablonszerkesztő oldala jelenik meg, kezdetben üresen.

• Az oldal tetején a listázási elem nevét adhatod meg vagy módosíthatod. Mellette a Settings gomb a lista forrásának beállításait nyitja meg, a Save gomb menti a sablont.
• A Preview width beállítás a Settings és a Save alatt az előnézet szélességét adja meg %, px vagy vw egységben. Az alapérték 50%, vagyis az oldal fele.
• Bal oldalon a listázási elem neve alatt a Presets gomb van. Az előbeállítás kiválasztásával alkalmazod a sablonra. A HTML-lap a lista tartalmának szerkezetét, a CSS a stílusokat mutatja, a Preview az eredményt.

Az előbeállításokat bejegyzések megjelenítésére tervezték, ezért más forrásoknál az előnézet hibás eredményt adhat.

Az előnézet a HTML módosítása után nem frissül magától, hogy ne legyen hibás a megjelenítés és ne terhelje a szervert. A változások alkalmazásához kattints a Reload preview gombra az előnézet fölött. A CSS módosításai azonnal érvényesülnek, ha a kapcsolódó HTML már megjelent az előnézetben.

A HTML-szerkesztő a Twig nyelv minden szerkezetét elfogadja, tehát kézzel is írhatsz kódot. A HTML- és CSS-szerkesztő támogatja az Emmet szintaxist: a rövidítés a Tab billentyűvel bomlik ki kóddá.

A HTML-lap fölött három gomb áll: Dynamic data, Filter data és Conditional Tags. Ezekkel húzhatsz dinamikus tartalmat a HTML-be.

Dynamic data

A gombbal kétféle adatot illeszthetsz be: JetEngine-adatot és alapadatot (WordPress). Így az egyéni JetEngine-mezők és az alap WordPress-mezők értékét is megjelenítheted. A kiválasztás után az ablak tetején lévő All Functions hivatkozással térhetsz vissza a lehetőségek listájához.

Dynamic Data

A forrásból húzza ki az adatot. Beállításai:

• Source: a forrás.
  • Post/Term/User/Object Data: a bejegyzés, kifejezés, felhasználó vagy objektum alapmezőiből veszi a tartalmat (például hozzászólások, időpontok, JetFormBuilder-űrlapmezők, JetReviews, egyéni lekérdezések, kapcsolatok). A mezőt az Object Field listából választod, vagy a nevét a Custom Field Key mezőbe írod.
  • Meta Data: a JetEngine-nel létrehozott metamezők egyikéből veszi az adatot. A Meta Field listából választod, vagy a nevét a Custom Field Key mezőbe írod.
  • Query Variable: a keresési találatok oldalán használható. A Variable Name értéke ilyenkor „s”.
  • Options: a beállítóoldalhoz létrehozott metamezők közül választhatsz.
• Fallback: ha az érték üres, az itt megadott szöveg látszik helyette.
• Context: az adatforrás pontosabb megadása, a Source értékével együtt működik. A lehetőségek a beállításoktól függően:
  • Default Object: az aktuális listázási sablon adatai a lista forrásbeállítása szerint.
  • Current User (global): annak a felhasználónak az adatai, akinek az oldalt létrehozták.
  • Current User (for current scope): az éppen feldolgozott felhasználó adatai. Például egy felhasználókat felsoroló listában arra a felhasználóra kattintva, nem a bejelentkezettre vonatkoznak.
  • Queried User: a bejelentkezett vagy az URL-ben azonosítóval megadott felhasználó adatai.
  • Current Post Author: az éppen megnyitott bejegyzés szerzőjének adatai.
  • Default WordPress Object (for current page): mindig az oldalra a WordPress által meghatározott globális objektum adatai. Egyedi bejegyzés oldalán ez mindig az aktuális bejegyzés, még akkor is, ha az oldalra tett listába lépsz.
  • Current CCT item author: az aktuális egyéni tartalomtípus-elem szerzőjének adatai; hasznos a tartalomtípus listázási sablonjában.
  • Related Items From…: a létrehozott kapcsolat adatai.

Az ablak végén két gomb áll: az Add filter to result (a Filter data gombhoz hasonló) és az Insert, amely beilleszti az adatot a HTML-be.

Dynamic URL

Képeket és webcímeket húz be előre meghatározott forrásokból.

• Source:
  • Thumbnail URL: a kiemelt kép webcíme.
  • Image URL by Image ID: a kép címe az azonosítójából. A Custom Field Name mezőbe a metamező nevét is beírhatod.
  • Permalink: bármely mezőt kattinthatóvá tesz. Ha például a Custom Field Name mezőbe egy egyéni bejegyzéstípus metamezőjének nevét írod, a rácsról az elem egyedi oldalára viszi a látogatót.
  • Profile Page: a Profile Page listában kiválasztott Account vagy User Single aloldalra irányít.
  • Options: a JetEngine beállítóoldalaival működik. Az Option listában a mező értékéből veszi a hivatkozást; a mező nevét a Custom Field Name mezőbe is beírhatod.
  • Egyéb metamezők: az általad létrehozott metamezők automatikusan megjelennek a listában, a hivatkozás a kiválasztott mező értékéből jön.
• Fallback: üres érték esetén ez a szöveg látszik.
• Context: ugyanazok a lehetőségek, mint a Dynamic Data esetén.

Data Store Button

Adattárakba (például kedvencek, könyvjelzők, nemrég megtekintettek) tehetsz elemeket és vehetsz ki belőlük néhány kattintással.

• Store: a létrehozott adattár.
• Label: a gomb felirata a frontenden.
• Icon: SVG formátumú ikon; a Font Awesome ikonjának HTML-kódját is bemásolhatod.
• Reload listing grid on success: sikeres művelet után újratölti a Listing Gridet az adattár aktuális elemeivel.
• Action after an item added to store: mi történjen az elem adattárba kerülése után:
  • Remove from the store button: gomb jelenik meg az elem eltávolítására; a felirata és ikonja testre szabható.
  • Switch button status: átváltja a gomb állapotát; megadhatsz feliratot, ikont és azt az oldal-URL-t, ahová a látogató kerül az elem hozzáadása után.
  • Hide button: elrejti a gombot a frontenden, miután a látogató hozzáadta az elemet.
• Context: azt adja meg, melyik azonosító kerüljön az eltárolt elemhez. A lehetőségek megegyeznek a Dynamic Data környezeteivel: Default Object, Current User (global), Current User (for current scope), Queried User, Current Post Author, Default WordPress Object (for current page), Current CCT item author.

Post

A bejegyzések alap metamezőit jeleníti meg, például ID, Post Title, Post Author ID, Post Date. A Select data to show listában választod ki. Az egyéni metaboxszal felvett metamezők értékeit is megjelenítheted.

User

A WordPress felhasználói alapmezőit (ID, Display Name, Email stb.), valamint a felhasználókhoz rendelt egyéni metamezőket jeleníti meg.

Filter data

A Filter data gomb a Dynamic data mellett található, és a szűrőkhöz ad hozzáférést. A szűrőkkel bármely dinamikus adatot átalakíthatsz. A HTML-ben egy elemhez több szűrőt is kombinálhatsz, az elem végén a „|” jel után:

{{ post.date|jet_engine_callback(args={cb:'jet_engine_date'})|time_ago() }}

JetEngine Callback

Különböző adattípusokat jeleníthetsz meg vele: dátumot és időt, hivatkozásokat, jelölőnégyzet-értékeket, számokat és így tovább. A szükséges visszahívást a Callback function listából választod, az Insert gomb beilleszti a HTML-be. Az All Filters hivatkozással térsz vissza a szűrők listájához.

Resize Image

Átméretezi a kép szélességét és magasságát. Csak képek URL-jével működik, azonosítóval nem.

• Image width és Image height: a méret pixelben.
• Crop starting position: honnan induljon a vágás: Default, Center, Top, Bottom, Left vagy Right.

Trim text by words

A szöveget a megadott Number of words szóra rövidíti, például a bejegyzés kivonatához. A More string mezőbe azt a szöveget írd (például „Tovább…”), amely akkor jelenik meg, ha a szöveget levágta.

Trim text by chars

A szöveget a megadott Number of characters karakterszámra rövidíti. A More string mező ugyanúgy működik.

Array to list

Olyan metamezőn használd, amely értéklistát tárol (például jelölőnégyzet).

• First delimiter: elválasztójel (például vessző), amelyet az utolsó kivételével minden elem után használ.
• Second delimiter: az utolsó elem elé kerülő elválasztó.

Time Ago

Egy dátumot „időmúlva” formában ír ki, vagyis emberbarát módon mondja meg, mennyi ideje történt valami, vagy mennyi idő múlva fog.

• Date to calculate difference to: a dátum strtotime() által értelmezhető formában, például 2023-11-01 15:30:00 (ÉÉÉÉ-HH-NN és ÓÓ:PP:MM).
• Format of the past dates: a múltbeli dátumok formátuma. Az alapérték %s ago, ahol a %s helyére az érték kerül.
• Format of the future dates: a jövőbeli dátumok formátuma. Az alapérték %s from now.

Conditional Tags

A Conditional Tags gombbal a Twig feltételes logikáját használhatod:

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

A működése a JetEngine Dinamikus láthatóság funkciójához hasonló: az elemet csak akkor jeleníti meg, ha a feltétel teljesül. Ha a Dinamikus láthatóság modul ki van kapcsolva, a gomb csak üres címkét tud beszúrni. A kibővített JetEngine-feltételekhez kapcsold be a modult a JetEngine → JetEngine oldalon.

A feltételeknek ezek a közös beállításaik lehetnek:

• Field: a metamező neve, amellyel összehasonlít. A Dynamic Tags gombbal makrót is választhatsz.
• Value: az összehasonlítás értéke vagy értéklistája (szám, betű, szó, kifejezés); makró is használható.
• Context: Default vagy Current List object, vagyis az érték az aktuális bejegyzésből vagy az aktuális listaelem objektumából jön.
• Data type: Chars (betűk szerinti, ábécésorrendű összehasonlítás), Numeric (számértékek szerint) vagy Datetime (dátum vagy idő szerint, az idővonalon elfoglalt hely alapján).

General

• Query Has Items és Query Has Not Items: bekapcsolják a Query field to check listát, ahol egy egyéni lekérdezést választasz; a feltétel azt vizsgálja, hogy van-e a lekérdezésnek eleme.
• Equal, Not Equal, Greater than, Greater or Equal, Less than, Less or Equal: az elem a feltétel és az összehasonlított érték szerint jelenik meg vagy nem.
• In the list és Not in the list: Checkbox, Select és Radio metamezőkhöz; az elem láthatósága attól függ, hogy a látogató kiválasztotta-e a Value mezőbe írt értéket.
• Exists és Doesn’t exist: a választott metamezőben van-e adat.
• Contains és Doesn’t contain: a Value mezőbe írt adat szerepel-e.
• Between és Not Between: az érték két megadott érték között van-e.
• Regexp és Not Regexp: az elem megfelel-e a reguláris kifejezésnek.
• Is mobile device: az elemet csak mobil eszközökön jeleníti meg.

JetEngine specific

• Is Profile Page: az elem csak a felhasználó profiloldalának aloldalán jelenik meg, ha az a Profile Page listából kiválasztható.
• Switcher enabled és Switcher disabled: a Switcher metamezőkhöz; az elem láthatósága attól függ, hogy a megadott mezőben a kapcsoló be van-e kapcsolva.
• Value is checked és Value is not checked: a JetEngine Checkbox metamezőjéhez; megadhatod a mezőt és az értéket, és az elem megjelenik, ha a felhasználó bejelöli az értéket.

User

• User meta is: az elem látszik, ha a felhasználó megadott metamezőjében a megadott érték van. Egyéni metamezőket a felhasználókhoz a metaboxszal vehetsz fel.
• User has required field: a Fields List mezőbe írd a vizsgálandó mezőket. Lehetnek WordPress-alapmezők (például first_name, last_name, description, user_nicename) vagy egyéni metamezők. A feltétel akkor teljesül, ha a felhasználónak mindegyikben van adata.
• User meta is equal to post meta (put post meta key into value): az elem akkor látszik, ha a felhasználó és a bejegyzés metaadata azonos. A bejegyzés metakulcsát a Value mezőbe írd.

A fenti három feltétel akkor érhető el, ha a JetEngine → JetEngine → Modulok → Külső modulok fülön bekapcsoltad az Egyéni láthatósági feltételek kapcsolót.

• User Can Add Post: az elem azoknak a felhasználóknak látszik, akik közzétehetnek ilyen típusú bejegyzést. A jogosultságot a Profile Builder beállításaiban lehet korlátozni.
• User logged in: csak a bejelentkezett felhasználóknak látszik.
• User not logged in: csak a be nem jelentkezetteknek.
• User role is: csak a megadott szerepkörű felhasználóknak.
• User role is not: azoknak, akiknek a szerepköre nem egyezik a megadottal.
• User ID is: csak azoknak, akiknek az azonosítóját a User IDs mezőbe írtad.
• User ID is not: azoknak nem, akiknek az azonosítóját a User IDs mezőbe írtad.

Posts

• Post Status Is: az elem csak a megadott állapotú oldalakon látszik.
• Is post by current user: csak az aktuális felhasználó által létrehozott oldalakon látszik; például a felhasználói fiókoldalon használható.

Ez a két feltétel csak akkor érhető el, ha telepítve és aktiválva van az Egyéni láthatósági feltételek (Custom Visibility Conditions) kiegészítő.

• Is post by queried user: csak a lekérdezett felhasználó által létrehozott oldalakon látszik; kizárólag a Profile Builder oldalain és a felhasználók listájában használható.
• Post ID is: az elem csak a Value mezőben megadott oldalakon jelenik meg. Az oldal azonosítóját számként írd be. Az azonosítót az oldal szerkesztőjének URL-jében a „post=” utáni szám adja. Több azonosítót szóköz nélkül, vesszővel válassz el.
• Post ID is not: az elem a megadottakon kívül minden oldalon látszik.
• Single Post Type is: a Value mezőbe a bejegyzéstípus slugját írd; az elem csak az ilyen típusú bejegyzéseknél látszik. A slugot a JetEngine → Bejegyzéstípusok oldal Post Type Slug oszlopában találod.
• Single Post Type is not: az elem a megadott típuson kívül minden bejegyzésnél látszik.
• Post Type Archive is és Post Type Archive is not: csak a megadott slugú bejegyzéstípus archívumán látszik, illetve az összes többi archívumon.
• Taxonomy Archive is és Taxonomy Archive is not: ugyanez taxonómiaarchívumokra.
• Is Search Results és Is Not Search Results: csak a keresési találatok archív oldalán látszik, illetve ezt kivéve mindenhol.
• Is Current Post Author és Is Not Current Post Author: az elem akkor látszik, ha az aktuális felhasználó a bejegyzés szerzője, illetve ha nem az.
• Post Has Terms és Post Hasn’t Terms: az elem látszik, ha a bejegyzéshez vannak (illetve nincsenek) kifejezések rendelve.
• Is Parent Post, Is Not Parent Post, Is Child Post of, Is Not Child Post of: a bejegyzés hierarchiában betöltött szerepe szerint jelenít meg elemeket. Használatukhoz a JetEngine → Bejegyzéstípusok oldalon a kívánt típusnál be kell kapcsolni a Hierarchical kapcsolót; a szülő bejegyzést a Gyorsszerkesztés gombbal rendelheted hozzá.

Date&Time

• Time Period: az elem csak a megadott időszakban látszik. A Time From és Time To mezőbe 24 órás formában írd az időt (például 23:00).
• Days of week: az elem csak a Days of Week választóban megadott napokon látszik.

Listings

• Is even item: az elem akkor látszik, ha a listaelem helyzete a Listing Gridben páros (második, negyedik stb.).
• Is odd item: ha a helyzet páratlan (első, harmadik stb.).
• Is N item: az elem akkor látszik, ha a listaelem N-edik a sorban. Ha például 3-at adsz meg, a harmadik elemnél jelenik meg. Az Each N Number kapcsoló bekapcsolásával minden harmadik elemnél megjelenik.