Drupal: Themes Teil 3

Am bequemsten ist es für viele Drupal-Anwender, wenn sie bestehende Themes anpassen. Da dreht man dort ein bisschen an der Farbenschraube, greift hier ein klein wenig in den Code ein, und schon sieht die Seite etwas individueller aus. Das Ende der Fahnenstange ist damit aber längst noch nicht erreicht. Denn wer wirklich ein eigenes Design haben will, der wird um die Entwicklung eigener Themes nicht herumkommen.

Wir empfehlen:
Drupal-Training

Bevor man sich ans Werk macht, sein eigenes Theme zu erstellen, sollte man wissen, was für Kenntnisse dafür nötig sind. Prinzipiell sollte man sich in folgenden Bereichen (zumindest ein bisschen) auskennen:

• CSS
• (X)HTML
• PHP

Während gutes CSS- und (X)HTML-Wissen sicherlich Pflicht sind, kommt man bei PHP für den Anfang durchaus mit Grundkenntnissen aus. Je nachdem, ob man JavaScript-Elemente einsetzen will, sollte man sich natürlich auch mit dieser Skriptsprache auskennen.

Wichtige Tools

Bevor ihr euch an die Erstellung der Themes macht, noch einige allgemeine Hinweise zu hilfreichen Tools. Der Klassiker schlechthin für alle diejenigen, die mit dem Firefox unterwegs sind, ist Firebug. Mit dieser Browser-Extension kann man den Code der Seite untersuchen. Außerdem kann man die aktuelle Anzeige der Seite anpassen, ohne die zugrundeliegenden Dateien verändern zu müssen.

 

Um den Firebug im Firefox zu installieren, ruft man die Seite http://getfirebug.com/ auf.

Dort kann die Extension dann automatisch installiert werden. Für Google Chrome, den IE usw. gibt es ebenfalls eine – wenn auch abgespeckte – Firebug-Variante. Diese Version findet ihr unter http://getfirebug.com/firebuglite.

Installieren sollte man unbedingt auch das Devel-Modul. Dieses Modul ermöglicht die Anzeige wichtiger Parameter Drupal-basierter Seiten. Devel kann von der Seite http://drupal.org/project/devel heruntergeladen werden. Installiert euch außerdem das Modul simplehtmldom API (http://drupal.org/project/simplehtmldom).

 

