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

  • Posted on: 16 June 2010
  • By: 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.jpg 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:

Názov webu

Menu
Stĺpec vľavo

Obsah

Stĺpec vpravo

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 a $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 ''.$tabs.''; endif; ?>
<?php if ($help) { ?><?php print $help ?><?php } ?>
<?php if ($messages) { ?><?php print $messages ?><?php } ?>
<?php print $content; ?>

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

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

<?php print $menu; ?>
<?php print $left; ?>

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

<?php print $right; ?>

Č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:

  1. Štruktúra theme.info súboru
  2. Premenné dostupné pre súbor page.tpl.php

Príklad tohto postupu môžte vidieť na veľmi jednoduchej stránke zmartt.sk.

Pridať nový komentár