Egyedi felhasználói oldal

A nyilvános profiloldal egy felhasználó adatait, bejegyzéseit, hozzászólásait és értékeléseit mutatja a látogatóknak. Ez a fejezet azt írja le, hogyan állítod be a Tartalom és az Átírás sablonmódban, hogyan veszel fel aloldalakat, és hogyan teszed fel a profilmenüt. A példa egy állásportál.

Előfeltételek: Elementor (az ingyenes is elég), blokkszerkesztő vagy Bricks, és aktív JetEngine.

A két sablonmód különbségét lásd a Fiókoldal Tartalom és Átírás móddal fejezetben: Tartalom módban a Profile Menu egyszer, a profiloldalra kerül, a Profile Subpage Content pedig az aloldalt mutatja; Átírás módban a menü minden sablonba külön kerül.

A modul bekapcsolása

A JetEngine → JetEngine → Modulok fülön kapcsold be a Profilkészítő kapcsolót, kattints a Mentés gombra, és várd meg az oldal újratöltődését.

Tartalom sablonmód

A profiloldal létrehozása

Az Oldalak → Új oldal menüben hozz létre egy „Profil” nevű oldalt, és tedd közzé; egyelőre legyen üres.

A Profile Builder beállítása

1. Nyisd meg a JetEngine → Profile Builder oldalt.
2. Kapcsold be az Egyedi felhasználói oldal kapcsolót, a megjelenő mezőben válaszd ki a „Profil” oldalt, a Sablonmód legyen Tartalom, majd kattints a Mentés gombra.
3. Nyisd meg a Felhasználói oldal fület, és kattints a + Új aloldal hozzáadása gombra.
4. Add meg a Cím és a Slug értékét, és ha kell, állítsd be a többit:
   • Sablon: az Elementor-sablon vagy Listing Item, amely az aloldal tartalma;
   • Elrejtés a menüből: ha bekapcsolod, az aloldal nem látszik a profilmenüben, de a webcímén elérhető;
   • Oldal láthatósága: Tulajdonos esetén csak a saját fiókjába bejelentkezett felhasználó látja, Mind esetén mások is;
   • Jelenítsd meg ezt az oldalt a felhasználói szerepkör számára: azok a szerepkörök, amelyeknél az aloldal látszik.

Az aloldal sablonja mutathatja a felhasználó adatait és az értékeléseit (lásd itt).

https://minta-bolt.hu/wp-admin/admin.php?page=profile-builder

A képen a Main aloldal beállításai látszanak.

Az aloldal sablonja a felhasználó adataival

Előbb hozz létre felhasználói metaboxot a mezőkkel és szójegyzékekkel; ennek lépései megegyeznek a fiókoldalnál leírtakkal (becenév, név, e-mail, telefon, avatár, születésnap, szakmai összefoglaló, tapasztalat, nyelvek, ismétlő mező a készségekhez). A mezőket a Felhasználók → Profil oldalon töltheted ki a saját fiókodhoz, más felhasználóknál pedig a Felhasználók → Minden felhasználó oldalon, a felhasználó szerkesztésénél.

Ezután a sablonhoz:

1. A JetEngine → Profile Builder → Felhasználói oldal fülön az aloldalnál kattints a Sablon mező alatti + Új sablonminta létrehozása hivatkozásra.
2. A felugró ablakban add meg a Sablon nevét, és válaszd ki a típust: Listing Item, Elementor Template vagy Bricks Template. Listing Item esetén a nézet Elementor, Blocks (Gutenberg), Bricks vagy Timber/Twig lehet.
3. A példában Elementor-sablon készült. Szúrj be egy belső szekciót két oszloppal.
4. Az első oszlopba Dynamic Image kerül a felhasználói avatár metamezőjével. A Style fülön a szélesség 174 px, a Border Radius 50%, így kerek kép lesz.
5. Alatta három Dynamic Field widget Meta Data forrással: keresztnév, vezetéknév és beosztás.
6. Heading „Általános” szöveggel, alatta két Dynamic Field: tapasztalat és fizetés. Kapcsold be a Customize field output kapcsolót, és írj szöveget az érték elé (például „Fizetés: €%s”, ahol a %s a metamező értéke).
7. Heading „Nyelvek” felirattal, alatta Dynamic Field a Checkbox mezővel; kapcsold be a Filter field output kapcsolót, és a Callback a „Checkbox field values” legyen, így kiírja az ismert nyelveket.
8. A második oszlopba Heading „Szakmai összefoglaló” és Dynamic Field (Meta Data) a leírással kerül.
9. Heading „Készségek”, alatta Dynamic Repeater widget: a Source az ismétlő metamező, az Item format mezőben a <span>%name%</span> makróban a „name” helyére az ismétlő mező neve kerül (itt <span>%user-skill%</span>). A Style → Items értékei a példában: fekete szöveg, világosszürke háttér, Border Radius 10, Padding 4/10/4/10, Margin 10 jobbra.
10. Egy másik belső szekcióba kerülhet a felhasználó portfóliója (lásd itt).
11. Közzététel/Frissítés.

A profiloldal szerkesztése

1. Az Oldalak listában nyisd meg a „Profil” oldalt a kívánt szerkesztővel (Elementor, blokkszerkesztő vagy Bricks).
2. Húzd be a Profile Menu widgetet (blokkot, elemet). A menü az aloldalak címeit mutatja. A Content beállításnál válaszd a Single User Page értéket, és igazítsd a többit.
3. Tedd mellé a Profile Subpage Content widgetet; ez mutatja a kiválasztott menüpont aloldalát.
4. Kattints a Frissítés gombra.

A nyilvános oldalon a menüpontokra kattintva a Profile Subpage Content megjeleníti a megfelelő aloldalt.

Átírás sablonmód

A profiloldal létrehozása

Hozz létre egy oldalt az Oldalak → Új oldal menüben, és tedd közzé. Üresen hagyhatod, mert a tartalom a sablonokból jön. Ha tartalmat szeretnél az oldalra, előbb tedd fel, és csak azután jelöld ki egyedi felhasználói oldalnak, mert utána már nem szerkeszthető.

A Profile Builder beállítása

1. A JetEngine → Profile Builder → Oldalak fülön kapcsold be az Egyedi felhasználói oldal kapcsolót, válaszd ki az oldalt, a Sablonmód legyen Átírás.
2. Az Oldal tartalmának használata kapcsoló csak Átírás módban érhető el: ha bekapcsolod, az oldal saját tartalma jelenik meg, amennyiben nincs aloldal-sablon beállítva.
3. Mentés, majd a Felhasználói oldal fülön vedd fel az aloldalakat a + Új aloldal hozzáadása gombbal, az előbbi beállításokkal (Cím, Slug, Sablon, Elrejtés a menüből, Oldal láthatósága, szerepkörök).

A sablon a menüvel

A felhasználói adatokat mutató sablon felépítése megegyezik a fentivel. A végén add hozzá a Profile Menu widgetet (blokkot, elemet), és válaszd a Single User Page környezetet. Minden aloldalhoz külön be kell tenned a menüt, ha látszani szeretnéd, és mindegyiket másképp formázhatod. Frissítsd a sablont.

Nyisd meg a profiloldalt a nyilvános felületen az eredmény ellenőrzéséhez.

A profiloldal webcíme

Az Oldalak fül Felhasználói oldal átírása mezője adja meg, mi kerül a webcímbe: a Felhasználónév, a Felhasználói nicename vagy a Felhasználói azonosító (ID). Az összes beállítást lásd a Profilkészítő áttekintése fejezetben.