Denn dieses Modul wird benötigt, um das Modul Theme developer (http://drupal.org/project/devel_themer) korrekt verwenden zu können. Nachdem diese Module installiert und aktiviert sind, fällt die Theme-Entwicklung deutlich leichter. Denn ab sofort gibt es u.a. im unteren Fensterbereich den Punkt Theme info.

 

Wird das Kontrollkästchen aktiviert, verändert sich das Verhalten der Drupal-Webseite. Jetzt wird um jedes Element, über das man mit dem Mauszeiger fährt, ein roter Balken angezeigt.

 

Klickt man das Element an, sind Zusatzinformationen zu diesem Element zu sehen.

Dort kann man beispielsweise die beteiligten Dateien und Funktionsaufrufe erkennen.

 

Außerdem könnt ihr über Struktur>Blöcke den Block Entwicklung einblenden. Dieser bietet zusätzliche Funktionen für die Theme-Entwicklung.

Achtet hier darauf, über die Block-Konfiguration dafür zu sorgen, dass der Block auch tatsächlich in den gewünschten Themes und bei den notwendigen Inhaltstypen angezeigt wird.

 

Basis-Themes verwenden

Wenn ihr ein Theme für Drupal entwickeln wollt, stehen euch dafür verschiedene Möglichkeiten zur Verfügung. Zunächst einmal könnt ihr ein Theme natürlich vollständig selbst entwickeln. Eleganter und einfacher ist es aber sicherlich, wenn man auf ein sogenanntes Basis-Theme zurückgreift. In einem solchen Theme sind bereits die grundlegenden Dinge/Elemente enthalten, die man für den Aufbau eines Themes braucht. Mittlerweile gibt es eine Vielzahl solcher Basis-Themes. Eines der bekanntesten Basis-Themes ist zweifellos Zen (http://drupal.org/project/zen).

 

Zen ist ein HTML5-Theme, das zahlreiche Funktionen bietet. Neben Zen gibt es beispielsweise mit Framework, Omega und Blueprint noch zahlreiche andere Basis-Themes. Ich werde euch das Grundprinzip der Arbeit mit Themes anhand des Genesis-Basis-Themes vorstellen. Die offizielle Projekt-Webseite von Genesis findet ihr unter http://drupal.org/project/genesis.

 

Von dort könnt ihr Genesis herunterladen. Entpackt das heruntergeladene Archiv und kopiert es nach sites/all/themes. Innerhalb des entpackten Verzeichnisses findet ihr außerdem das Verzeichnis genesis _SUBTHEME. Benennt dieses Verzeichnis beispielsweise in psdtutorials um und kopiert es nach sites/all/themes.

Damit sind die Vorarbeiten abgeschlossen und es kann mit der eigentlichen Theme-Entwicklung begonnen werden.

Die info-Datei

Los geht es mit der themename.info. (Wobei themename jeweils durch den Namen des Themes zu ersetzen ist). Fehlt diese Datei, erkennt Drupal nicht, dass es sich um ein Theme handelt. Die themename.info muss also in jedem Fall vorhanden sein. Öffnet das Verzeichnis sites/all/themes/psdtutorials und benennt die genesis_SUBTHEME.info in psdtutorials.info um. Bei einer solchen info-Datei handelt es sich um das Herzstück eines Themes. Denn mittels dieser Datei werden Drupal wichtige Informationen zum Theme geliefert. In dieser Datei sind normale Einträge und Kommentare enthalten. Die Kommentare erkennt ihr jeweils an einem vorangestellten Semikolon.

; $Id: genesis_SUBTHEME.info,v 1.25 2011/01/14 03:12:40 jmburnz Exp $
; Change the name to match your new subthemes name and modify the description.

An dieser Stelle geht es zunächst um die allgemeinen Theme-Angaben.

name         = Genesis SUBTHEME
description  = My Kickn' Sub-theme
core         = 7.x
engine       = phptemplate
screenshot   = genesis-subtheme.png
base theme   = genesis

Die einzelnen Einträge dieser Datei verdienen natürlich eine genauere Betrachtung. Der Name des Themes muss angegeben werden. Angezeigt wird er auf der Theme-Administrationsseite. Auch wenn der Name nicht mit dem Theme-Verzeichnisnamen übereinstimmen muss, wird das in der Praxis meistens so gehandhabt.

name = psdtutorials

Weiter geht es mit der Beschreibung des Themes.

Der dort eingetragene Wert ist auf der Theme-Übersichtsseite zu sehen.

description = Ein Theme von psd-tutorials.de

Bei core gibt man die Drupal-Version an, für die das Theme entwickelt wird. Im aktuellen Fall nimmt man also Folgendes:

core = 7.x

Über den engine-Eintrag legt man fest, mit welcher Template-Engine das Theme erstellt wird. Üblicherweise gibt man die speziell für Drupal entwickelte Engine phptemplate an.

engine = phptemplate

Im screenshot-Bereich wird ein Screenshot bestimmt, der im Backend der Seite letztendlich angezeigt werden soll. Meistens legt man diesen Screenshot natürlich erst am Ende der Theme-Entwicklung an. Gebt hier den Namen des Themes an.

screenshot = psdtutorials.png

Entscheidende Bedeutung kommt dem Eintrag base theme zu. Hierüber teilt man Drupal nämlich letztendlich mit, auf welchem Theme das Subtheme basiert. Im aktuellen Fall ist dies genesis.

base theme = genesis

Insgesamt sollte der Kopf der psdtutorials.info jetzt folgendermaßen aussehen:

name         = psdtutorials
description  = Ein Theme von psd-tutorials.de
core         = 7.x
engine       = phptemplate
screenshot   = psdtutorials.png
base theme   = genesis

Damit ist der erste Schritt hin zum eigenen Theme gemacht. Welche Schritte noch nötig sind, erfahrt ihr in den nächsten Tutorials dieser Reihe.

Wir empfehlen:
Dreamweaver-Video-Training

Unsere Empfehlung für dich

Bootstrap für modernes Webdesign

Bootstrap für modernes Webdesign

Ob Smartphone, Tablet oder PC – Größe spielt keine Rolle mehr! Mit Bootstrap schmiegen sich Content und Design wie von Geisterhand an jedes Format. Lerne in 12 Lektionen und 2,5 Stunden Video-Training, wie dir das beliebte Framework Bootstrap den Weg zur responsiven Website erleichtert.

  • Funktionen, Komponenten, Möglichkeiten: Bootstrap kennenlernen und bedienen
  • In der Praxis: Am Live-Beispiel von der Basis bis zur responsiven Website
  • Zum Mitmachen und Nachvollziehen inklusive der Arbeitsdateien

Zum Training