Site icon WordPress Magyarország

Hogyan épül fel egy WordPress-alapú, kezdő honlap?

WordPress sablon hierarchiaHa valaki most azt várja, hogy a php = mz/x köbüki a gyökön = parciális deriváltja a CSS lép H5-re, és huszár veri G4 sakk és HTML, akkor azt meg kell nyugtatnom, hogy én sem értem az előző eszmefuttatásomat, tehát, a következőkben nem szándékozom a WordPress kódok boncolásába bocsájtkozni. 🙂

A következőkben abból indulok ki, amiből egy normális alaphelyzetben el kell indulni: adott egy árva felhasználó, akinek lett egy WordPress alapú honlapja, vannak világmegváltó (vagy nem világmegváltó) gondolatai, és szeretni ezeket az internet poros sztrádáira hinteni, amelyhez kapódott egy valamilyen WordPress alapokon működő honlapja.

Soha nem volt e hármasnak egymással mélyen szántó kapcsolata, akár azt is mondhatnónk, hogy az egyén, a WordPress-es honlap és az internet, hármójuk konstellációjában csak dédelgetett álom volt. De most itt az ideje annak, hogy kivirágozzék és el ne múljék soha ez a mélyen lappangó szerelem!

Mit is kell tudnunk egy WordPress-alapú honlapról ahhoz, hogy üzemeltetni tudjuk? Szinte semmit. Nagyjából a felhasználói nevünket, a jelszavunkat, és a nyomtatott magyar abc-t. 🙂

Aprajából, ha nem akarunk mi mosogatni állandóan a konyhában, nem árt, ha ennél kicsit alaposabban megismerkedünk a részletekkel is, de – mint minden jó dolgot – ezt sem kell feltétlenül túlzásba vinni.

A bevezetőből talán már az is kiderül, hogy ez az írás is a kezdők kedvére kíván tenni. A haladóknak pedig azért ajánlom figyelmükbe, hogy tudják azt, hogy mekkorát kell hajolni ahhoz, hogy valaki megértse a WordPress-szerelem lényegét; olyan ez, mintha néhai ifjú magához beszélne az ember, amikor még a PHP-csutora helyett a cuclisüveget szívogattuk…

Úgy beszéltem meg magammal, hogy az a legjobbnak tűnő dolog, ha előveszek egy aránylag egyszerű honlapot, amin a legfontosabb dolgokat bemutathatom.

1. Amikor ránézünk egy WordPress alapú honlapra, akkor első ránézésre nem látunk semmi különösebbet, majd a második ránézésre sem. A WordPress-honlap kívülről nézve nagyon hasonlít több konkurens CMS (tartalomkezelő) rendszerrel készített honlaphoz.

Amint azt tudjuk, a lényeg belül van… 🙂

 

 

2. Azon kívül, hogy a kép nagyon hosszú, és össze van jelölve mindenféle színű négyzetekkel, semmi különös látnivaló nincs a tartalmon kívül, igaz?

Az előző képen a hamarosan elkészülő Syrius Kutya Sportcentrum Egyesület Pécs honlapjának képernyőmentése (screenshot) látható. A honlapot a WordPress jelenlegi legfrissebb, 3.3.1 verziószámú motorja hajtja meg, a felhasznált sablon (theme) a wplook BlogoLifePRO 1.0.2-es verziója, amelyhez a fordítást én követtem el (a free verzióét is), és hamarosan a honlapon letölthetővé teszem.

Az előző oldalon látható képen a jellemző, fő területek különböző színű négyzetekkel kerültek megjelölésre:

a.) a legfelső (pirossal jelölt) terület a honlap (a sablon) fejrésze, amit az angol nevéből következően headernek (ejtsd: hidör) is neveznek.

Nagyon találó elnevezés, mert valóban ez az egész honlap teteje, a feje.

b.) ha valaminek van teteje, feje, akkor kell, hogy legyen alja, azaz lába is; igen, a legalsó (kékkel jelölt) részt lábrésznek, angolul footernek (ejtsd: fútör) nevezzük.

