Drupal – tvorba vlastního vzhledu

Osobitý vzhled je důležitý pro každý web, proto se tentokrát podíváme na skinovací možnosti Drupalu. Představen bude jak velmi snadný způsob kompletní změny vzhledu, tak některá pokročilá témata umožňující dokonalou kontrolu nad generovaným výstupem.

Když máte jen 5 minut…

Pokud vzhled potřebujete změnit snadno a rychle, můžete sáhnout po řadě předem připravených témat, která najdete na stránce Drupal Themes. Některé skiny jsou k vidění „živě“ na stránce Drupal Theme Garden, inspirované projektem CSS Zen Garden (nutno dodat, že bohužel pouze nápadem a nikoli designérskou kvalitou).

Drupal Theme Garden – skiny v akci (plná velikost, cca 125 kB)

Instalace vybraného skinu je snadná – balíček rozbalte a celou složku nahrajte do adresáře themes své instalace Drupalu. Na stránce admin/themes téma povolte a nastavte ho jako výchozí. Co všechno se má návštěvníkovi na monitoru objevit, stanovíte v obecné konfiguraci vzhledů (admin/themes/settings) nebo v konfiguraci konkrétního tématu (admin/themes/settings/název_tématu).

Tip: Pokud sháníte vzhled pro blog, dívejte se primárně po dvousloupcových layoutech. Obecně by neměl být problém na blogu používat i „portálový“ skin, ale někteří autoři počítali pouze se třemi sloupci, což může na blogu vést k určitým zobrazovacím chybám.

Úvod do šablonovacího systému Drupalu

Pokud myslíte úpravy vzhledu vážně, bude se vám hodit lehký úvod do mechanismu, kterým Drupal generuje výstup. Když požádáte o stránku http://www.example.com/nejaka-cesta/, spustí se proces, který obsahuje řadu kroků, například určení konkrétního zobrazovaného nódu, ověření práv aktuálního uživatele, načtení dat z databáze a podobně. V průběhu tohoto procesu Drupal naráží na příkazy zapsané v jazyku PHP, které ho instruují ke generování výstupu, jak ukazuje následující příklad.

Řekněme, že stránka v určité fázi svého zpracování požaduje vygenerování drobečkové navigace. Naivní implementace by používala něco ve stylu následujícího kódu:

$breadcrumbs = array(
  ‚<a href=“/“>Domů</a>‘,
  ‚<a href=“/produkty“>Produkty</a>‘
); // v reálu by se pole plnilo nějak sofistikovaněji
echo ‚<div class=“breadcrumbs“>‘;
for ($i = 0; $i < count($breadcrumbs); $i++) {
  if ($i > 0) {
    echo ‚ > ‚;
  }
  echo $breadcrumbs[$i];
}
echo ‚</div>‘;

Tento přístup je však málo pružný, protože by bylo obtížné generovat drobečkovou navigaci z více různých míst Drupalu a navíc není jasné, jak by mohlo téma vzhledu generovaný výstup ovlivnit. Drupal proto používá systém takzvaných skinovacích funkcí (themeable functions). V našem příkladu zavolá komponenta, která stojí o drobečkovou navigaci, funkci theme('breadcrumb', $breadcrumbs), ta interně přesměruje volání na funkci theme_breadcrumb($breadcrumbs) a zde dojde ve výchozím stavu k vygenerování následujícího kódu:

<div class=“breadcrumbs“>
  <a href=“/“>Domů</a> » <a href=“/produkty“>Produkty</a>
</div>

Téma vzhledu (skin) je zjednodušeně řečeno sada souborů, které předefinovávají funkce theme_něco, ať už přímo nebo pomocí šablonovacích systémů, a dodávají další elementy vzhledu, jako například obrázky, CSS soubory a podobně. Skin může být definován buď čistě v PHP nebo pomocí jednoho z několika šablonovacích systémů, jak bude uvedeno níže.

Když Drupal v průběhu zpracovávání stránky narazí na příkaz generovat zdrojový kód stránky, tedy na příkaz theme(něco, ...), postupuje následovně:

