Felhasználói adatok módosítása űrlappal

Ez a fejezet azt mutatja meg, hogyan módosíthatják a felhasználók a személyes adataikat a nyilvános felületről egy űrlappal. A megoldás a Profilkészítővel együtt használható.

Előfeltételek:

• Elementor (az ingyenes is elég) vagy a WordPress blokkszerkesztője;
• több felhasználó a webhelyen;
• aktív JetEngine, elkészített fiókoldallal.

Kiegészítő metabox

A metabox plusz mezőket ad a felhasználói profilhoz. Ha már van felhasználói metaboxod a szükséges mezőkkel, ezt a lépést kihagyhatod.

1. A JetEngine → Metaboxok oldalon kattints az Új hozzáadása gombra.
2. Add meg a metabox címét, és a Meta Box for mezőben válaszd a User értéket.
3. A feltételek között a Visible at listában válassz:
   • Edit User: a mezők az Edit User oldalra kerülnek; mivel felhasználót csak az adminisztrátor szerkeszthet, ők csak neki látszanak;
   • Edit User & Profile: a mezők a Profil oldalon és az Edit User oldalon is megjelennek, így maguk a felhasználók is szerkeszthetik őket.
4. A + Új feltétel gombbal szerepköröket is bevonhatsz vagy kizárhatsz.
5. Az Új metamező gombbal vedd fel a mezőket. A példában az álláskeresők mezői: szöveg (becenév, név, e-mail), Media (avatár), Date (születésnap), WYSIWYG (leírás), Repeater (készségek és tanulmányok), Number (elvárt fizetés) és Checkbox (nyelvek).
6. Mentsd a metaboxot (Metabox hozzáadása).

A Felhasználók → Minden felhasználó oldalon szerkessz egy olyan felhasználót, akire a metabox feltételei érvényesek: az oldal alján megjelenik a metabox a kitölthető mezőkkel.

Az űrlap

JetFormBuilder-űrlap

Telepítsd és aktiváld a JetFormBuilder bővítményt. A JetFormBuilder → Új hozzáadása oldalon három blokkot találsz: Hidden Field, Text Field és Action Button.

Mezők

1. Add meg az űrlap címét, és kattints a Hidden Field blokkra. A FIELD VALUE legyen „Current User ID”, a FORM FIELD NAME pedig például „user_id”. A mező neve csak latin betűt, számot, kötőjelet és aláhúzást tartalmazhat.
2. A Text Field blokkot törölheted vagy módosíthatod; az Action Button is átszerkeszthető, de a példában változatlan marad.
3. A + ikonnal annyi mezőt veszel fel, amennyi kell. A példában három Text Field van a becenévnek, a vezeték- és a keresztnévnek (FIELD LABEL, FORM FIELD NAME, a FIELD TYPE „Text”).
4. Az e-mail mezőnél a FIELD TYPE „Email”, telefonszámnál „Tel”.
5. Az avatárhoz Media Field blokk kell, FIELD LABEL és FORM FIELD NAME beállítással. Kapcsold be az Insert attachment kapcsolót, és a FIELD VALUE igazodjon a metabox Media mezőjének beállításához: ha a mezőnél a „Media ID” értékformátumot választottad, itt az „Attachment ID” kell. Enélkül a felhasználók nem tölthetnek fel fájlt az űrlapon.
6. Az Action Button legyen az utolsó blokk.

Preset Settings

A JetForm beállítások között nyisd le a Preset Settings szakaszt:

1. Kapcsold be a kapcsolót, a SOURCE legyen „User”, a GET USER ID FROM pedig „Current User”.
2. A „Current User ID” rejtett mezőnél válaszd a „User ID” értéket, a többi mezőnél a „User Meta” értéket, amely az egyéni metamezőből tölti az adatot.
3. A megjelenő mezőkbe írd be a metabox megfelelő metamezőinek nevét.

Post Submit Actions

1. A JetForm beállítások Post Submit Actions szakaszában válaszd az „Update User” műveletet, és kattints a ceruza ikonra.
2. A FIELDS MAP részben a rejtett mezőhöz válaszd a „User ID (will update this user)” értéket, a többi mezőhöz a „User Meta” értéket, és add meg a hozzájuk tartozó metamezők nevét.
3. A USER ROLE mezőt hagyd üresen, különben a beküldés után a felhasználó szerepköre a kiválasztottra változik.
4. A MESSAGES SETTINGS részben egyedi üzeneteket is megadhatsz.
5. Kattints az Update gombra.
6. Kattints a + New Action gombra, válaszd a „Redirect to Page” műveletet, és a ceruza ikonnal nyisd meg. A REDIRECT TO legyen „Static Page”, a SELECT PAGE pedig a „Fiókom” oldal. Update.
7. Mentsd az űrlapot (Publish/Update).

