A következő leírásomban ki fogok térni az alapokra, mit szükséges tudni ha valaki Drupal témaépítésre szánná magát. Továbbá hasznos tippeket adok milyen irányban érdemes elindulni és milyen eszközöket használjunk munkánk során.
Alapok alapjai
Természetesen ha már Drupal témát szeretnénk létrehozni, akkor feltételezem rendelkezünk minimum alapfokú HTML/CSS ismeretekkel, mert ezekre nagyon is szükségünk lesz a továbbiakban. Természetesen a Drupal rendszerét is ismernünk kell, hogy tudjuk pontosan mit is csinálunk. Előnynek számít továbbá ha már dolgoztunk a múltban template rendszerekkel mint pl. a Smarty, mert akkor hamarabb meg tudjuk érteni a logikáját a témáknak.
A Drupal a PHPTemplate nevű engine-t használja, ami tpl.php fájlokban tárolja a megjelenést legeneráló forráskódokat. Szabadsága abban áll, hogy egyes oldalakhoz, tartalomtípusokhoz és nézetekhez egyéni megjelenést tudunk társítani.
Nézzünk bele
Nézzünk bele egy már kész témának a mappájába és tekintsünk végig a benne található fájlokon. Általánosan egy téma a következő fájlokból áll:
-
éntémám.info- A témánk alapvető információit tartalmazza, mint pl. név, régiók, css és js fájlok elérési útvonala. -
éntémám.css- A témánk CSS formázását tartalmazza. -
screenshot.png- A megjelenés képernyőn a témánk előnézeti képét tartalmazza. -
node.tpl.php- Egy tartalom megjelenését formázza. -
page.tpl.php- Az oldalunk megjelenését formázza. -
html.tpl.php- Az egész oldal megjelenését formázza. -
comment.tpl.php- A hozzászólásokat formázza.
Alapvetően azt kell megjegyeznünk, hogy a [ html > page > node ] logikát ne felejtsük el. Ezeken belül pedig szintén tetszés szerint le tudjuk bontani formázásunk.
Régiók
A témánk alapvető hálószerkezete régiókból áll, ahol tartalmainkat megjeleníthetjük. Itt létfontosságú, hogy megértsük hogy működnek a blokkok, hiszen általában azokat fogjuk ezekben a régiókban szerepeltetni.
Minden témánál van lehetőségünk megjeleníteni azok régióit, tehát nézzük meg a telepített témáinknál milyen lehetőségeink vannak. Ezeket a régiókat végül is az őket körülzáró formázott divek határozzák meg. (nem használunk táblázatokat oldalszerkezet létrehozására, 2012 van FYI)
Bázis témák
Nyugodtan használjunk bázistémákat saját témáink megalkotásához. Ezek olyan Drupal témák amik úgy készültek, hogy saját témáink alapját alkossák. Nagyban megkönnyíthetik a munkánkat, mert sok CSS formázási opció előre van konfigurálva, és régióikat is tetszés szerint testre szabhatjuk.
Ilyen téma például a mi kedvencünk a ZEN. De igen népszerű a Fusion és az Omega is.
Adaptive, responsive
Ha foglalkozunk már egy ideje a weboldalakkal biztosan hallottunk már ezekről a kifejezésekről. A lényeg, a sokfelbontású többmegjelenítős kompatibilitás. 2012-ben már nem szokás külön mobil verziót készíteni a weboldalnak, hanem egy olyan rugalmas megjelenést kell létrehozni, amely alkalmazkodik képernyőnk felbontásához. Szerencsére már elég sok template rendszer és dokumentáció található ebben a témában, tehát google a barátunk keresgélésünkben.
Viszont ha az előbb említett bázistémák között böngészünk ott is találhatunk responsive megoldásokat weboldalunknak.
HTML-ből Drupal témát
Ha már van egy témánk amit Drupal alá szeretnénk átdolgozni, akkor a következő lépéseket kell végigcsinálnunk, ha biztosra akarunk menni.
- Válasszunk egy bázistémát, és az alatt valósítsuk meg elképzelésünk. Csak akkor javasolt a nulláról indulni, ha van már tapasztalatunk témaépítésben és ha a forrástéma komplett responsive viselkedésrendszerrel és saját grid vagy más HTML/CSS template-el rendelkezik. Ugyanis ezek nagyban nehezíthetik a dolgunk ha bázistémát használunk.
- Tanulmányozzuk és rajzoljuk le témánk régióit és alakítsuk ezek szerint oldalainkat. Ha kell akár papírra is vázoljuk fel elképzelésinket, hogy tisztább képet kapjuk oldalunkról.
- Építsük be a kívánt modulokat terveinkbe mint pl. a sliderek. És gondoljunk a létrehozandó nézetekre is. (Views a legjobb barátunk)
Tippek
- Mindig gondoljunk a kompatibilitásra és ezek szerint járjunk el a CSS-ben és a HTML kódunkban.
- A CSS és a JS fájljainkat mindig az info fájlon keresztül hívjuk meg, kivéve ahol az oldal ezt máshogy nem kívánja.
- Ne felejtsük el, hogy a tpl.php fájlok a megjelenésért felelős template-ek, ezért ne használjunk bennük nehéz szerver oldali kódokat.
- Mindig olvassuk el a dokumentációt, vagy keresünk rá a lehetőségeinkre. A Drupal nagyon széles és segítőkész fejlesztői közösséggel rendelkezik, használjuk ki ezt ha zsákutcába jutnánk.
- Az interneten több videót is találhattok a témaépítésről, érdemes belőlük okulni mielőtt ti is belekezdenétek hasonlóba.
- Több modul megkönnyítheti a témaépítést, olvass utána ezeknek is.
