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

> A felhasználói fiókoldal felépítése a két sablonmóddal: aloldal-sablonok, felhasználói adatok megjelenítése, Profile Menu és Profile Subpage Content.

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](https://hub.hellowp.io/hu/plugins/jet-engine/profil-felhasznaloi-adatok-urlappal/));
- „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](https://hub.hellowp.io/hu/plugins/jet-engine/profil-felhasznaloi-ertekelesek/)).

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](https://hub.hellowp.io/hu/plugins/jet-engine/profil-portfolio-urlappal/)).

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ő.