Régi JetEngine-űrlap

A JetEngine-űrlapok elavult funkció; újabb lehetőségekhez a JetFormBuilder az ajánlott. Ha mégis ezt használod:

1. A JetEngine → JetEngine → Modulok fülön kapcsold be az Űrlapok (régi) modult, és mentsd.
2. A JetEngine → Űrlapok oldalon kattints az Új hozzáadása gombra.
3. Add meg az űrlap címét, és a ceruza ikonnal szerkeszd az első mezőt: a Field Value legyen „Current User ID”, a Name és a Label tetszés szerinti. A mező nem látszik a nyilvános oldalon. Apply Changes. A név csak latin betűt, számot, kötőjelet és aláhúzást tartalmazhat.
4. Az Add Field gombbal vedd fel a további mezőket. A példa szövegmezői (becenév, név, e-mail) Text típusúak, a Field Visibility pedig „Only for logged in users”. Az e-mail mezőnél a Field Type „Email”, a telefonszámnál „Tel”.
5. Az avatárhoz a Media típust válaszd, add meg a Name, Label és User access mezőt. Jelöld be az Insert attachment jelölőnégyzetet, és a Field value igazodjon a metabox Media mezőjéhez („Media ID” formátumhoz „Attachment ID”).
6. A mezők sorrendjét húzással rendezheted; a Submit Button legyen az utolsó.
7. A mezők alatt jelöld be a Pre-set form field values jelölőnégyzetet. A Source legyen „User”, a Get user ID from „Current user”. A Fields Map részben a rejtett mezőhöz „User ID”, a többihez „User Meta”, és add meg a metamezők nevét.
8. A Post-submit Actions / Notifications Settings részben a „Send Email” műveletet a ceruza ikonnal szerkeszd át: a Type legyen „Update User”. A Fields Map részben a rejtett mezőhöz „User ID (will update this user)”, a többihez „User Meta”. A User Role mezőt hagyd üresen. Apply Changes.
9. Az Add Notification gombbal vegyél fel egy újat: a Type „Redirect to Page”, a Redirect to „Static Page”, a Select page a „Fiókom” oldal. Apply Changes.
10. Mentsd az űrlapot.

Az űrlap elhelyezése az aloldal sablonjában

Az aloldal sablonját elkészítheted az Elementor sablonszerkesztőjével (Elementor → Sablonok → Mentett sablonok → Új hozzáadása) vagy a JetEngine-nel. Utóbbinál a JetEngine → Listázások/komponensek oldalon a Lista forrása legyen Felhasználók, adj nevet, és válaszd az Elementor vagy a Blocks (Gutenberg) nézetet.

Elementorban a Form vagy a JetForm widgetet húzd be. A Form widget JetEngine- és JetFormBuilder-űrlapot is meg tud jeleníteni (válaszd ki a Provider értékét: „JetEngine” vagy „JetFormBuilder”, majd az űrlapot). A JetForm widget csak JetFormBuilder-űrlapot jelenít meg, ott csak az űrlapot kell kiválasztani. A két widget tartalmi és stílusbeállításai kissé eltérnek.

Ha a fiókoldal Átírás módban van, tedd a sablonba a Profile Menu widgetet is. Tartalom módban nem kell, mert a menü már a fiókoldalon van. Kattints a Közzététel/Frissítés gombra.

A blokkszerkesztőben ugyanez a menet, a Form vagy a JetForm blokkal. A stílusbeállításokhoz használhatod az ingyenes JetStyleManager bővítményt.

Az aloldal hozzárendelése a fiókoldalhoz

1. Nyisd meg a JetEngine → Profile Builder → Fiókoldal fület, és kattints a + Új aloldal hozzáadása gombra.
2. Add meg a Cím értékét. A Slug magától kitöltődik, de módosíthatod; csak kisbetűs latin betűt, számot, kötőjelet és aláhúzást használj, szóköz helyett kötőjelet.
3. A Sablon mezőben válaszd ki az előbb készített sablont. Az Elérhető a felhasználói szerepkör számára mezőben szerepköröket is kijelölhetsz.
4. Kattints a Mentés gombra.

Kipróbálás a nyilvános oldalon

Jelentkezz be egy felhasználóval, nyisd meg a fiókoldalt, és kattints a profilmenü megfelelő pontjára. Módosítsd valamelyik adatot (például az avatárt), és kattints a beküldés gombra. Az űrlap a fiókoldalra irányít át, az első aloldalon már a módosított adat látszik. A vezérlőpulton, a Felhasználók oldalon a felhasználó szerkesztésénél a megfelelő metamezőben is megjelenik az új érték.