Annak ellenére, hogy WordPress végtelenül felhasználóbarát, ha egyedi sablont szeretnél, vagy csak hozzányúlni egy már meglévőhöz, ahhoz kell némi fejlesztői tapasztalat. De nem kell megijedni…
Egy jó WordPress sablon megírásának előfeltétele, hogy tudj statikus HTML-CSS weboldalt létrehozni hibamentesen. Ezen háttér tudás nélkül a sablon nem olyan lesz amilyen akarod, hanem amilyenre sikerül.
Azért van annyi rendezetlen, széteső weboldal, mert sokan megvélő sablonokat próbálnak meg “átírni”, de gányolás helyett van egy jobb módszer.
Hogyan kezdj hozzá?
Legyen meg a weboldal felépítése és a grafikai elmei egy validált, szabványos, statikus HTML oldaladban, jól elkülönített CSS-el. HTML5 szabvánnyal dolgozz!
Nem árt, ha a WordPressben már van egy kis szöveges tartalom, hogy jobban látható legyen a sablonunk felépítése.
A következő lépésben a statikus sablont a WordPress számára alakítjuk át.
Érdemes elolvasni a dokumentációt, hogy a WP sablonjának mi a logikája, felépítése. Mik azok a minimálisan szükséges file-ok, amik a nélkülözhetetlenek a futáshoz.
Az alábbi egy általam kiegészített lista, amely a legkevesebb file-t tartalmazza, ahhoz, hogy egy nagyon egyszerű WP sablont készíts.
WordPress sablon file-ok
Készíts egy mappát a sablon nevével FTP-n keresztül a weboldalad.hu/wp-content/themes/ mappába és készítsd el az alábbi file-okat:
header.php – fejléc, logó, navigáció, meta elemek, mérőkódok stb…
index.php – tartalmi kinézet (lehet üres, ha van page.php és single.php)
sidebar.php – oldalsáv, “widgetek”, egyéb másodlagos infó, vagy CTA
footer.php – lábléc
style.css – sablonhoz tartozó stílus elemek
functions.php – egyedi funkciók hozzáadása, módosítása
page.php – oldal tartalomtípushoz tartozó kinézet
category.php – kategória tartalomtípushoz tartozó kinézet
single.php – bejegyzés tartalomtípushoz tartozó kinézet
images/ – Itt lesznek a design kép elemei, háttérképek, logók
A fenti listából jól látszik, hogy az egyes tartalomtípusokhoz (Oldal, Bejegyzés, Kategória, Címke stb) külön kinézet tartozik. További PHP file-ok hozzáadásával készíthetünk teljesen egyedi megjelenést egy-egy oldalnak, vagy kategóriáknak (Pl.: single-szolgaltatasok.php, category-szolgaltasok.php).
A sablonok HTML nyelven íródnak, melyben a dinamikusan változó elemeket WordPress függvényekkel tudjuk megadni PHP-ban.
<?php wp_head(); ?> – fontos! e nélkül nem működnek a bővítmények
<?php the_title(); ?> – az oldal vagy bejegyzés címe
<?php the_excerpt(); ?> – kivonat, vagy rövid intró szöveg
<?php the_content(); ?> – teljes tartalom
<?php the_thumbnail(); ?> – az oldalhoz tartozó bélyegkép
<?php the_date(); ?> – létrehozás dátuma
<?php the_author(); ?> – szerző
<?php the_category(); ?> – a bejegyzés kategóriája
<?php the_sidebar(); ?> – oldalsáv
<?php wp_footer(); ?> – fontos! e nélkül nem működnek a bővítmények
Minden függvények további paraméteri vannak, amikkel jobban testre szabható. Pl: <?php the_date(‘Y.m.d’, ‘<h2>’, ‘</h2>’); ?> Ezekről bővebben szintén a dokumentációban lehet olvasni.
Az alábbi kódrészletben, egy egyszerű WordPress sablon felépítését látjátok
Ha valamilyen frameworkot használsz (Pl.: Bootstrap), akkor értelem szerűen az adott keretrendszer előre meghatározott osztályait kell használnod a sablonban.
Programozás
Pár utasítást ismerni kell (IF, FOR, DO, WHILE…) ahhoz, hogy a sablonod 100%-ban illeszkedjen a már megtervezett designra és ne legyen teli innen-onnan átmásolt töltelék kódokkal. Akkor végeztél jó munkát, ha a sablonod minden file-jának minden soráról tudod, hogy micsoda, és miért kell oda.
Jelen esetben PHP-t használunk, de a programozás kepésségét nem a nyelv szintaktikájának ismerete jelenti. Éppen olyan mintha angol tanuláskor bemagolnád a kész szöveget, de nem tudnád, hogy a szavak külön-külön mit jelentenek. Ha megérted a logikát, a szintaktikát ki lehet guglizni.
Nem kell nagyon bonyolult dolgokra gondolni, egy egyszerű IF elágazás, aminek a feltétele, hogy a kezdőlapon vagyunk vagy sem, mindössze ennyi:
<?php if(is_front_page()) { ?>
<div class="home">Ez itt a kezdőlap</div>
<?php } else { ?>
<div class="inner">Ez egy belő oldal</div>
<?php } ?>
Bővítményt csak végső esetben használj!
Nagyon rá vagyunk szokva az indokolatlan bővítményhasználatra. Olyan bővítmény, ami pontosan azt tudja és csak azt tudja, amit szeretnél nem lesz, mivel két egyforma cég és két egyforma oldal sem létezik. A gond ott van, hogy már a legegyszerűbb logikai feltételek megvalósítására is plugint akarunk használni.
“Milyen bővítmény kell, ahhoz, hogy két oldalsáv oszlop legyen?” Hát röviden semmilyen. Bele kell írnod a sablonodba kézzel. Varázsolni egyik plugin sem tud, nem ismeri a te weboldalad felépítését.
Néhány egyszerűbb PHP kóddal kiválthatod a felesleges és olykor nagyon sok erőforrást zabáló pluginokat.
Validálás
Ellenőrizd az elkészült sablon szabványosságát. A statikus HTML feldarabolása közben fokozottan figyelni kell a lezáró tag-ekre. Használj olyan kódszerkesztő szoftvert, ami színezi a kódokat és automatikusan bezárja a tageket.
Csináltam egy egyszerű példa sablont, amit kipróbálhatsz. Másold fel a weboldalad.hu/wp-content/themes/ mappájába, majd kapcsold be az admin felületen.
Sok grafikus hajlamos azt gondolni, hogy a weboldal egy online változata a nyomtatott szórólapnak. “Akkor 300Dpi-ben jó lesz a webdesign?” Őöhhh … Mi van :D? Korábban már írtam arról, hogy jelentős különbségek vannak a nyomdába és a képernyőre szánt grafikai tervezés között, most a sitebuild oldalról szedtem össze, hogy mik azok fontosabb szempontok, amire érdemes…
A HTML5 banner hirdetés az online marketing egyik eredményesebb formája. Sok cég marketingstratégiájában kiemelt helyen szerepelnek az Adwords Hirdetések, mert egy megfizethető, jól mérhető és hatékony eszköz például márkaismertség növelésére, vagy egy új termék bevezetésére, esetleg szezonális kampányok promózására. A hirdetés lényege az átkattintás, hiszen egy landing oldalra szeretnénk csalogatni az érdeklődőket, ahol megtekinthetik az…
A CMS kipróbálását én Joomlával kezdtem, még az 1.5-ös verzióra gyártottam először egyedi sablont. A Joomla egy elég összetett – inkább nagyobb portálokhoz való – CMS rendszer. Simán meghajt például egy önkormányzati honlapot, egy nagyobb webáruházat, vagy egy hírportált is. Nagyobb tartalommennyiségez ideális. Saját tapasztalatom szerint kicsit kötöttebb a testreszabása mint a WP-nek. A sablont…
Eddig pályafutásom alatt jó pár weboldal fejlesztésében vettem már részt. Leginkább CMS projektekben, de 5-6 alkalommal terveztem egyedi rendszerekhez is webdesignt, írtam sitebuildet. Amikor azt kérdezik tőlem, hogy melyik a jobb, a CMS, vagy az egyedi fejlesztés, mindig azt válaszolom, hogy attól függ mire akarod használni, mi a célod, kik a célcsoportod. Mielőtt döntenél érdemes…
DOLGOZZUNK EGYÜTT?
Jelenleg új együttműködést sajnos nem tudok vállalni, köszönöm megértésed!