Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress

Dinamikus Oldalsablonok WordPress-ben, 2. rész

by
Read Time:12 minsLanguages:
This post is part of a series called Dynamic Page Templates in WordPress.
Dynamic Page Templates in WordPress, Part 1
Dynamic Page Templates in WordPress, Part 3

Hungarian (Magyar) translation by Viktor Istvan Csaszar (you can also view the original English article)

Ennek az oktatósorozatnak az első részében bemutattam a dinamikus oldalsablonok alapkoncepcióját, és létrehoztam egy általános oldalsablont a jövőbeni munkához történő felhasználásra. A Twenty Seventeen szülősablonon alapuló WordPress gyermeksablont használtam az oldalsablon implementálásához.

Ebben az oktatóbejegyzésben további specifikus részleteket tudhatsz meg a dinamikus oldalsablonokról, illetve,hogy hogyan használd fel őket a saját WordPress projektjeidben.

Azt is lépésről-lépésre bemutatom, hogyan terjeszd ki az oldalsablont a kezdeti lépésektől, míg létrehozod a saját első, működő dinamikus oldalsablonod!

Dinamikus oldalsablonok: Egy rugalmasabb megközelítés

Nos, hogyan is tehetjük az oldalsablonokat még rugalmasabbá, s miért is hasznos ez egyébként?

Tegyük fel, hogy van egy portfólió oldalsablonokd, mely galériát hoz létre, benne a portfolói elemek sokaságával. Mindegyik elem meghatározott mérettel rendelkezne, s így csak megadott mennyiség férne közülük mindegyik sorba.

Természetesen hozzáadhatnánk egy másik oldalsablont, hogy a portfóliókat különböző méretben is mutassuk. De mi van akkor, ha mi kicsi, közepes és nagy méretű portfóliókat is mutatnánk? Ehhez, három különálló oldalsablonra lenne szükség, mindegyikük különböző méretben mutatná a portfólió elemeket.

Egy azonnali megoldással viszont sokkal rugalmasabbá tehetnénk ezt, egy legördülő menü hozzáadásával, ahol kiválasztható lenne a portfólió mérete (pl. kicsi, közepes vagy nagy). Ez kényelmesebb lenne a felhasználó számára is, mivel az oldalsablon doboz kevésbé lenne zsúfolt a szükségtelen választási lehetőségekkel.

