# Fülek és más widgetek a Query Builderrel

> A Fülek widget feltöltése bejegyzésekkel és kategóriákkal JetEngine lekérdezésből, valamint a Slider, a Vélemények és a Függőleges idővonal dinamikussá tétele.

A JetTabs és a JetElements widgetjei alapból statikusak: a tételeket kézzel veszed fel. A JetEngine **Query Builder** moduljával a tartalmat lekérdezés adja, így a tételek száma és tartalma az oldal adataiból jön, és nem kell kézzel karbantartani.

## Követelmények

- JetEngine, JetElements és JetTabs telepítve és aktiválva.

## A közös alapelv

Minden widgetben ugyanaz a módszer:

1. A **JetEngine → Query Builder** oldalon készítesz egy lekérdezést.
2. A widget tételeit tartalmazó részen bekapcsolod a **JetEngine-lekérdezés használata** kapcsolót, és kiválasztod a lekérdezést.
3. Csak **egy tételt** hagysz meg: ez a minta, a lekérdezés minden találatához ebből készül egy tétel.
4. A tétel mezőibe **Dinamikus címkével** (például **Custom Field**) húzod be az adatot.

## Fülek bejegyzésekhez

Ebben a példában a fülek tartalma egy kiválasztott bejegyzéslista.

1. A **JetEngine → Query Builder** oldalon kattints az **Add New** gombra. Adj nevet, a **Query Type** legyen **Posts Query**, válaszd ki a **Post Type** értékét, a **Post Status** pedig legyen **Published (publish)**.
2. A **Post & Page** fülön a **Posts In** mező melletti **Dinamikus címke** ikonnal válaszd a **Current ID** lehetőséget. Mentsd a lekérdezést.
3. A **JetEngine → Listings/Components** oldalon az **Add New Item** gombbal készíts listasablont, amely egy bejegyzés megjelenését adja. Tedd közzé.
4. Az Elementorban hozz létre egy új **Page** típusú sablont, add hozzá a **Listing Grid** widgetet, és a **General → Listing** mezőben válaszd ki a listasablont.
5. A **Custom Query** fülön kapcsold be a **Use Custom Query** kapcsolót, és válaszd ki az első lekérdezést. Ha itt a „No data was found” üzenet látszik, az ezen a lépésen rendben van. Mentsd a sablont.
6. Készíts egy második **Posts Query**-t ugyanahhoz a tartalomtípushoz. Itt döntöd el, mely bejegyzések kerüljenek a fülekbe, például a **Post & Page → Post In** mezőben azonosítóval megadva őket.
7. Az oldalon add hozzá a **Fülek** widgetet. Kapcsold be a **JetEngine-lekérdezés használata** kapcsolót, és válaszd ki a második lekérdezést.
8. Hagyj egyetlen tételt. A **Tartalom típusa** legyen **Sablon**, a **Choose Template** mezőben pedig válaszd ki a 4. lépésben készített sablont.
9. Tedd közzé az oldalt. A nyilvános oldalon a kiválasztott bejegyzések egy-egy fülként jelennek meg.

## Fülek kategóriánként csoportosított bejegyzésekkel

Itt a fülek a kategóriák (taxonómia-kifejezések), és mindegyik fül a kategória bejegyzéseit mutatja.

1. Készíts **Posts Query**-t. A **General** fülön válaszd ki a **Post Type** értékét.
2. A **Tax Query** fülön kattints az **Add new** gombra. Válaszd ki a **Taxonomy** értékét, a **Field** legyen **Term ID**. A **Terms** mező melletti **Dinamikus címke** ikonnal válaszd a **Queried term** lehetőséget, a **Compare** operátor pedig legyen **IN**. Mentsd az **Add Query** gombbal.
3. Készíts listasablont a bejegyzésekhez (**JetEngine → Listings/Components**).
4. Az Elementorban készíts **Page** sablont, tedd bele a **Listing Grid** widgetet, válaszd ki a listasablont, és alkalmazd rajta a bejegyzés-lekérdezést. Mentsd.
5. Készíts **Terms Query**-t: **Add New**, adj nevet, a **Query Type** legyen **Terms Query**, a **General** fülön válaszd ki a **Taxonomy** értékét, és mentsd.
6. Az oldalon a **Fülek** widgetnél kapcsold be a **JetEngine-lekérdezés használata** kapcsolót, és válaszd ki a **Terms Query**-t.
7. Hagyj egyetlen tételt. A **Címke** mező melletti **Dinamikus címke** ikonnal válaszd a **Term Field** lehetőséget, majd a megnyíló ablakban a **Taxonomy** értékét, a **Field** értéke pedig legyen **Term name**.
8. A **Tartalom típusa** legyen **Sablon**, és válaszd ki a 4. lépésben készített sablont. Mentsd az oldalt.