c.) a fejrészt és a lábrészt közrefogó terület (nincs színnel jelölve) megjelenését hirtelen nem is tudom mire fordítani, ezért meghagyjuk neki a terminus technikusban használt the loop (ejtsd: tzö lúp) kifejezést. Annyit érdemes tudni róla, hogy honlapunk fő területén megjelenítendő tartalomért, illetve magáért a megjelenítésért (nem a kinézetért) felelős a loop. Na, mégis eszembe jutott: a Fő oldalról beszélünk. 🙂

d.) ugyancsak nincs színnel megjelölve, de a fejrész és lábrész közötti részen, a loop területétől jobbra, a honlap oldalsó részét oldalsávnak, angolul sidebarnak (ejtsd: szájdbár) nevezzük. Ennek a sablonnak történetesen egy oldalsávja van, és éppen jobb oldalon helyezkedik el, de lehet belőle több is, bármelyik oldalon elhelyezkedhet, sőt vannak olyan sablonok (jellemzően a magazin stílusú sablonok), amelyeknél más helyen is elhelyezkedhetnek az oldalsávok.

Az oldalsávon különféle fix és változó megjelenéseket helyezünk el. Fix elemek azok, amelyeket a szerző beépített (természetesen, kis rutinnal gond nélkül kiemelhetőek, ha nincs rá szükségünk), a változó elemek pedig azok, amelyeket mi húzunk rá, hogy az elképzeléseinknek megfelelő funkciókkal jelenítsünk meg tartalmakat.

(Hívják ezt még widget-területnek (widget, ejtsd: widzsit) is néha, mert az adminisztrációs felületen az előbb említett funkciókat tartalmazó widgeteket húzunk az oldalsávra. [A szó eredetileg kb. annyit tesz, hogy szerkentyű. Nehéz pontos fogalommeghatározást adni rá, de nagyjából annyit kell tudnunk róla, hogy szinte önálló alkalmazásként jelenik meg a honlapunkon, az általunk megadott helyen tulajdonképpen egy valamilyen funkciónak a kódrészlete.])

A következő két területet arról lehet a legjobban felismerni, hogy a képen egyáltalán nem láthatóak. 🙂 Majd azonban, amikor eljön az idő, akkor – természetesen lesz róla kép is.

e.) Amikor a képernyőn látható, lila négyzettel jelölt, bejegyzésre (post, etsd: poszt) kattintunk, akkor lép működésbe a single.php (ejtsd: szingl), amely egy bejegyzés, az adott bejegyzés megjelenítéséért felelős. Ezt a single.php-t a WordPressben szokás bejegyzésnek, bejegyzés oldalnak is nevezni, hiszen a bejegyzést jeleníti meg egy oldalon.

Itt jegyzem meg, mert most értünk odáig, hogy eszembe jusson: az angol site és page kifejezést egyaránt oldalnak szokás fordítani, és az angolból ugyan kiderül, hogy miről lehet szó, de a magyarban, sajnos, magáról az oldal szóról nem derül ki, ezért jobb, ha tudatosítjuk magunkban:

Ha ezeket az „oldal-fogalmakat” rendbe tesszük a fejünkbe, akkor sokkal könnyebben átláthatjuk az egész rendszert. [Ugyanezeknek az elveknek a mentén gondolkodva az oldalsáv inkább a honlap oldalát jelenti, pedig – amint azt látni fogjuk – az oldalsáv elemei megjelennek (megjelenhetnek) a honlap, a wp-oldal és a bejegyzés oldal megnyitásakor is.]

3. A fejrész (header)

A képen látható, piros vonallal határolt terület egésze a fejrész (mondhatnánk akár fejlécnek is, hiszen olyan ez, mint egy céges papír fejléce). Gyakorlatilag a látogató számára elérhető részek böngészésekor minden elem tetején ott „díszeleg”, hogy a látogató véletlenül se felejtse el, hogy melyik honlapon is jár.

Ennek az elvnek megfelelően elhelyezzük a céglogót, cég jelmondatot (bal oldali, zölddel jelölt rész), hirdetéseket, vagy éppen küldetésünket is itt célszerű ismertetni (jobb oldali, zöld színnel jelölt rész). Nagyon jellemző, hogy itt látványos, szabványos méretű hirdetéseket helyeznek el, abból a megfontolásból, hogy a honlap látogatók ezt a felületet látják a legtöbbször. Ha elégszer akarják megtekinteni a honlapunkat, akkor elégszer mutathatjuk meg a hirdetéseket, és ezeknek a hirdetéseknek az elhelyezéséért annál többet fizetnek, minél többen látják.

