Drupal bietet einfache und leistungsfähige Möglichkeiten des Theming. Im folgenden wird gezeigt, wie man ausgehend von einem vorhanden Theme bestimmte Regionen oder Blöcke an die eigenen Bedürfnisse anpasst. In dem folgenden Beispiel wird der Footer dieses Blogs auf Bootstrap umgestellt.
Das Blocksystem von Drupal
Das Blocksystem von Drupal unterscheidet zwischen "Regionen" und "Blöcken", wobei die Blöcke den Regionen untergeordnet sind. Ein Drupal-Theme definiert diese hierarchische Struktur.
Im Theme-Ordner "mytheme" eines bestimmten Theme "My Theme" findet man die Datei 'mytheme.info', in der die Regionen um den Footer herum folgendermaßen definiert sind:
.... regions[sidebar_second_affix] = Sidebar second affixed regions[footer ] = Footer ....
Diese Regionen finden sich dann unter "Admin/Structure/Blöcke" in einer strukturierten Listenübersicht wieder. In dieser Liste kann man dann unter den jeweiligen Regionen beliebige Blöcke einfügen.
Abb.1: Auszug aus dem Formular "Blocks" unter "Admin/Structure/Blocks"
Die dort dargestellte Region "Fußbereich" (Footer) erzeugt etwa folgenden Html-Code, der hier allerdings aus Übersichtsgründen nur auszugsweise dargestellt ist (Block 3 und Block 4 werden nur angedeutet):
......
<div id="nirwana">
<div class="footer-blocks">
<div class="region region-footer">
<div id="block-views-archive-block" class="block block-views contextual-links-region">
<h1>Archiv</h1>
<div class="contextual-links-wrapper contextual-links-processed">
<div class="view view-archive view-id-archive view-display-id-block view-dom-id-c6927ce047328f3fa06ab969e057374b">
</div>
<div id="block-block-3" class="block block-block contextual-links-region">
<div id="block-block-4" class="block block-block contextual-links-region">
</div>
</div>
</div>
....Definiert wird diese Ausgabe in einer Template-Datei des Themes, in diesem Fall in der Datei "page.tpl.php" im Ordner "templates". Die Bezeichner hier sind Themes-spezifisch. Die entsprechenden Abschnitt müssen deshalb in anderen Themes in analogen Template-Dateien gesucht werden.
Der für die Ausgabe oben verantwortliche Abschnitt sieht im vorliegenden Fall so aus:
.... <div id='nirwana'> <div class="footer-blocks"> <?php print render($page['footer']) ?> </div> </div> ....
Vergleicht man diesen Code-Abschnitt mit der Html-Ausgabe oben, so erkennt man, dass Drupal automatisch eine Reihe von Id-Bezeichnern, Klassen und Attributen beim Rendern von $page['footer'] erzeugt.
Genau diese Ausgabe wollen wir jetzt im folgenden beeinflussen und zwar möchten wir, dass die Bootstrap-spezifischen Klassen "span3 col-sm-12 col-md-3" den Div-Containern für die Blöcke hinzugefügt werden.
Customizing der Footer-Region
Da wir schon einige CSS-Styles an die Klasse 'footer-blocks' gebunden haben, übernehmen wir diese Struktur einfach in eine neue Datei "region--footer.tpl.php" im Verzeichnis "templates" des Theme.
Der modifizierte Abschnitt in "page.tpl.php" sieht dann so aus:
.... <div id='nirwana'> <?php print render($page['footer']) ?> </div> ....
Im Ordner "templates" des Theme erstellen wir jetzt die Datei "region--footer.tpl.php":
<?php
/**
* Custom theme implementation to display the footer.
*/
?><?php if ($content): ?>
<div class="footer-blocks">
<div class="region region-footer">
<?php print $content ?>
</div>
</div>
<?php endif ?>Eine Vorlage für die Struktur des Source-Codes finden wir in "/modules/system/region.tpl.php". Diese Datei wird einfach in den "templates"-Ordner des eigenen Theme kopiert, der Dateiname wird geändert (Anhängen von "--footer") und der Inhalt wird an die eigenen Bedürfnisse angepasst. Im vorliegenden Fall haben wir hauptsächlich das div-Tag der Klasse "footer-blocks" hinzugefügt.
Nach einem Clear-Cache des Portals sollten wir jetzt die gleiche Ausgabe wie vorher vorfinden.
Customizing der Footer-Blocks
Die Vorlage für unsere angepasste "Block"-Ausgabe finden wir unter "/modules/block/block.tpl.php". Im Ordner "templates" des Themes erstellen wir deshalb eine weitere Datei "block--footer.tpl.php", kopieren den Originalinhalt hinein und passen ihn an:
<?php /** * Custom theme implementation to display a block inbetween the footer region. */ ?><div id="<?php print $block_html_id ?>" class="span3 col-sm-12 col-md-3 <?php print $classes ?>"<?php print $attributes ?>> <?php print render($title_prefix) ?> <?php if ($block->subject): ?> <h2<?php print $title_attributes ?>><?php print $block->subject ?></h2> <?php endif ?> <?php print render($title_suffix) ?> <?php print $content ?> </div>
Der Unterschied gegenüber der Vorlage aus dem "block"-Modul besteht hauptsächlich in den zusätzlichen Bootstrap-Klassen: "span3 col-sm-12 col-md-3", wobei "span3" noch die Spalten-Definition von Bootstrap2 darstellt und die anderen dem analogen System von Bootstrap3 genügen.
Damit erhält unser Footer das gewünschte Layout von Bootstrap3.
Fazit
Mit der hier vorgestellten Vorgehensweise lassen sich vorhandene Themes einfach an die eigenen Bedürfnisse anpassen. Erforderlich war nur die Block-spezifische Überschreibung der Drupal-Core-Module-Templates für "Region" (Modul "system") und "Block" (Modul "block") durch zwei zusätzliche Templatedateien "region--footer.tpl.php" und "block--footer.tpl.php" in unserem Theme.