• Pokud není používán šablonovací systém, podívá se do složky skinu a pokusí se najít předefinování funkce theme_něco().
• Pokud je používán šablonovací systém, Drupal ho požádá, aby dodal výsledný kód stránky. Šablonovací systém může projít uživatelsky definované soubory nebo se v případě neúspěchu podívat do vlastních výchozích implementací, má-li nějaké – to vše záleží čistě na něm.
• Pokud šablonovací systém žádný výstup nevrátí, Drupal použije výchozí implementaci funkce theme_něco(), která je obvykle uložena v souboru includes/theme.inc nebo ji dodává příslušný modul (všimněte si, že pomocí funkcí theme_něco() lze snadno skinovat také výstup generovaný moduly třetích stran, nikoli jen jádra Drupalu).

Vraťme se nyní k příkladu drobečkové navigace. Pokud chci změnit výchozí oddělovač „»“ například na „>“, základní postup je následující:

1. Vytvořím složku nového skinu v adresáři themes, například themes/mujskin.
2. Do této složky přidám soubor mujskin.theme, který bude obsahovat běžný PHP skript (musí tedy obsahovat vsuvky <?php a ?>).
3. Definuji novou funkci mujskin_breadcrumb(), která až na záměnu theme ==> mujskin bude mít stejnou signaturu jako funkce původní. Dobrým přístupem je okopírovat také původní kód, který u některých funkcí může být dost komplikovaný, a provést pouze požadované změny. Výsledný kód bude následující:

   function theme_breadcrumb($breadcrumb) {
     if (!empty($breadcrumb)) {
       return ‚<div class=“breadcrumb“>‘. implode(‚ > ‚, $breadcrumb) .'</div>‘;
     }
   }

V dokumentaci k Drupal API najdete seznam skinovacích funkcí a další podrobnosti popisuje stránka Plain PHP themes, obvykle je ale jednodušší využít služeb nějakého šablonovacího systému…

PHPTemplate

Drupal podporuje řadu šablonovacích systémů, například XTemplate nebo Smarty, od verze 4.7 je však jako výchozí používán PHPTemplate. Základní ideou PHPTemplate je podporovat vkládání dynamického výstupu přímo přes PHP vsuvky bez nutnosti učit se nějakou speciální syntaxi, což je přístup pro řadu lidí jistě sympatický.

PHPTemplate pro předefinování skinovacích funkcí používá soubory pojmenované podle schématu název_funkce.tpl­.php, přičemž je ve výchozím stavu možno použít pět následujících souborů:

• page.tpl.php – skinuje stránku jako celek
• block.tpl.php – skinuje blok v postranním sloupci
• box.tpl.php – skinuje box používaný v hlavní oblasti s obsahem
• comment.tpl.php – skinuje oblast komentářů
• node.tpl.php – skinuje obsah nódu

Pokud tedy vytvoříte soubor node.tpl.php a zapíšete do něj „Test“, je to zcela stejné, jako kdybyste použili následující PHP kód:

function mujskin_node($node, $teaser = FALSE, $page = FALSE) {
  return „Test“;
}

Zde je příklad reálného obsahu souboru node.tpl.php z tématu Bluemarine:

<div class=“node<?php if ($sticky) { print “ sticky“; } ?>
  <?php if (!$status) { print “ node-unpublished“; } ?>“>
  <?php if ($picture) {
    print $picture;
  }?>
  <?php if ($page == 0) { ?>
    <h2 class=“title“>
      <a href=“<?php print $node_url?>“><?php print $title?></a>
    </h2>
  <?php }; ?>
  <span class=“submitted“><?php print $submitted?></span>
  <span class=“taxonomy“><?php print $terms?></span>
  <div class=“content“><?php print $content?></div>
  <?php if ($links) { ?>
    <div class=“links“>&raquo; <?php print $links?></div>
  <?php }; ?>
</div>

Je dobře vidět, že kromě proměnných $node, $teaser a $page, které jsou standardně dostupné funkci mujskin_node(), připraví PHPTemplate i několik dalších užitečných proměnných, například $content pro obsah nódu nebo $node_url pro permanentní odkaz. Práce s PHPTemplate je tedy opravdu snadná.

Nyní, když už znáte základní principy PHPTemplate, je čas na konkrétní postup vytvoření skinu:

