hosszu kálmán

Rendszeresen megkeresnek azzal a kéréssel, hogy hogyan kell egyedi Drupal sminket készíteni, mert nem akrarnyak egy már elkészített contrib fejlesztést használni.
Én is általában azt szoktam javasolni, hogy inkább készítsük el saját magunk a meglévő psd alapján a sminkünket, mert igaz az esetek legtöbbségében meg lehetne oldani valamely már meglévő fejlesztés css-ének módosításával, de az mégsem az igazi. Egyrészt azért, mert a contrib sminkek több dologra vannak felkészítve mint amire nekünk szükségünk van, másrészt a végeredményben úgyis egy 3000 soros css-t kapunk amiben egy rakás osztály, vagy id több helyen van definiálva. Másrészt ahogy a contrib modulokba se szokás beleirkálni, szerintem a sminkeket se kell piszkálni.

Ha saját sminket készítünk, saját tpl és css fájlokkal akkor ezek a problémák kiküszöbölhetőek, és nem egy ördöngös feladat.

Leszögezném, hogy ez a bejegyzés csak az alapokról szól, nagyon sok egyéb dologra felkészíthetjük a sminkünket, pl: $logo, $site_slogan, $mission, $search_box stb. Az elérhető változókat itt lehet megnézni.

Az első lépés az, hogy a psd alapján végig kell gondolnunk, hogy milyen régiókra lesz szükségünk. Persze könnyen lehet, hogy az alapértelmezett régiók bőven elegendőek, de általában nekem újakat kell létrehoznom. Itt egy fontos megjegyzés az, hogy az alapértelmezett régiók elvesznek ha akár csak egy sajátot is létrehozunk, ha az info fájlba definiálunk régiót, akkor az összeset meg kell adnunk!

Miután ez megvan elkezdhetjük a sminkünk elkészítését, vagyis a fizikai fájlok létrehozását.

A saját sminkeket különítsük el a core sminkektől, ezért hozzuk létre a sites/all/themes könyvtárat és ide helyezzük a contrib, illetve a custom sminkeket.

Hozzuk létre a sminkemneve könyvtárat és abba készítsük a sminkemneve.info fájlt. Fontos megjegyzés, hogy az info fájlokat a rendszer cache-eli, így ha abba módosítunk valamit, akkor be kell menni az admin/build/themes könyvtárba és nyomni egy mentést, ekkor újra menti az info fájl tartalmát.

De hogy is néz ki egy info fájl? Erről egy teljesen részletes leírás található itt. Az alapértelmezett értékek pedig itt szerepelnek (itt láthatjuk pl a default régiókat).

Íme egy info fájl:

name = My theme's name
description = My theme's description.
version = VERSION
core = 6.x
engine = phptemplate
stylesheets[all][] = style.css
stylesheets[all][] = layout.css
scripts[] = scripts.js
regions[header] = Header
regions[left_slidebar] = Left sidebar
regions[left_banner] = Left banner
regions[content_top] = Content top
regions[in_top_of_content] = In top of content
regions[content] = Content
regions[right_slidebar] = Right sidebar
regions[right_banner] = Right Banner
regions[footer_top] = Footer top
regions[footer_bottom] = Footer bottom

Talán csak annyit fűznék még hozzá, hogy a regions tömb kulcsa lesz a page.tpl.php-ban elérhető változó ami az adott régió tartalmát adja vissza html string formában.

Ezután jöhet a page.tpl.php.
Ebben állítjuk össze magát a layout-ot, tehát létrehozzuk a szükséges div-eket a psd implementálásához.

Én így szoktam kezdeni:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
<head>
<?php print $head ?>
<title><?php print $head_title ?></title>
<?php print $styles ?>
<?php print $scripts ?>
</head>
<body class="<?php print $body_classes ?>">

Szerintem elég egyértelmű hogy mit is csinál, csak annyit fűznék hozzá, hogy a $body_classes változó egy csomó információt tartalmaz, pl hogy nyitólapon vagyunk-e vagy, be vagyunk-e jelentkezve vagy hogy mely régiókra lesz szükség. Ez szerintem hasznos lehet ha azt akarjuk hogy a sminkünk máshogy nézzen ki pl ha csak a jobb oldali slidebar létezik, vagy ha mind a kettő, esetleg egyik sem stb.