Nem beszélve arról, hogy a fejlesztőnek is csak egy oldalsablont kellene karban tartania, a korábbi három helyett! Ez megfelelne a Ne ismételd önmagad (Don't Repeat Yourself - DRY) szoftverfejlesztési alapelvnek.

Az összes oldalsablonnak dinamikusnak kell lennie?

Érdemes megjegyezni, hogy nem minden oldalsablon számára előnyös, ha dinamikus. Ha egy olyan oldalsablonnal rendelkezel, mely csupán egyetlen dolgot csinál, s csupán azt az egyet, akkor nem szükséges dinamikusnak lennie. Ebben az esetben nem lenne értelme további egyedi vezérlést és extra dolgokat addni ehhez a sablonhoz.

Ahogy te is látni fogod ennek az oktató bejegyzésnek a végére, számos oldalsablon nagyszerű előnyöket szerezhet, ha sokkal rugalmasabban működik.

Egy másik hasznos példa a dinamikus oldalsablonokhoz a kapcsolatfelvételi űrlap. Nagyon sok egyedi vezérlőelem adható az ilyen oldalsablonhoz, hogy nagymértékben rugalmassá váljon.

Például, ahelyett, hogy a kimeneten az űrlapmezők egy meghatározott sorrendje jelenjen meg, az oldalsablon vezérlőelemei egy teljesen testre szabható mezősorrendet tehetnek lehetővé. Vagy esetleg a captcha mező alkalmanként megjelenítésre kerülthet, így elkerülve a spam beküldéseket. Hihetelen sok mód van egy kapcsolatfelvételi űrlap személyre szabására!

Egy dinamikus oldalsablont fogok elkészíteni ennek az oktatósorozatnak a 3. részében. De előbb, kezdjük a munkát egy általános célú dinamikus oldalsablon létrehozásával!

Az első dinamikus oldalsablonunk

Kezdésnek, létre fogunk hozni egy alap dinamikus oldalsablont, mellyel megmutatjuk, mennyire együtt tudnak működni egymással a különféle összetevők. Egyedi vezérlők kerülnek hozzáadásra az oldalszerkesztőhöz, melyek később felhasználásra kerülnek az oldalsablon kimenetének kialakításához.

Az egyedi oldalsablon vezérlő elemek, melyeket hamarosan hozzá fogunk adni:

  • Szövegmező
  • Szövegdoboz
  • Jelölődoboz
  • Rádiógombok
  • Legördülő jelölődoboz

Ideális esetben ezeket a vezérlőelemeket közvetlenül az oldalsablon legördülő doboza alá kell elhelyezni, ezzel egyértelmű lesz, hogy az oldalsablonhoz tartoznak.

Habár, a WordPress nem biztosít ehhez egyetlen hookot sem, így neked (most) ezt úgy kell megoldanod, hogy az egyedi oldalsablon vezérlőket egy elkülönített egyedi meta dobozhoz adod. Ennek az oktatósorozatnak a harmadik részében majd megmutatom, hogy kerekedj felül ezen a problémán is.

A hookok alapvetően a WordPress fejlesztéshez. Lehetővé teszik a fejlesztők számára a kódkészlet olyan kiterjesztését, ahol nem szükséges a rendszermag fájljainak szerkesztése, amely amúgy is rossz ötlet lenne. Főleg azért, mert minden egyedi kódot kisöpörne egy következő WordPress frissítés (amely nagyon gyakran kiadásra kerül).

A meta dobozunk megjelenítéséhez az oldalszerkesztő felületen, add hozzá a load-post.php és load-post-new.php hookokat a gyermeksablon init() metódusához, amit az 1. részben hoztunk létre.

Két WordPress hookot használunk, hogy biztosítsuk a meta dobozok megjelenítését az oldalszerkesztőben, hozz létre akár egy új oldalt, vagy szerkessz egy már meglévőt. Ott van még a save_post hook is, mely kezeli a post meta adatok mentését, s mellyel egy kicsit később foglalkozunk majd.

Add hozzá a következő négy class metódust az adatok létrehozásához, megjelenítéséhez és mentéséhez a meta dobozokhoz.

Nem fogom itt túl mélyen részletezni a WordPress meta dobozokat, mely önmagában is egy önálló oktatóbejegyzés lehetne, de megjegyezném a következőket a fentebb általam hozzáadott kódról:

  • A page_template_meta_box() és az add_page_template_meta_box() class metódusok regisztálják a meta dobozt a WordPress-ben.
  • Az add_page_template_meta_box() esetén a 'page' paraméter határozza meg, hogy ez a meta doboz csak a 'page" poszt típus szerkesztőjében jelenjen meg a WordPress adminban.
  • A display_page_template_meta_box() class metódus hozza létre a meta dobozt, és beállít egy nonce-t az űrlapvezérlők még biztonságosabbá tételére.

Ha minden rendben ment, akkor már látnod kell a megjelent meta dobozt az oldal szerkesztőben, ahogy alább látszik.

A new page meta boxA new page meta boxA new page meta box

Jelenleg még egy picit üres, szóval, adjunk hozzá néhány vezérlőt!

Egyedi vezérlők hozzáadása

Ha még emlékezel a fentiekből, akkor hozzáadunk egy szövegmezőt, szövegdobozt, rádiógombot és dobozválasztó vezérlőket a meta dobozhoz. Kezdjük a következő kód hozzáadásával a display_page_template_meta_box() metódushoz, a nonce függvény alatt.

Ez veszi a meta doboz vezérlőink aktuális értékeit, s eltárolja őket helyi változókként. Most addjuk hozzá a következő HTML kódot közvetlenül utána, hogy legeneráljuk a meta doboz vezérlőket.

Mindegyik vezérlő egy bekezdés elemet tartalmazott magában, s az aktuális értéke frissítésre került a korábban létrehozott helyi változókkal. Ez biztosítja, hogy a meta doboz vezérlők mindig a megfelelő értékeket jelenítik meg.

Habár, ez az egész nem fog megtörténni, hacsak nem mentjük a jelenlegi meta doboz vezérlői adatait a WordPress adatbázisába.

Kicsit korábban, regisztráltam egy hookot, hogy végrehajtson egy class metódust minden alkalommal, amikor az oldal szerkesztő frissítésre került. Adjuk hozzá hát ezt a metódust a gyermeksablon classunkhoz most!

A save_page_template_meta() class metódus kezeli a meta doboz vezérlői adatainak mentését. Csak akkor menti a meta doboz adatait, ha a nonce megerősítésre kerül, a jelenlegi felhasználó szerkesztheti a posztokat, és az oldal szerkesztő admin felületén vagyunk.

Ha ezen a feltételek fennállnak, akkor mindegyik vezérlő adatát kinyerjük a globális $_POST változóból. Ez a változó minden alkalommal beállításra kerül, amikor egy űrlapot elküldenek.

Végül, a meta doboz vezérlő adatai elmentésre kerülnek a WordPress adatbázisába, mint az aktuális oldal meta adatai.

A hozzáadott egyedi oldalsablon vezérlőkkel, a meta dobozunknak így kell kinéznie.

Adding controls to the meta boxAdding controls to the meta boxAdding controls to the meta box

Írj be valamilyen szöveget a szövegmezőbe és a szövegdobozba, jelölj ki valamit a jelölődobozban, a rádiógombnál és a kiválasztó dobozban. Nyomd meg a gombot a változtatásaid elmentéséhez, s amikor az oldal szerkesztő befrissül, a meta doboz vezérlőidnek azt kell mutatniuk, amit épp beállítottál.

Populating the meta boxPopulating the meta boxPopulating the meta box

A gyermeksablon functions.php fájljának teljes forráskódja alább látható.

A kirakós utolsó darabjaként használjuk a meta doboz vezérlő adatait az oldalsablonunkban, a front enden. Nyisd meg a test-page-template.php fájlt, melyet az 1. részben csináltunk, s cseréld ki a tartalmát ezzel a frissített kóddal:

Győződj meg arról, hogy a 'Test Page Template' az aktuálisan kiválasztott oldalsablon, s nézd meg az oldalt a front enden.

Viewing the output of the meta boxViewing the output of the meta boxViewing the output of the meta box

Ahogy láthatod, az oldalsablon most már tartalmazza azokat az adatokat, melyet nemrég állítottál be a meta doboz vezérlőinél az oldalszerkesztőben. Ez az alapja az oktatósorozat további részének, mivel ebből az alap példából fogunk építkezni, s számos változatát fogjuk létrehozni a teljesen működőképes dinamikus oldalsablonnak, melyeket felhasználhatsz majd a saját WordPress projektjeidben.

Konklúzió

Ebben az oktatóbejegyzésben bemutattuk, hogyan építs fel egy működő dinamikus oldalsablont. Jelenleg, habár tényleg működik, az alap oldalsablonunk nem nagyon hasznos.

A harmadik, s egyben utolsó részében ennek az oktatósorozatnak megmutatom, hogyan építs fel számos dinamikus oldalsablont, a kezdettől a befejezésig, melyet felhasználhatsz (s akár tovább is feljeszthetsz) a saját WordPress projektjeidben.

Ha bármilyen kérdésed lenne, kérlek, hagyj egy üzenetet alább a hozzászólásoknál. Kíváncsi vagyok az oktatóbejegyzéshez fűzött véleményedre!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.