Eddig tehát telepítettünk egy WordPress blogot, majd a kész alapra elkezdtünk tervezgetni. Azért ez a sorrend, mert így jobban láthatóak a lehetőségek, meg nekem ilyen az eszem járása. Mielőtt nekifogunk a post olvasásához, játsszunk kicsit a bloggal, írjunk próbabejegyzéseket, próbakommenteket, -kategóriákat stb. Ez még később is hasznunkra lehet, ha látni akarjuk építés közben, hogyan is fogunk kinézni. Természetesen ezeket később törölhetjük.
Most, ha mindezzel megvagyunk, nézzük, mit tudunk tenni egy ilyen blogmotorral. Ide fog kelleni nekünk az angol nyelvtudás, ugyanis van egy zseniáls sorozat, So you want to create WordPress themes huh? címmel. Ez kell nekünk, ugyanis minden utolsó kis pontosvesszőt elmagyaráz az író, így nulla PHP, HTML és CSS tudással is tudunk létrehozni teljesen saját sablont a 25 (igazából 16, több részre felbontva) lecke során (egyik sem tart fél óránál tovább, de inkább 10-15 percesek…).
Ebben a bejegyzésben most gyorsan végigveszem ezt a 16 pontot. Végigkövetése és megcsinálása nem tart tovább egy könnyed esténél.
- Először az alap szabályokat sajátítjuk el. Mindent taget le kell zárni, úgy bizony, mert akkor kapunk szép, valid, azaz szabványos kódot. Az, hogy soronként plusz 4-5 karaktert írunk le, nagyon-nagyoion sok olvasónk dolgát könnyít meg. A második alapszabály, hogy minden sablon minimum két fájlból áll: index.php és style.css. Ezen kívül még 12 fájlunk lesz, ha mindent akarunk használni, de ez nem probléma, majd szépen lassan kialakul. A Lingo részben megismerkedünk az alapvető blog-szakszókinccsel (5 darab), ezután pedig a WordPress fájl-hierarchiával.
- A második leckében az egyes fájlok konkrét funkciójával ismerkedünk meg.
- A harmadik már mélyvíz, elkezdjük építeni az index.php fájlunkat. Mivel a lecke saját gépen működő szervert feltételez (aki biztosra akar menni, az csinálhatja így, de talán nincs most erre szükség), ezért mi hagyjuk figyelmen kívül az XAMPP-pal foglalkozó részeket, de ez persze gusztus dolga. Kreáljunk egy index.php-t és egy style.css-t, és az elsőbe másoljuk be a postban található index.txt tartalmát, ami a fejlécet tartalmazza. Ezek után ennek a metaadatokat tartalmazó fejlécet vesszük sorra, elemenként, hogy mi mit jelent. Ezek után töltsük a helyére (http://blogomcime.hu/wp-content/themes/), és nézzük meg a kezelőfelületen a Megjelenés > Sablonok fülön, hogy jé, hát ott van.
- Miután megvannak a metaadatok a helyükön vannak, készítsük el a blogunk fejlécét, avagy címsorát.
- Folytatásképpen alakítsuk tovább a fejlécet, linkeljünk, csicsázzunk.
- Hatodik lépésként hozzuk létre a WordPress lelkét, a Loop-ot. Szó szerint hurkot jelent, ez jeleníti meg a postokat. Érdemes azt a fejezetet nagyon-nagyon lelkiismereten végigolvasni, ugyanis ennek alapos ismerete szinte korlátlan lehetőségeket ad majd kezünkbe.
- Ha megvan a Loop, oldjuk meg, hogy tartalom is legyen benne. Ehhez írjuk be a megfelelő kódokat, és formázzuk meg úgy, hogy később szabadon tudjuk kezelni a kinézetét.
- Következőként az egyes bejegyzések metaadatait (dátum, szerző, kategória) is jelenítsük meg.
- Így létrehoztuk a bejegyzések megjelenítését, már csak azt kell megadni, hogy mi történjék, ha ne adj isten olyat keres valaki, ami nincs is a blogunkban, valamint aggassunk minden bejegyzésünkre sorszámozott címkéket, így akár egyéni megjelenést is biztosíthatunk az egyes bejegyzéseknek (pl az első kiemelése stb.).
- Ezek után az egyes bejegyzések és oldalak közti navigációt (előre-hátra, fel-le, jobbra-balra, kinek mi a szíve vágya) oldjuk meg.
- A következő nagy lépés az oldalsáv létrehozása, amiben a tartalmat nem képző, kiegészítő funkciók kaphatnak helyet, illetve a visszakeresést segítő kategóriák listája.
- Emellett érdemes kirakni a statikus lapok listáját is, akár hierachikusan is megjelenítve.
- Már csak az archívum és a linklista hiányzik (ezt errefelé Blogrollnak hívják, de én speciel nem ragaszkodom az elnevezéshez)…
- Kis apróságként még hozzácsapjuk a keresést (alapvető!), valamint a naptárat, ami gyakorlatilag az archívum táblázatos megjelenítése. Saját megunkat pedig azzal segíthetjük meg, ha környezetfüggő admin-menüt is pakolunk bele az oldalsávba (azaz, ha be vagyunk jelentkezve, az Admin-felületre rak ki linket, ha nem, a bejelentkező-oldalhoz).
- Hab a tortánt, hogy az oldalsávba válogathatunk a hatalmas fejlesztőtábor által előállított widgetek (eszközök?) közül. Ehhez kell még egy csöpp kis munka.
- Leértünk a lap aljára: a láblécet is létrehozzuk.
- Ha elértünk idáig, nézzük meg, hogy szabványos-e az, amit csináltunk (azt hiszem, nem lövök le semmit, ha elárulom, hogy ha nem nyúltunk mellé nagyon, akkor szabványos…).
- Ezek után a kész vázat, ami lássuk be, csúnyácska, nem is kicsit, bár van aki így is szereti, gyúrjuk meg. Erre való a CSS (Cascading Style Sheet – lépcsős stíluslap). Ne ijedjünk meg, továbbra is el lesz magyarázva, miért nyomunk le minden egyes gombot. Nem lesz nehéz.
- Az alapvetés után a színek jelölését sajátíthatjuk el (nem ijesztésképpen mondom, de hexadecimális kódban va, azaz 000000-tól ffffff-ig jelöljük a színeket – feketétől fehérig -, de nem ördöngős, ez is el lesz mondva), valamint a linkek formázását.
- Ha már szép színesek vagyunk, terjeszkedjünk, azaz dobáljunk és nyomogassunk dobozokat helyre és méretre.
- A fő részek kialakítása után olyan finomságokkal is foglalkozhatunk, mint a bejegyzések és metaadatainak formázása.
- Az oldalsáv formázása ezek után már – sajnos – gyerekjáték lesz…
- A lábléc sem okozhat különösebb nehézséget. Ugyanebben a lépésben istenül meg az index.php, ugyanis azzal, hogy kiemeljük belőle a különböző modulokat (fejléc, oldalsáv és lábléc), csak a lényeg és a lélek (Loop, emlékszünk?) marad benne.
- Ha kieszedtük ezeket a függelék részeket, formázzuk meg őket.
- Legutoljára pedig a kommenteket is gyúrjuk át, hogy szépek legyenek.
Kész is. Megvan a pofás blog, ráadásul mire eddig eljutunk, már tisztában is vagyunk a WordPress alapvető nyelvtanával. Ugye nem volt annyira nehéz…?
(Bocsánat az elgépelésekért, késő van, és holnap elhúzok kicsit pihire, folytatás utána, vagy vizsgaidőszak végén. Majd kiderül.)
2 hozzászólás a(z) “Pofozgatás” bejegyzéshez
És még mindig nem tanultam meg több Loop-ot egymásba ágyazni… :(
Következőnek csináljunk alternatív feed-eket és mashupoljunk (könyvtáraknál 67765435 linkes Blogroll helyett linkek del.icio.us tagekhez, IM kliens beágyazása, stb.).
Csak hogy belepofázzak már… XD
Lesz olyan is… : ) A sorrend még alakul a fejemben benne.