Ako vytvoriť template (tému/theme) pre jednoduchý Drupal web.

16 jún, 2010 - 17:48 poslal petiar

Hoci je redakčný systém Drupal v súčasnosti považovaný za jedno z najlepších (ak nie vôbec najlepšie) riešení pre realizáciu dynamického webu pomocou voľne dostupných nástrojov, v oblasti ponuky vzhľadov (či tém, ak chcete) zásadne pokrivkáva. Nie je to len môj názor – stretol som sa s ním pri mnohých porovnaniach jednotlivých redakčných sytémov, či dokonca pri stretnutiach s klientami (pričom v oboch prípadoch vždy jasne víťazil WordPress). To, prečo to tak je, mi síce ostáva záhadou, pretože že Drupal má v tomto smere veľmi bohaté možnosti, ale v tomto článku to nechcem ani nebudeme riešiť.

Poďme sa radšej pozrieť na to ako pripravíme grafickú tému pokiaľ nechcem použiť žiadnu z voľne dostupných (teda nechceme aby náš web vyzeral ako ďalšie stovky iných). Dá sa to urobiť tak, že nájdeme voľne dostupnú grafickú tému najviac sa podobajúcej výsledku, ktorý chceme dosiahnúť (napríklad počtom a umiestnením regiónov). Ťažisko celej práce je potom na nekonečnom upravovaní príslušných .css a .tpl súborov za významnej nejakého developer nástroja pre váš prehliadač. Táto možnosť mne osobne pripadá ako najzdĺhavejšia a „najšpinavšia“.

Druhou možnosťou je použitie grafickej témy Zen. Táto sama o sebe žiadnu grafiku neobsahuje – je to skôr balík podrobne zdokumentovaných súborov pre vytvorenie novej témy. Ak ste náhodou o nej nevedeli, odporúčam aspoň vyskúšať. Pre jednoduchý template je to však ako ísť s tankom na zajace a ja osobne som sa často cítil ako Alenka v ríši divov.

Tretia možnosť, a tu sa konečne dostávame k niečomu konkrétnemu, je grafickú tému vytvoriť. V tomto prípade pôjdeme úplne opačným smerom – nebudeme upravovať žiadnu existujúcu tému, ale vytvoríme si svoju vlastnú na zelenej lúke a do nej neskôr pridáme Drupal. Skôr, než začneme, znovu si pripomeňme že ide o návod ako vytvoriť grafický vzhľad pre veľmi jednoduchý web – taký, v ktorého prípade by predchádzajúce dve možnosti znamenali množstvo nadbytočného HTML/CSS kódu.

Najprv povedzme Drupalu niečo o našej novej téme. Nech má hlavičku, pod ňou menu a pod ním tradičný trojstĺpcový layout s fixnou šírkou. V adresári sites/default/themes vytvoríme nový podadresár a pomenujeme ho napríklad test_theme. V ňom ako prvý vytvoríme súbor test_theme.info a vložíme doň tieto informácie:

name = Testovacia téma
description = Téma pre účely článku
version = 1.0
core = 6.x
engine = phptemplate

regions[menu] = "Menu"
regions[content] = "Hlavný obsah"
regions[left] = "Vľavo"
regions[right] = "Vpravo"

V prvých piatoch riadkoch sme postupne definovali názov tejto témy (zobrazený v admin rozhraní na stránke so zoznamom vzhľadov), jej popis (tamtiež), verziu, ďalej verziu Drupalu s ktorou je téma kompatibilná a engine, ktorý bude táto téma používať. Štandardný PHPtemplate je fajn.

V ďalších štyroch riadkoch sme definovali regióny, do ktorých budeme umiestňovať jednotlivé časti obsahu. Ak nechcete používať iné časti webu ako left, right, content, header, footer, tak ich nemusíte definovať vôbec – tieto vymenované predpokladá Drupal automaticky (a počnúc Drupalom 7 aj región help).

Čas tejto akcie: 5 minút.

Aby sme mali pekný zoznam tém na stránke ich administrácie, vytvorme z nášho grafického návrhu súbor screenshot.png a nakopírujeme ho do tohto adresára. Dodržte rozmer 150*90 pixelov.

Čas tejto akcie: 1 minúta.

Teraz sa pozrieme na samotné html. Náš čistý návrh bude vyzerať takto nejako:

<!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="sk" lang="sk">
        <head>
                <title>Názov webu</title>
        </head>
        <body>
                <div id="wrapper">
                        <div id="header"></div>
                        <div id="menu">Menu</div>
                        <div id="left">Stĺpec vľavo</div>
                        <div id="content">
                                Obsah
                        </div>
                        <div id="right">Stĺpec vpravo</div>
                </div>
        </body>