1. Začátek je stejný, v adresáři themes vytvořte novou složku nazvanou například mujskin.
2. Do tohoto adresáře přidejte soubor page.tpl.php, který je jako jediný povinný.
3. Volitelně přidejte výše uvedené soubory, pokud vám nevyhovuje výchozí generovaný kód. V začátcích je nejlepší zkopírovat si obsah těchto souborů z témat Bluemarine nebo Pushbutton, které jsou distribuovány spolu s Drupalem. Přehled proměnných, které můžete použít v jednotlivých souborech, najdete v on-line nápovědě Drupalu v sekci PHPTemplate theme engine.
4. Vlastní CSS pravidla ukládejte do souboru style.css (na jménu záleží). Tento soubor bude při použití daného tématu ke stránce automaticky připojen.

Tip: Pokud v začátcích potřebujete pomoc, podívejte se na projekt PHPTemplate Raw Layouts, který přináší několik předem připravených, dobře zdokumentovaných CSS layoutů.

Pokročilé úpravy

Co dělat, když chcete upravit skinovací funkci jinou než theme_page(), theme_node() a podobně? Postup uvedu na příkladu, který je reálný a poměrně často požadovaný – Drupal standardně sadu odkazů odděluje svislítkem (|) a vy například chcete místo toho používat dvě dvojtečky. Toto chování definuje funkce theme_links(). Postup je následující:

1. V adresáři svého tématu vytvořte soubor template.php. Jedná se o standardní PHP soubor, takže na začátek a na konec vložte <?php a ?>.
2. V tomto souboru předefinujte funkci theme_links() následujícím způsobem:

   function mujskin_links($links, $delimiter = ‚ | ‚) {
   }

3. Nyní přicházejí v úvahu dvě možnosti – buďto chcete výsledný kód generovat přímo v souboru template.php, nebo vývojáři skinu dáte k dispozici soubor links.tpl.php.
   1. V našem příkladu je nejjednodušší do funkce mujskin_links() vložit následující kód:

      $delimiter = ‚ :: ‚;
      if (!is_array($links)) {
        return “;
      }
      return implode($delimiter, $links);

      Tento způsob se tedy neliší od běžného předefinování skinovací funkce.

   2. Pokud chcete využít samostatného souboru links.tpl.php, vložte do funkce následující kód:

      return _phptemplate_callback(‚links‘, array(‚links‘ => $links, ‚delimiter‘ => $delimiter));

      Tímto dáváte PHPTemplate instrukci, že se má podívat po souboru links.tpl.php, vyhodnotit proměnné $links a $delimiter podle zde specifikovaných hodnot (obvykle se pouze předávají argumenty poskytnuté funkci mujskin_links()) a celý tento soubor vrátit jako jeden textový řetězec.

      Obsah souboru links.tpl.php může vypadat například následovně:

      <span class=“links“>
        <?php print implode($links, ‚ :: ‚); ?> </span>

Druhou možnost využijete především v případě, že je funkce theme_něco() komplikovaná. Tehdy se vám také bude hodit možnost předat šabloně vlastní proměnné podobně, jak jste mohli vidět v případě node.tpl.php (podrobné instrukce viz článek Making additional variables available to your templates). Základní práce s PHPTemplate je však velmi přímočará.

Omezení šablonovacího systému Drupalu

Na předchozích řádcích jste mohli vidět, že Drupal úpravy vzhledu podporuje velmi dobře, přesto není současný stav úplně ideální. Když se podíváte na seznam skinovacích funkcí, zjistíte, že jejich počet je omezený a ne vždy zcela dostatečný. Oblast komentářů můžete například upravovat v šabloně comment.tpl.php, ale k jednotlivým elementům formuláře pro vložení nového komentáře se už běžnými prostředky nedostanete.

Jiným příkladem je v článku použitá funkce theme_links(), která jako argument přijímá pole s již hotovými odkazy. Pokud je ale budete chtít doplnit například obrázkem, nevyhnete se regulárním výrazům nebo jiným nepěkným věcem (zde je potřeba dodat, že odkazy by měly mít v chystané verzi 4.8 lepší podporu skrze nové API).

Jistá omezení tedy existují, článek vám ale chtěl ukázat a ukázal, že celkově Drupal patří mezi dobře skinovatelné CMS.

Starší komentáře ke článku

Pokud máte zájem o starší komentáře k tomuto článku, naleznete je zde.