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
Difficulty:IntermediateLength:LongLanguages:
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 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 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 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 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
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.