A nyilvános oldalon minden fül egy kategória, alatta a kategória bejegyzéseivel.

## Fülek szülő és gyerek kategóriákkal

Itt a fülek a szülő kategóriák, a tartalmuk pedig a gyerek kategóriák listája.

1. Készíts **Terms Query**-t a kívánt **Taxonomy** értékkel. A **Parent/Child** fülön a **Parent** mező melletti **Dinamikus címke** ikonnal válaszd a **Queried term** lehetőséget, és mentsd az **Add Query** gombbal.
2. Készíts listasablont a gyerek kategóriákhoz (**JetEngine → Listings/Components → Add new item**), és tedd közzé.
3. Az Elementorban készíts **Page** sablont a **Listing Grid** widgettel: válaszd ki a listasablont, és alkalmazd rajta az 1. lépés lekérdezését.
4. Készíts még egy **Terms Query**-t ugyanahhoz a taxonómiához. A **Parent/Child** fülön a **Parent** mezőbe írj **0**-t, így csak a szülő kategóriák jönnek vissza. Mentsd.
5. Az oldalon a **Fülek** widgetnél kapcsold be a **JetEngine-lekérdezés használata** kapcsolót, és válaszd ki az utolsó lekérdezést.
6. Hagyj egyetlen tételt. A **Címke** mezőnél a **Term Field** dinamikus címkével jelenítsd meg a kategória nevét (**Taxonomy**, **Term name**).
7. A **Tartalom típusa** legyen **Sablon**, válaszd ki a 3. lépésben készített sablont, és mentsd az oldalt.

A nyilvános oldalon a fülek a szülő kategóriák, mindegyik alatt a gyerek kategóriákkal.

## Slider bejegyzésekhez

1. A **Query Builder**ben készíts **Posts Query**-t, a **General** fülön válaszd ki a kívánt egyéni tartalomtípust. Szükség szerint adj hozzá más beállításokat, és mentsd.
2. Az oldalon add hozzá a **Slider** widgetet, kapcsold be a **JetEngine-lekérdezés használata** kapcsolót, és válaszd ki a lekérdezést.
3. Hagyj egyetlen tételt. Az adatot fogadó mezők melletti **Dinamikus címke** ikonnal válaszd a **Custom Field** lehetőséget, és a kívánt mezőt.
4. Tedd közzé az oldalt: a slider a bejegyzésekből töltődik.

## Vélemények widget bejegyzésekhez

1. Készíts **Posts Query**-t a kívánt egyéni tartalomtípusra, és mentsd.
2. Az oldalon add hozzá a **Testimonials** (Vélemények) widgetet, kapcsold be a **JetEngine-lekérdezés használata** kapcsolót, és válaszd ki a lekérdezést.
3. Hagyj egyetlen tételt. A kitöltendő mezők melletti **Dinamikus címke** ikonnal válaszd a **Custom Field** lehetőséget, és a kívánt mezőt.
4. Mentsd az oldalt, és nézd meg a nyilvános oldalon.

## Függőleges idővonal bejegyzésekhez

1. Készíts **Posts Query**-t a kívánt egyéni tartalomtípusra, szükség szerint további beállításokkal, és mentsd az **Add Query** gombbal.
2. Nyisd meg az oldalt az Elementorban, és add hozzá a **Vertical Timeline** (Függőleges idővonal) widgetet.
3. A widget **Cards** (Kártyák) részén kapcsold be a **JetEngine-lekérdezés használata** kapcsolót, és válaszd ki a lekérdezést.
4. Hagyj egyetlen kártyát, a többit töröld: ez a kártya a sablon a dinamikusan betöltött tételekhez.
5. A kártya mezőiben a **Dinamikus címkék** ikonnal válaszd a **Custom Field** lehetőséget, és a kívánt meta mezőt.
6. Tedd közzé az oldalt, és ellenőrizd a nyilvános oldalon.

## Tipp

A lekérdezéshez kötött widgetben mindig csak egy tétel maradjon, mert a lekérdezés találatai ismétlik meg. Ha a fülek tartalma sablon, a sablonban lévő **Listing Grid** és a hozzá rendelt lekérdezés határozza meg, mi látszik a fül alatt.