Ezután kezdjük el kialakítani a szükséges div-eket, ez nyilván a psd-től függ.

Jöhetnek a régiók! Ha nem akarjuk teleszemetelni üres div-ekkel a template-et akkor feltételek közé rakjuk hogy egy adott régiót körülvevő div megjelenjen, pl így:

<?php if ($left_slidebar) : ?>
<div id="left_slidebar"><?php print $left_slidebar ?></div>
<?php endif; ?>

Miután a div-ekkel megvagyunk, készítsük el a tabokat (view, edit stb), a rendszerüzeneteket (pl hibás felhasználónév) írassuk ki magát a content-et - esetleg az oldal címét is beletehetjük a page.tpl.php-ba:

<?php print $title ?>
<?php if ($tabs): print '<div id="tabs-wrapper" class="clear-block">'; endif; ?>
<?php if ($tabs): print '<ul class="tabs primary">'. $tabs .'</ul></div>'; endif; ?>
<?php if ($messages): print $messages; endif; ?>
<?php print $content ?>

Végül egy fontos feladatunk van a page.tpl.php-vel, az pedig a $closure kiíratása:

<?php echo $closure; ?>

Ez azért fontos, mert sok modul ebbe pakol dolgokat, pl a WYSIWYG modul esetében azt érzékeljük, hogy egyszerűen nem jelenik meg az editor ha ez kimaradt a sminkfájlból.

Amint írtam van még egy csomó dolog amiket beletehetünk a sminkünkbe (és ha a közössésgnek készítjük a sminket akkor bele is kell rakni), ezen változók listáját itt lehet megnézni.

A page.tpl.php-n kívül még létre kell hozunk a block.tpl.php-t, a comment.tpl.php-t és a node.tpl.php-t. Ha az alap sminkfájlokat használjuk, akkor tökéletesen működik a sminkünk.
Persze ezeket is egyedileg testre kell szabi, ezeket is felosztjuk a megfelelő div-ekkel hogy olyan kinézetet kapjunk mint a psd-ben.

Van még egy fájl ami általában kell, ez pedig a template.php. Fontos, hogy az ebben definiált fügvények nevét cache-eli a rendszer, tehát ha egy új fügvényt deklarálunk akkor be kell menni az admin/build/themes oldalra és menteni kell.

Posted in Drupal, HTML, PHP, Template

2 Responses to “Egyedi smink készítésének alapjai Drupal 6 alatt”

“Másrészt ahogy a contrib modulokba se szokás beleirkálni, szerintem a sminkeket se kell piszkálni.”

Piszkálás helyett, és gyakran önálló smink helyett is (pl. ha csak pár div/régió hátterét kell lecserélni) inkább készítsünk alsminket valamelyik jó minőségű d.org-on elérhető sminkhez.

“Itt egy fontos megjegyzés az, hogy az alapértelmezett régiók elvesznek ha akár csak egy sajátot is létrehozunk, ha az info fájlba definiálunk régiót, akkor az összeset meg kell adnunk!”

Viszont ajánlott megtartani a regions[left], regions[right] elnevezéseket, ugyanis a left és right nevű régiókat a Drupal 404-es oldalakon nem írja ki. Ha helyette sidebar_left, sidebar_right elnevezéseket használunk, minden egyes 404-es oldalon megjelennek az ide pakolt blokkok. Mivel minden webhely nagyon sok 404-et kénytelen kiszolgálni, ez jelentős teljesítmény-romlást okozhat. (Ha viszont valamiért éppen azt szeretnénk, hogy bizonyos blokkok a 404-es oldalon is megjelenjenek, akkor tegyük őket egy saját elnevezésű régióba.)

“print $scripts”

Ha nem használunk WYSIWYG szövegszerkesztőt a webhelyen, akkor ezt a webhely “gyorsítása” érdekében ajánlott a láblécbe tenni. Ha használunk, akkor is nézzük meg, próba cseresznye, hátha elindul a footerből is.

Az oldal címét szerintem mindenképpen érdemes betenni a page.tpl.php-be, még ha valamilyen ok miatt a tartalmi oldalakon nem is akarjuk megjeleníteni. Viszont a rengeteg adminisztrációs, ilyen-olyan feltöltő oldalon nehéz kiigazodni, ha nem látjuk a címet. Inkább template.php-ben érdemes unset()-elni, ha valahol nem kell.

[Reply]