Dinamikus tábla készítése Elementorban

A Dinamikus táblákkal egy lekérdezés eredményét táblázatban jelenítheted meg: címekkel, metamezők értékeivel és listázási sablonokkal. A példában egy könyvesbolt „Könyvek” egyedi bejegyzéstípusának adataiból készül tábla: a könyv címe, a szerzője és egy képgaléria.

A Dinamikus táblák modul bekapcsolása

1. Nyisd meg a JetEngine → JetEngine → Modulok oldalt, és válaszd a Külső modulok fület.
2. Kapcsold be a Dynamic Tables Builder modult. A megjelenő ablakot bezárhatod.

A bekapcsolás után a JetEngine menüben megjelenik a Tables Builder oldal.

Lekérdezés létrehozása

A táblázat adatait mindig egy Lekérdezéskészítő lekérdezés adja.

1. Nyisd meg a JetEngine → Lekérdezéskészítő oldalt, és vegyél fel új lekérdezést.
2. Add meg a lekérdezés nevét, és válaszd ki a típusát. A példában ez a „Bejegyzések lekérdezése”.
3. A Posts Query részben a Post Type mezőben válaszd ki azt a bejegyzéstípust, amelyhez a táblát készíted (példa: „Könyvek”).
4. A többi mezőt igény szerint töltsd ki, majd kattints a lekérdezés hozzáadása gombra.

Tábla SQL-lekérdezés alapján

A tábla adatai nem csak bejegyzésekből jöhetnek, hanem egy saját adatbázistáblából is. A példában egy statisztikai tábla (videók megtekintései) kerül az oldalra.

1. Importáld a táblát az adatbázisba (például phpMyAdminnal: válaszd ki az adatbázist, nyisd meg az Import fület, a Choose File gombbal add meg az SQL-fájlt, majd Go). A fájl nevének a WordPress táblaelőtagjával kell kezdődnie (alapesetben wp_; ha az előtag más, azt írd elé). A táblát a névre kattintva, az Operations fülön, a Rename table to mezőben nevezheted át. Utána indítsd újra a weboldalt.
2. A JetEngine → Lekérdezéskészítő oldalon vegyél fel új lekérdezést, add meg a nevét, a Query Type legyen „SQL/AI Query”.
3. A Custom SQL Query részben a From table listában válaszd ki az importált táblát.
4. A rendezéshez az Order & Order By mezőnél kattints a Add new sorting parameter gombra (a példában a megtekintések száma szerint). A Show/Per Page Limit mezővel megadhatod, hány elem látszik oldalanként.
5. Kattints az Add Query gombra.
6. A JetEngine → Tables Builder oldalon vegyél fel új táblát. Az Általános beállítások fülön add meg a címet, a Data Query listában válaszd az előbbi lekérdezést, és kattints a Fetch Data gombra.
7. Az Oszlopok fülön minden oszlopnál a Column Content legyen Raw Value, a Data Source pedig Fetched Column, majd válaszd ki a tábla megfelelő oszlopát.
8. A Table Styles fülön az oszlopok Width értéke bármilyen CSS-ben érvényes szöveg lehet (például 120px vagy 20%).

Tábla felépítése

1. Nyisd meg a JetEngine → Tables Builder oldalt, és vegyél fel új táblát.
2. Az Általános beállítások fülön adj nevet a táblának, és a Data Query listában válaszd ki az előbb létrehozott lekérdezést (példa: „Books Query”).
3. Kattints a Fetch Data gombra: ezzel kapcsolod össze a lekérdezést a táblával.
4. Az Oszlopok fülön a New column gombbal vegyél fel oszlopokat.

A cím oszlop

1. A Column Name legyen „Cím”.
2. A Column Content listában válaszd a Raw Value elemet, a Data Source listában pedig a „Post/Term/User/Object” elemet.
3. A Select Field listában válaszd a „Post ID” értéket.
4. Kapcsold be a Filter Column Output kapcsolót, és a Filter Callback listából válaszd a „Get post/page link” (bejegyzés/oldal hivatkozás) elemet. Így a cím a bejegyzés egyedi oldalára mutató link lesz.

Ha nincs szükség kattintható címre, a Select Field listában válaszd a „Title” értéket.

Metamező oszlop

A „Szerző” oszlophoz a Data Source lista „Meta Field” elemét válaszd, majd a mező nevét (példa: „Book Author”).

Listázási sablon oszlop

Egy kész listázási sablont is oszlopként használhatsz, például egy képgalériát.

1. Nyisd meg új lapon a JetEngine → Listázások/komponensek oldalt, és kattints az Új elem hozzáadása gombra.
2. A Listázási elem beállítása ablakban a Listing Source legyen „Bejegyzések”, a From Post type a tábla bejegyzéstípusa (példa: „Könyvek”), add meg a sablon nevét, és kattints a Create Listing Item gombra.
3. Helyezd el a tartalmat a sablonban (például Dynamic Field elemet a galériával), formázd meg, és mentsd.
4. Térj vissza a Tables Builderhez, a Column Content listában válaszd a Template elemet, a Column Template listában pedig a létrehozott sablont (példa: „Book Gallery”).

Tábla stílusa

A Table Styles fülön beállíthatod a fejléc (Heading) és a cella (Cell) függőleges és vízszintes igazítását. Ennél részletesebb formázást az Elementor szerkesztőben végezhetsz. A Reload Preview gombbal megnézheted az elkészült táblát. A mentéshez kattints a Create Table gombra.

A tábla beillesztése az oldalra

1. Nyisd meg az oldalt az Elementor szerkesztőben (például Oldalak → Új oldal), és helyezd el a Dynamic Table widgetet.
2. Válaszd ki az előbb létrehozott táblát forrásként.
3. A Tartalom fülön kapcsold be a szükséges kapcsolókat, a Stílus fülön alakítsd ki a táblázat megjelenését, a Speciális fülön pedig állítsd be a további testreszabást.
4. Kattints a Közzététel gombra, és nézd meg a weboldalt.