WordPress sablonkészítés (2. rész)

[Ezt a cikket 14 perc elolvasni.]

Korábban elkezdtünk ismerkedni a WordPress sablonkészítés alapjaival, érdemes onnan indítani az olvasást. Az első cikk itt érhető el: [link]

A folytatásban kicsit részletesebben is megismerkedünk a WordPress loop-al, megtanulunk menüt regisztrálni és megjeleníteni, belemélyedünk a WordPress meta-ba és arra is kitérünk, hogy hogyan lehet egy bizonyos oldalnak saját kinézetet adni vagy éppen egy bizonyos szekciót vagy funkciót csak egy oldalra vonatkoztatni.

1. A loop-ról részletesebben

A WordPress rejtelmeiben elmélyedők gyakran találkozhatnak a WordPress Loop (magyarul hurokként is hívják) kifejezéssel. A Loop, bár működését tekintve egy egyszerű folyamatot takar, időként nehézséget okozhat a kezdők számára.

A működés megértéséhez tekintsük meg a következő példát. A kódrészlet egy általános WordPress téma index.php fájljában is szerepelhet.

<?php
if (have_posts()):
while (have_posts()) : the_post();?>
<h2><?php the_title(); ?></h2>
<?php the_content();
endwhile;
endif; ?>

A következő történik:

  1. A kód elsőként ellenőrizni  léteznek-e  bejegyzések.  -> if (have_posts()):
  2. Ha léteznek elindul a ciklus, mely egyenként végiglépked az össze bejegyzésen. A lejátszódó folyamat hasonlít egy tömb elemeinek kilistázásához, tulajdonképpen ez is történik, a különbség annyi, hogy a tömb elemeit a WordPress állítja elő a kapcsolódó beállítások figyelembevételével
  3. A ciklus magjában egyenként lekérdezésre kerülhetnek a bejegyzések információ. A példában a the_title() segítségével lekérdezzük és kiíratjuk az adott bejegyzés címét, a the_content() függvénnyel pedig a tartalmát
  4. Miután megjelenítettük az információkat a Loop továbblép a következő bejegyzésre.

A kód nem kezeli azt az esetet amikor nincsenek bejegyzések (else), a felhasználás esetén érdemes erről is gondoskodni.

Mielőtt a Loop működésbe lép, ellenőrzi a szükséges fájlok meglétét, majd áttekinti a folyamatot befolyásoló beállításokat. Ellenőrzi például, hogy mennyi bejegyzés megjelenítését kértük a Beállítások > Olvasás menüpontjában, és ennek megfelelő mennyiségű bejegyzést kér le az adatbázisból.

A loop minden esetben lefut, de a ha nem gondoskodunk a megjelenítéséről akkor a tartalma a memóriában marad. A megjelenítés során, a loop-on belül a leggyakrabban használható függvények a következők:

  • the_title() : A post címét jeleníti meg
  • the_content() :A bejegyzés tartalmi része
  • the_category(): A bejegyzés kategóriáját vagy kategóriáit jeleníti meg
  • the_time(): A bejegyzés létrehozási dátuma
  • the_excerpt(): A bejegyzés összefoglalója (kivonata)

2. Menük és menühelyek létrehozása a sablonban

A WordPress sablon elengedhetetlen része a navigáció, mely segíti a látogatót a honlapon történő tájékozódásban. A menü létrehozása a WordPress esetén egy viszonylag egyszerű feladat, de érdemes szépen kidolgozni azt, mivel egy központi eleme lesz a sablonunknak.

A lecke három részre van bontva, így egy könnyen értelmezhető és remélhetőleg gyorsan elsajátítható anyagot kaphatunk általa. A bontás a következőképpen néz ki:

  1. Menühelyek regisztrációja
  2. Menü megjelenítése a témában
  3. Menü formázása

Menühelyek regisztrációja