</html>

Tento zdrojový kód treba umiestniť do súboru ktorý sa volá page.tpl.php a hovorí Drupalu ako bude vyzerať layout stránky. Nie je ešte finálny – budeme ho upravovať.

Čas tejto akcie: 5 minút.

Analogicky k nemu bude css vyzerať podobne tomuto:

body            {margin:0px;padding:0px;font-family: Arial, "MS Trebuchet", sans-serif;color:#333;}

#wrapper        {width:1024;margin-left:auto;margin-right:auto;}
#header         {height:200px;background-image:url('images/header.jpg');}
#menu           {height:30px;}
#left           {width:212px;float:left;padding:0px;margin:0px;}
#right          {width:212px;float:left;padding:0px;margin:0px;}
#content        {width:600px;float:left;padding:0px;margin:0px;}

Pomenujeme ho style.css a uložíme do adresára k ostatným súborom. CSS súbor s týmto názvom prečíta Drupal automaticky. Ak vám nekontrolovane nabobtná a budete ho chcieť rozdeliť na viac css súborov, budete to Drupalu musieť povedať v súbore .info pomocou kľúča stylesheets. Všimnite si, že obrázok pre hlavičku webu „ťahám“ z adresára images – je to podadresár v adresári našej témy. Toto je, samozrejme, to úplne najnutnejšie css. Vy budete pravdepodobne chcieť iné rozmery jednotlivých častí webu, iný typ písma, pridať farbu pozadia alebo obrázok, atď. V tomto konkrétnom prípade bude napríklad pomocou css prerobiť menu na horizontálne, aby sa nám tam vmestilo.

Čas tejto akcie: 5 minút.

Poďme teraz späť k nášmu súboru HTML. Toto je ten moment, kedy téma prestane byť len statickou HTML stránkou pretože k nej pridáme „motor“ z Drupalu. Robím sa to pomocou premenných, ktoré obsahujú Drupalom dynamicky vygenerovaný obsah. Pozrime sa najprv na hlavičku HTML. V nej budeme určite chcieť zahrnúť naše CSS a neskôr prípadne i javascriptové súbory. Môžme to urobiť tak, že tam príslušné tagy napíšeme „natvrdo“, ale prečo si komplikovať život – nech to Drupal urobí za nás.

Miesto textu v tagu title teda napíšeme <?php print $head_title; ?> a Drupal nám do hlavičky bude automaticky generovať text podľa aktuálne zobrazenej stránky. Pod tento tag môžme vložiť ďalšie tri premenné:

<?php print $head; ?>
<?php print $styles; ?>
<?php print $scripts; ?>

Prvá z nich obsahuje meta tagy, kľúčové slová a podobne, ostatné dve sú celkom zrejmé – jedná sa o odkazy k CSS štýlom a skriptom.

Keď miesto textu Menu pridáme do div#menu podobným spôsobom premennú $menu, tak všetko, čo v administrácii blokov pridáte do regiónu s rovnakým názvom, sa v ňom automaticky objaví. V našom prípade tam pôjdu pravdepodobne primárne alebo sekundárne odkazy – nezabudnite vhodne upraviť CSS, ako som už naznačil vyššie.

Do div#content pôjde teda celkom analogicky premenná $content, ale neukvapujte sa ešte. Nezabudnite na veľmi dôležité premenné $tabs, $help, $messages. Zatiaľčo absencia posledných dvoch by na vás uvalila len isté informačné embargo (obsahujú nápovedu a hlášky o výsledku jednotlivých akcií na webe), chýbajúca premenná $tabs by vás odstrihla od charakteristických Drupalovských záložiek, veľmi užitočných napríklad pre úpravy článkov, či konfiguráciu webu všeobecne. Keďže tieto premenné nie vždy niečo obsahujú, zobrazme ich len ak áno.

<?php if ($tabs): print '<div class="tabs">'.$tabs.'</div>'; endif; ?>
<?php if ($help) { ?><div class="help"><?php print $help ?></div><?php } ?>
<?php if ($messages) { ?><div class="messages"><?php print $messages ?></div><?php } ?>
<?php print $content; ?>

Do div#left, div#right pôjdu teda celkom pochopiteľne premenné $left, $right. Výsledný page.tpl.php bude teda vyzerať takto:

<!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="sk" lang="sk">
<head>
        <title><?php print $head_title; ?></title>
        <?php print $head; ?>
        <?php print $styles; ?>
        <?php print $scripts; ?>
</head>
<body>
        <div id="wrapper">
                <div id="header"></div>
                <div id="menu"><?php print $menu; ?></div>
                <div id="left"><?php print $left; ?></div>
                <div id="content">
                        <?php if ($tabs): print '<div class="tabs">'.$tabs.'</div>'; endif; ?>
                <?php if ($help) { ?><div class="help"><?php print $help ?></div><?php } ?>
                <?php if ($messages) { ?><div class="messages"><?php print $messages ?></div><?php } ?>
                        <?php print $content; ?>
                </div>
                <div id="right"><?php print $right; ?></div>
        </div>
</body>
</html>

Čas tejto akcie: 5 minút.

A tým je vaša téma hotová. Je to, pochopiteľne, veľmi jednoduchá grafická téma, ale vytvorili ste ju úplne sami a za menej ako polhodinku, pričom ste sa nemuseli hrabať v niekoho iného HTML a CSS súboroch ale máte solídny základ pre ďalšie jej úpravy. Pravdepodobne budete pridávať ďalšie regióny – chýba nám napríklad pätička stránky. Neskôr budete chcieť pomocou súborov block.tpl.php, node.tpl.php, comment.tpl.php upraviť vzhľad blokov, článkov či komentárov. To už je na vás a na vašom štúdiu možností Drupalu, ktorú sú, ako som už bol býval naznačil v úvode, veľmi široké.

Na tomto návode som chcel hlavne ukázať že sa dá ísť aj opačným smerom ako upravovať vzhľad pre Drupal. Dá sa totiž, ako ste videli, vkladať Drupal do hotového vzhľadu. Pri jednoduchých stránkach je to podľa mňa tá najrýchlejšia a najčistejšia cesta.

Doporučená literatúra:

Komentáre

27 február, 2011 - 00:12 poslal druppi.

#1

Member since:
22 február 2010

Last activity:
48 týždňov 6 dní

Výborný článok!!!
stručný, jasný, zrozumiteľný a hlavne doporučená literatúra,
kde sa ojasní odkiaľ sa vzali práve takéto premmenné a regiony.
díky.

odpovedať

13 júl, 2010 - 15:20 poslal vladopt.

#2

Member since:
13 júl 2010

Last activity:
1 rok 28 týždňov

mne to tam vyhadzuje všade teraz, ako som nahodil test_theme.info túto chybu:
* warning: Invalid argument supplied for foreach() in /home/blabla/blabla.info/bla/includes/theme.inc on line 485.
* warning: Invalid argument supplied for foreach() in /home/blabla/blabla.info/bla/includes/theme.inc on line 490.

odpovedať

20 august, 2010 - 07:17 poslal jarok (bez overenia).

#3

Mam ten isty problem (Inavlid argument...). Problem sposobuju znaky s diakritikou v subore sablona.info v polozkach regions. Pokial nepouzijem diakritiku, chybova hlaska sa neobjavi.
Pouzita platforma je Windows.
Tusite niekto, co s tym?

odpovedať

20 august, 2010 - 16:46 poslal Havran.

#4

Member since:
4 november 2005

Last activity:
19 hod 55 min

Je ten subor ulozeny ako UTF8? Verzia PHP?

—

ICQ: 1872888
Skype: caradac
WEB: http://www.fem.uniag.sk/havran/

odpovedať

14 júl, 2010 - 22:13 poslal Havran.

#5

Member since:
4 november 2005

Last activity:
19 hod 55 min

Ked chces poeadit vloz sem kod - tazko sa radi bez vesteckej gule...

—

ICQ: 1872888
Skype: caradac
WEB: http://www.fem.uniag.sk/havran/

odpovedať

6 júl, 2010 - 08:16 poslal Stevie (bez overenia).

#6

Ďakujem veľmi pekne. Super návod. Touto časťou implementovania grafickej šablóny na drupal som úspešne prešiel.

Prosím vás, vie ma niekto nasmerovať, kde nájdem návod alebo odporúčania ako spraviť DRUPAL template tak, že úvodná stránka webu bude mať úplne iný layout ako tie ďalšie?

Za skorú reakciu vopred ďakujem.

S.

odpovedať

6 júl, 2010 - 18:28 poslal petiar.

#7

Member since:
22 február 2008

Last activity:
2 týždne 1 deň

Treba vytvoriť súbor s názvom page-front.tpl.php, umiestniť ho do adresára témy a upraviť podľa požiadaviek.

—

http://petiar.sk

odpovedať

3 júl, 2010 - 21:01 poslal jancii (bez overenia).

#8

ja len by som chcel upozornit, ze ked sa ma zobrazit ten nahladovy obrazok screenshot tak musi byt jeho koncovka .png a nie .jpg ako je v navode... pls opravte si to
Jancii