A sárga színnel körülkerített területet menü sávnak, vagy navigációs sávnak nevezzük. Ebben a sávban valamilyen módon, valamilyen rendszer és/vagy elképzelés szerint felsoroljuk, hogy a honlap látogatóit melyik területekre szeretnénk kiemelten irányítani. A látogató jön, ránéz a menüpontokra, azt mondja, hogy a „Kutyaiskola” érdekel, rákattint, és ott találja magát, ahova a kutyaiskoláról szóló tartalmat előre összegyűjtöttük neki. [Ugye, látszik is, hogy milyen nagy a jelentősége a logikus felépítésű menü sávnak? Mit keresnénk mi, mit szeretnénk, ha azonnal az orrunk előtt lenne, ha mi látogatnánk a honlapra? Ha ez utóbbi kérdésre jól felelünk, akkor már készen is van a menüsáv szerkezete.]

A menüsáv szerkezet jellemzően a többnyire statikus tartalmakkal bíró wp-oldalakra mutató hivatkozásokból (linkek) áll, de – természetesen – más linkek is helyet kaphatnak itt (pl. bejegyzés kategóriák, külső oldalak, stb.), ahogyan arról később még említés történik.

 A képen türkizzöld színnel jelölt terület szintén a fejrészhez tartozik. Lehetne itt éppen második menüsor, vagy reklámsor, akármi is, itt egy látványelemet láthatunk. A wplook azt a megoldást választotta, hogy ide képeket lehet elhelyezni, és minden menüpontra kattintással egy, a korábban feltöltött képhalmaz egyik képe jelenik meg. Mondhatjuk úg is, hogy ez a fejrész befejező, lábrésze.

 4. A lábrész (footer)

A lábrész az a terület, ahova a honlap látogatója – szemben a fejrésszel – a legutolsó alkalommal érkezik. A honlap felületének záró részlete, mintegy jelezve: itt a vége, fuss el véle.

Ennek a szerepének megfelelően ezen a részen szokás elhelyezni a jogi megjegyzéseket (copyright, adatvédelem, jogi nyilatkozat, impresszum, sablon készítője, fordítója, stb.)

Ezek a „megjegyzések”, a menüsávhoz hasonlatosak annyiban, hogy vagy közvetlen (esetleg kattintható) információkat nyújtanak a látogatóknak, vagy szintén statikus tartalommal bíró wp-oldalainkra mutatnak.

Ezek fontos információk abból a szempontból, hogy tudja meg a látogató, hogy mégis ki a honlap gazdája, milyen használati szabályok vonatkoznak rá, de nem dölünk a kardunkba, ha nem olvassák el, azaz, nem innen várjuk a látogatók siserehadát.

A lábrész tartalmához még egy apróságnak tűnő, de a WordPress felhasználói számára megjegyzés: gyakran kérdezik a WordPress Magyarország Fórumán, hogy kötelező-e a WordPress-re történő hivatkozás feltüntetése bárhol a honlapon, vagy ki szabad-e törölni, el szabad-e távolítani? (Példánkban éppen a lábrészben láthatjuk a „Köszönjük WordPress!” feliratot, ahol a WordPress egy kattintható hivatkozás.)

Jogilag a válasz: nem, egyáltalán nem tilos dolog a hivatkozást eltávolítani, egyáltalán nem kötelező sehol feltüntetni, hogy a honlapunk a WordPress tartalomkezelő rendszer alatt üzemel. A WordPress logó és név használata jogilag szigorúan korlátozott, de az a megjelenítésére, üzleti használatára vonatkozó védjegy oltalom, nem pedig feltüntetési kötelezettség.

Ugyanakkor fontosnak tartom elmondani, hogy erkölcsileg igenis kötelességünk egy hivatkozás erejéig megköszönni a fejlesztőknek, fordítóknak, az egész WordPress Közösségnek azt a sok-sok tízezer munkaórát, amit ingyenesen, szabad idejüket feláldozva tettek, tesznek ezért a csodálatos, kezesbárányként működő rendszerért.

 

Foltatás következik… 🙂

Exit mobile version