Fiókoldal Tartalom és Átírás móddal

A fiókoldal a felhasználó központi vezérlőpultja: itt adhat meg és szerkeszthet adatokat, tehet közzé és szerkeszthet bejegyzéseket, és gyűjtheti a kedvenceit. Ez a fejezet a fiókoldal két felépítését mutatja be, a Tartalom és az Átírás sablonmódot, az aloldalak létrehozását és a profilmenü beállítását. A példa egy állásportál (munkavállalói profil).

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

Mi a különbség a két sablonmód között?

• Tartalom: a Profile Menu widgetet egyszer, a fiókoldalra teszed. A menü a Profilkészítőben beállított aloldal-sablonok címeit mutatja. A Profile Subpage Content widget a menüpontra kattintva dinamikusan mutatja az aloldal tartalmát.
• Átírás: az oldalt a sablonok tartalma írja felül. Ha menüt szeretnél, a Profile Menu widgetet minden sablonba be kell tenned. Sablononként másképp formázhatod és máshová teheted, vagy ki is hagyhatod.

A módot a JetEngine → Profile Builder → Oldalak fül Sablonmód mezője állítja.

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.

Az aloldal-sablonok tartalma

Egy aloldal-sablonba kerülhet:

• a felhasználó adatainak megjelenítése;
• a felhasználói fiók módosítására szolgáló űrlap (lásd itt);
• „Bejegyzés létrehozása” és „Bejegyzés szerkesztése” űrlap (JetFormBuilder, Insert/Update Post);
• a felhasználó kedvencei az Adattárak modullal;
• a felhasználó legutóbbi hozzászólásai;
• a felhasználó foglalásai vagy értékelései (lásd itt).

A sablon Elementor-sablon vagy JetEngine Listing Item lehet.

Sablon készítése Elementorral

1. Az Elementor → Sablonok → Mentett sablonok oldalon kattints az Új hozzáadása gombra.
2. Válaszd a Page sablontípust, add meg a nevet, és kattints a Create Template gombra.
3. Töltsd meg a sablont tartalommal. Például a JetForm widgettel tehetsz be JetFormBuilder-űrlapot.
4. Kattints a Frissítés gombra.

Annyi sablont készíts, amennyi kell.

Listing Item készítése

1. A JetEngine → Listázások/komponensek oldalon kattints az Új elem hozzáadása gombra.
2. A Lista forrása legyen Felhasználók, add meg a nevet, a Listázási nézet legyen Elementor, és kattints a Listázási elem létrehozása gombra.
3. Töltsd meg tartalommal, és frissítsd.

Felhasználói adatok megjelenítése

Metabox a felhasználóknak

Először hozz létre metaboxot a felhasználóknak (JetEngine → Metaboxok, a Meta Box for értéke User). A példában ezek a mezők szerepelnek:

• szövegmezők: becenév, vezeték- és keresztnév, e-mail-cím, telefonszám;
• Media mező: felhasználói avatár;
• Date mező: születésnap;
• WYSIWYG mező: szakmai összefoglaló;
• Number mező: tapasztalat;
• Checkbox mező: nyelvek;
• Repeater mező „Skills” (készségek) címkével, benne egy Select típusú almezővel.

A Select mező opcióit kétféleképpen adhatod meg: a New Field Option gombbal kézzel (ezeket csak az adott mezőben használhatod), vagy a Get options from the glossary kapcsolóval szójegyzékből. A szójegyzék tételeit annyiszor használhatod fel, ahányszor akarod. Szójegyzéket a JetEngine → JetEngine → Szójegyzékek fülön hozol létre: + Új szójegyzék, név, az Adatforrás legyen „Set items manually”, a tételeket az Új mező gombbal veszed fel, végül Mentés. A példában „Készségek” és „Nyelvek” szójegyzék készült, az utóbbit a Checkbox mezőhöz rendeltük.

A metabox mentése: Metabox hozzáadása gomb. A mezők a Felhasználók → Profil oldalon, a WordPress saját profilmezői alatt jelennek meg. Az ismétlő mező elemeit a + Elem hozzáadása gombbal veszed fel, és a legördülőből választod ki az értéket. A mentés a Profil frissítése gomb. Más felhasználó mezőit a Felhasználók → Minden felhasználó oldalon, a felhasználó szerkesztésénél tölthetod ki.

A sablon felépítése

A példa Elementor-sablonjában (Page típus) két oszlop van:

1. Az első oszlopba Dynamic Image kerül, a Source a felhasználói metabox avatár-mezője. Alatta három Dynamic Field widget, Meta Data forrással: a keresztnév, a vezetéknév és a beosztás.
2. Heading „Általános” szöveggel, alatta két Dynamic Field: tapasztalat és fizetés. Mindkettőnél kapcsold be a Customize field output kapcsolót, és a dinamikus érték elé írj szöveget; a %s a metamező értékét jelöli (például „Fizetés: €%s”).
3. Heading „Nyelvek” felirattal, alatta Dynamic Field, amely a Checkbox mező értékeit írja ki. Kapcsold be a Filter field output kapcsolót, és a Callback a „Checkbox field values” legyen.
4. Az oszlop Style fülén, a Background beállításnál válaszd a Classic értéket és fehér színt, hogy az oszlop kiemelkedjen.
5. A második oszlopba Heading „Szakmai összefoglaló” szöveggel és Dynamic Field (Meta Data) kerül a leírással, ugyanilyen fehér háttérrel.
6. Heading „Készségek” felirattal, 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ő nevét írd, például <span>%user-skill%</span>.
7. A Dynamic Repeater Style → Items beállításai a példában: szövegszín fekete, háttér világosszürke, Border Radius 10 minden irányban, Padding 4 fent és lent, 10 jobbra és balra, Margin 10 jobbra.
8. Egy további belső szekcióba a felhasználó portfóliója kerülhet (lásd itt).

Végül Közzététel/Frissítés.

Tartalom sablonmód

A fiókoldal létrehozása

Az Oldalak → Új oldal menüben hozz létre egy oldalt, adj nevet, és tedd közzé. Egyelőre maradjon üresen.

A Profile Builder beállítása

1. A JetEngine → Profile Builder → Oldalak fülön válaszd ki az új oldalt a Fiókoldal mezőben.
2. A Sablonmód értéke legyen Tartalom, majd Mentés.
3. A Fiókoldal fülön kattints a + Új aloldal hozzáadása gombra. Add meg a Cím és a Slug értékét, és rendeld a Sablon mezőhöz az Elementor-sablont vagy a Listing Itemet.
4. Szükség esetén kapcsold be az Elrejtés a menüből kapcsolót, és jelöld ki az Elérhető a felhasználói szerepkör számára mezőben a hozzáférő szerepköröket.
5. Annyi aloldalt vegyél fel, amennyi kell, majd Mentés.

A fiókoldal szerkesztése

1. Az Oldalak listából szerkeszd Elementorral a fiókoldalt.
2. Húzd be a Profile Menu widgetet. A menü az aloldalak címeit mutatja. Fontos, hogy az Account tartalmat (Context) válaszd ki, majd a többi beállítást igazítsd.
3. Tedd mellé a Profile Subpage Content widgetet: ez mutatja az aloldal tartalmát a menüpontra kattintáskor.
4. Kattints a Frissítés gombra.

A nyilvános oldalon a menüpontokra kattintva a Profile Subpage Content a megfelelő aloldal tartalmát mutatja.

Átírás sablonmód

A fiókoldal 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 az oldalra tartalmat szeretnél, előbb tedd fel, és csak utána jelöld ki Fiókoldalként, mert utána már nem szerkeszthető.

Aloldal-sablonok a menüvel

Készítsd el az Elementor-sablont vagy a Listing Itemet a fenti módon. A különbség: a sablonba be kell tenned a Profile Menu widgetet is, és ki kell választanod az Account tartalmat. Ennek az előnye, hogy a menüt minden sablonban másképp formázhatod, vagy bizonyos sablonokból el is hagyhatod. A felhasználói adatokat mutató sablon felépítése megegyezik a fentivel, a végén kerül bele a menü.

A Profile Builder beállítása

1. A JetEngine → Profile Builder → Oldalak fülön válaszd ki a Fiókoldal oldalt, a Sablonmód értéke legyen Átírás.
2. Az Oldal tartalmának használata kapcsoló Átírás módban érhető el. Kapcsold be, ha az oldal saját tartalmát szeretnéd mutatni arra az esetre, ha nincs aloldal-sablon beállítva.
3. Mentés, majd a Fiókoldal fülön vedd fel az aloldalakat (cím, slug, sablon, menüből elrejtés, szerepkörök) a + Új aloldal hozzáadása gombbal, és mentsd.

Eredmény

A példában a felhasználói adatokat mutató sablonban a Profile Menu Menu Layout beállítása „Horizontal”, a „Post a Job” menüpontra kattintva megnyíló űrlapos sablonban „Vertical”. Átírás módban tehát a menü oldalanként más beállítással is megjeleníthető.