Alapállapotban a WordPress témánk nem fogja támogatni a menük megjelenítését, azaz amíg nem végezzük el a menük regisztrációját, addig rejtve marad a Vezérlőpult Megjelenés > Menük opciója.

A regisztráció során létrehozhatunk több menühelyet is, aminek a tartalmát a későbbiekben az adminisztrációs felületen keresztül is szabályozni tudunk majd. A navigációs menük létrehozására rögtön két módszert is kapunk a WordPress-től.

Létrehozhatjuk a menüt a register_nav_menu( $location, $description ) segítségével egyesével, vagy a register_nav_menus() segítségével akár egy tömböt is megadhatunk paraméterként amiben felsoroljuk a menüket. A jelenlegi példában egyesével végezzük el a regisztrációt, a menünk neve “Első menüm” lesz

Ha még eddig nem tettük meg, hozzuk létre a téma könyvtárában a functions.php fájlt. A fájlba illesszük be a következő kódot:

register_nav_menu( 'first', __('Első menüm') );

A függvény első paramétere egy slug név lesz, ezen keresztül fogjuk tudni majd elérni a későbbikben a menüt, a második paraméter pedig az Adminisztrációs felületen is megjelenő név.

Ha mindent jól csináltunk már látszani fog a Menü opció is a Vezérlőpulton. Mielőtt a megjelenítésbe belefogunk, mindenképpen rendeljünk hozzá egy menüt a regisztrált helyhez, elegendő lesz 2-3 menüpont.

Ezt a Megjelenés > Menük > Menü megjelenési helyek kezelése lapon tehetjük meg a legegyszerűbben.

Menü megjelenítése a témában

Itt az ideje, hogy gondoskodjunk a korábban létrehozott menü helyéknek megjelenítéséről. A példában egy fejléc menüt fogunk létrehozni, amit a header.php-be érdemes helyeznünk.

A korábban létrehozott menüt a wp_nav_menu($args) segítségével jelenítjük meg. A függvény több paramétert is képes fogadni, tömb formájában. A mi esetünkben a ‘theme_location’ paraméterre lesz szükség, ami a menühely azonosítója lesz. A függvény meghívása után a forráskódunkban listaként jelennek majd meg a menüpontok, így azokat formáznunk kell

Hogy a menü megjelenítése szabványos maradjon, tegyük azt a HTML5 által ajánlott <nav></nav> tagok közé azt. A header.php-be így a következő kód fog kerülni:

<nav>
<?php
$args=array(
'theme_location' => first');
wp_nav_menu($args);
?>
</nav>

Ha most megnézzük, az eredményt már látnunk kell a menüpontjainkat, egyelőre még formázatlanul.

Menü formázása

Gyakorlatilag a menü létrehozásának programozási elemein túl vagyunk, azonban a végeredmény még távol van a széptől. Innentől a WordPress specifikus részen túl vagyunk, a megjelenő menüt a stíluslap segítségével fogjuk kicsit használhatóbbá tenni.

Mivel tudjuk azt, vagy ha nem akkor a forráskódból kileshetjük, hogy a menü HTML listaként fog megjelenni, ezért most ezt fogjuk formázni. Valószínűleg az oldalon használunk majd máshol is listát, ezért ne központilag formázzuk az elemeket, hozzunk létre egy osztályt a navigációnkhoz. Az osztály neve legyen “site-nav”.

Így módosul a kódunk:

<nav class="site-nav">

A style.css-t a következő CSS kóddal bővítsük, ez alapvető formázást hajt végre az elemeken, illetve beállítunk a menügombokhoz egy szürke háttérszínt is:

.site-nav ul {
 margin: 0px;
 padding: 0;
 }

.site-nav ul li{
 list-style: none;
 float:left;
 text-decoration: none;
 padding: 10px;
 background-color: #eee;
 }

Hogyan különböztessük meg a menüpontokban az éppen megnyitott oldalt?

Szerencsére a menüpontok elemei a betöltött oldal azonosítóját megjelölik a forráskódban is. Az aktuális oldal kap egy “current_page_item” nevű osztályt, amit a stíluslapon könnyedén formázhatunk:

.site-nav ul li.current_page_item {
 background-color: #bbb;
 }

A fenti kód segítségével az éppen megjelenő oldal háttérszíne sötétebb színt kap.

Ugyan a példánk egy header menü elkészítését tartalmazza, nyugodtan használhatjuk ezt a módszert az oldal más részein is. Figyeljünk oda, hogy a menüink ne legyenek túlzsúfoltak, formázzuk őket egyedileg minden esetben.

3. A WordPress meta részletesebben

A WordPress téma szerkesztése során gyakran van szükség különböző adatokra a megjelenített bejegyzéssel kapcsolatban. Ebben az esetben nem a cím vagy a szöveges tartalom megjelenítésére gondolunk, hiszen erről volt már szó korábban.

A mostani feladat a bejegyzéshez kapcsolódó meta adatok megjelenítése. A meta adatok WordPress esetén olyan a bejegyzésekhez kapcsolódó információt jelent, mint a létrehozás dátuma vagy a létrehozó felhasználó azonosítója.

Létrehozás dátuma

A legalapvetőbb metaadatok egyike a létrehozási dátum. Ezt a WordPress sablonban a the_time() funkció segítségével kérhetjük le.

A függvényben megadhatjuk, illetve meg is kell adnunk, hogy milyen formában szeretnénk a dátumot megjeleníteni. Néhány példa a használatra:

the_time(F, Y) --> Október, 2016
the_time(G:i:s) --> 10:06:01 (A "G" 24 órás, míg a "g" 12 órás osztást jelent)

Az összes dátumformátum megtekinthető itt.

Létrehozó felhasználó

A bejegyzést létrehozó személy felhasználónevét a the_author() segítségével jeleníthetjük meg, a függvény nem vár paramétert. Használata során a publikus felhasználónév kerül megjelenítésre.

A megjelenített felhasználónevet érdemes megjeleníteni hivatkozásként, ami a felhasználó által létrehozott tartalmakat fogja kilistázni. Ehhez két függvényt kell összerakni.

Míg a the_author() függvény a felhasználónevet jeleníti meg, addig a get_the_author_meta() a felhasználó meta adatainak megjelenítésére szolgál. A függvény első paramétereként lekérdezhetjük a hurokban betöltődött tartalom létrehozójának az azonosítóját a következőképpen: get_the_author_meta(“ID”);

A get_author_posts_url() függvény a szerzők tartalmainak listázásához vezető linket generálják le. A függvénynek tudnia kell, hogy melyik felhasználó URL-jére is vagyunk kíváncsiak. Paraméterként tehát megadhatjuk az korábban kinyert ID-t: get_the_author_posts_url(get_the_author_meta(“ID”));

Kategória megjelenítése

A megjelenített bejegyzés kategóriájának megjelenítése fogósabb feladat. A kategória lekérdezésére a get_the_category() függvényt használhatjuk. A függvény egy tömböt fog visszaadni, ami a bejegyzéshez kapcsolódó kategóriák adatait fogja tartalmazni.

Gondoskodnunk kell tehát arról, hogy minden egyes kategóriacímke megjelenjen a felületen, ehhez ajánlott a foreach() ciklus használata a következőképpen:

$categories = get_the_category();

foreach ($categories as $category){
echo $category -> cat_name." | ";
}

Még több metaadat

A cikkben a leggyakrabban használt metaadatokat elemeztük ki. A WordPress azonban ennél jóval több lehetőséget kínál. A metaadatok teljes listáját megtalálod a dokumentációjában.

4. Oldalak egyéni formázása

Egyedi WordPress téma fejlesztése során gyakran felmerülő kérdés az oldalak egyedi formázása. WordPress oldal alatt azokat az általában statikus tartalmakat értjük, ahová a nem bővülő tartalmak kerülnek. Jellemzően Oldal létrehozásával készülnek a Kapcsolat oldalak.

Megjegyzés: WordPress oldalt a “Vezérlőpult / Oldalak / Új” hozzáadásával hozhatunk létre.

A WordPress sablonrendszerében a page.php fájlban formázhatjuk az oldal típusú tartalmakat. Ez a lecke arra a problémára nyújt megoldást, mikor több oldal típusú tartalmunk is van a weboldalon, de – az eredeti példánál maradva – a Kapcsolat oldalunk kinézetét meg szeretnénk változtatni. Erre két viszonylag egyszerű megoldás is van, az elsőt akkor érdemes használni, ha csak apróbb módosításokat akarunk végrehajtani, a másik akár teljes átalakítást is lehetővé tesz.

Apró módosításokhoz

Amikor csak apró változást szeretnénk a Kapcsolat oldalra, elegendő a meglévő sablonba egy kivételt építeni. A WordPress is_page() függvénye lesz a segítségünkre. A függvény egy paramétert vár, ami az oldal id-ja, vagy az URL slug lehet.

A függvény segítségével egyszerűen lekérdezhetjük hogy az aktuális megjelenő lap megegyezik-e azzal az oldallal amin változtatni szeretnénk. A függvény bool típusú eredményt ad vissza, azaz igaz vagy hamis lehet. A legegyszerűbben ezt egy elágazásba ágyazva tudjuk felhasználni.

if (is_page(3)) {

///ide kerülhet a módosítás

}

Mi történik a kód hatására?

A függvény megvizsgálja hogy a 3-as ID-val rendelkező oldal került-e betöltésre. Ha igen, akkor IGAZ értéket ad vissza, vagyis lefut a módosítás.

Hova illesszük be?

A fügvény minden oldallekérdezés során kiértékelődik, tehát nem csak a page.php fájlban fog változást eredményezni. Belerakhatjuk a header.php-be, vagy bármelyik oldal betöltődésekor aktív fájlba.

Honnan fogom megtudni mi az ID?

Az oldal ID-ja a legegyszerűbben úgy deríthető ki, ha azt megnyitjuk szerkesztésre. Ilyenkor ugyanis az URL tartalmaz egy “post=x” paramétert, ahol az x az oldal azonosítója (ID).

Mivel az URL-ek keresőbarát formájában valószínűleg nem jelenik meg az ID, így felmerülhet a kérdés, hogy ilyenkor is felismeri e az oldalt a WordPress. A válasz igen, a lekérdezés az adatbázis adatai alapján dolgozik, azaz mindegy hogy melyik változatot használjuk (ID vagy slug).

Nagyobb módosításhoz

Tegyük fel az a megrendelő kívánsága hogy a weboldal Kapcsolat oldalán más elrendezést alkalmazzunk. A megjelenés és a színek maradnak, csak az oldal felosztása változik. A dolog valószínűleg megoldható a stíluslap variálásával is, de van ennél jóval egyszerűbb megoldás is.

Tehát az oldal megjelenését a page.php fájlban szabályozhatjuk, és azt is tudjuk már hogyan módosíthatunk rajta, de az is nyilvánvaló, hogy túl sok felesleges kódot igényelhet egy oldalszintű átalakítás.

Alkalmazhatjuk a következő módszert a kód áttekinthetősége érdekében:
– Készítsünk egy másolatot a page.php-ből
– Nevezzük át a következő formában: page-3.php
Ennek hatására az 3-as ID-val rendelkező oldal betöltődésekor ez a fájl fogja vezérelni annak működését. A fájl elnevezésekor hasonló a szabály mint az előző példa függvényével, tehát a fájlnév lehet: page-3.php, illetve page-kapcsolat.php is, ahol a kapcsolat egyben az oldal slug neve is.

A fájl tartalmát tekintve ugyanaz mint az eredeti page.php, illetve akár minden oldalunk kaphat különálló page.php fájl.

 

Ha tetszik, mutasd meg másoknak is: