Das kostenlose CMS Drupal - Installation und Verwaltung für Einsteiger

Wie in anderen CM-Systemen auch, wird in Drupal das Aussehen der Website über Themes (Templates) gesteuert.

Sinn und Zweck der Themes: Eine strikte Trennung zwischen Layout, Inhalten und Funktionalität. Ein Theme ist sozusagen eine Layoutvorlage, in der die Menüs, Module (z. B. Suchfunktion, Login-Maske) und Inhalte zusammengebaut werden.

Der Einsatz von Themes bietet den großen Vorteil, dass bei einer Änderung des Layouts, also auch bei einem Relaunch der Site, nicht jede einzelne Seite, sondern nur die Theme-Dateien geändert werden müssen. Zudem wird durch den Einsatz eines Themes erreicht, dass Inhalte im Frontend immer im gleichen Layout erscheinen und nicht jeder Redakteur in puncto Seitenlayout sein eigenes Süppchen kochen kann. Was der Darstellung eines professionellen Webauftritts, dem Corporate Design des Unternehmens, in den meisten Fällen sehr zugute kommt.

Im Folgenden werden Sie die Funktionen von Drupal anhand eines Praxisbeispiels kennenlernen. Es handelt sich dabei um ein kleines Portal, auf dem verschiedene Reisen in Europa vorgestellt werden.

Im Drupal-Standardpaket sind sechs verschiedene Themes enthalten. Nach der Installation stehen diese im Backend über die Befehlsfolge Hauptmenü > Verwalten > Strukturierung > Themes oder die Backend-Startseite >Strukturierung > Themes zur Auswahl.

Standardmäßig ist das Garland-Theme aktiviert (1).

Das Garland-Theme ist nach der Installation aktiviert.

Am Anfang der Seite finden Sie die zwei Buttons Alle Anzeigen (2) und Konfigurieren (3).

Über den Button Anzeigen (2) werden alle installierten Themes im unteren Teil des Fensters aufgelistet.

Über den Button Konfigurieren (3) erreichen Sie die globalen Theme-Einstellungen, die für die gesamte Website Gültigkeit haben. Die Einstellungen greifen jedoch nur, wenn für ein Theme selbst keine weiteren Einstellungen hinterlegt sind. Andernfalls werden die globalen Einstellungen von den Theme-eigenen Einstellungen überschrieben.

Die Standard-Anzeigeeinstellungen der Website

Im Fenster Globale Einstellungen können Sie festlegen, welche Elemente auf der Website standardmäßig angezeigt werden sollen.

So können Sie unter anderem einstellen, ob ein Logo (1), der Name der Website (2) und evt. auch noch ein Slogan eingeblendet (3) werden sollen. Auch das Hochladen eines eigenen Logos (4) und Favicons ist möglich.

Weiterhin können Sie festlegen, ob der Name des Autors und das Aktualisierungsdatum in den Beiträgen angezeigt werden sollen.

Neben den globalen Anzeigeeinstellungen der Themes verfügen die installierten Themes über eigene Konfigurationsparameter.

Aktive Themes verfügen über den Konfigurieren-Link.

Verfügt ein Theme über eigene Konfigurationsparameter, ist in der Liste der Themes, in der rechten Spalte, der Button Konfigurieren zu sehen. Damit der Konfigurieren-Link für ein Theme angezeigt wird, muss das Theme aktiviert sein.

Mit Klick auf den Konfigurieren-Link erreichen Sie die Theme-spezifischen Einstellungen, die in den meisten Fällen identisch sind mit den globalen Anzeigeeinstellungen. Eine Ausnahme bilden die zwei Themes Garland und Minelli.

Konfigurationseinstellungen des Garland-Themes

In den Themes Garland und Minelli steht neben den Standardeinstellungen wie "Logo, Name und Slogan der Website einblenden" die Möglichkeit zur Verfügung, andere vorgegebene Farbkombinationen zu wählen (1) oder eigene Farbwerte für die verschiedenen Bereiche des Themes zu definieren (2).

Welche Konfigurationsparameter in einem Theme zur Verfügung stehen, hängt vom Aufbau der Theme-Dateien und den integrierten PHP-Funktionen ab.

Zunächst schauen wir uns einmal an, aus welchen Dateien ein Drupal-Theme besteht.

Öffnen Sie dazu Ihr FTP-Programm und wechseln Sie auf Ihrem Server in das Verzeichnis /public_html/themes bzw. (bei lokaler Installation) im Windows Explorer in das Verzeichnis xampp/htdocs/drupal/themes.

Die Core-Themes im Verzeichnis /themes

Dort finden Sie die Themes, die bei der Drupal-Installation automatisch mit installiert wurden, jeweils in einem eigenen Unterverzeichnis (1). Bei diesen Themes handelt es sich um die sogenannten Core-Themes.

Wie das funktioniert, schauen wir uns etwas später an. Werfen wir zunächst einmal noch einen Blick in ein einfaches Core-Theme. Da das Garland-Theme und die abgewandelte Form Minelli durch die über das Backend zu steuernde Farbauswahl vom Aufbau her sehr komplex sind, eignen sich diese beiden Themes nicht sonderlich gut zur Veranschaulichung.

Wesentlich einfacher hingegen ist der Aufbau des Bluemarine-Themes. Im Verzeichnis /themes/bluemarine finden Sie die zugehörigen Dateien.

Die Dateien des Themes "Bluemarine"

Im Verzeichnis des Themes finden Sie vier unterschiedliche Dateitypen, die ich Ihnen in den Grundzügen kurz vorstellen möchte.

(1) Die PHP-Dateien *.tpl.php:
Bei diesen Dateien handelt es sich um die einzelnen Vorlagen der von Drupal generierten Inhalte. Die 'wichtigste' Datei ist die page.tpl.php. Diese Datei beinhaltet das Grundlayout und die Drupal-spezifischen PHP-Anweisungen zum Einbau der Module, Menüs und Inhalte.

Bei den weiteren Dateien handelt es sich sozusagen um 'Mini-Templates', die für die Ausgabe bestimmter Inhaltselemente zuständig sind. So ist beispielsweise die Datei node.tpl.php für die Ausgabe eines Beitrags zuständig und die Ausgabe der Kommentare wird über die Datei comment.tpl.php gesteuert.

(2) Die CSS-Dateien *.css:
Die CSS-Dateien beinhalten die IDs und Klassen, über die die Formatierungen der einzelnen Elemente global gesteuert werden. Notwendig ist nur die Datei style.css. Die Datei style-rtl.css wird nur bei mehrsprachigen Websites benötigt, auf denen auch Sprachen mit der Schreibrichtung von rechts nach links eingesetzt werden. Daher auch die Bezeichnung der Datei style-rtl.css (rtl= right to left).

Abhängig davon, wie komplex der Aufbau des Themes ist, sind in anderen Themes noch weitere CSS-Dateien enthalten, die in der Regel für die Ausgabe einzelner Inhaltselemente zuständig sind.

(3) Die Beschreibungsdatei: themename.info
Die info-Datei beinhaltet die Beschreibung des Themes. Die Datei trägt in der Regel den Namen des Themes und ist zwingend erforderlich. Fehlt die info-Datei im Verzeichnis des Themes, erkennt Drupal das Theme nicht und es kann im Backend nicht aktiviert werden.

In der Datei befinden sich unter anderem Angaben zu:

• Name und Beschreibung des Themes:
  Beide Angaben werden im Backend in der Liste der Themes angezeigt.

• Angabe zum Drupal-Core, also für welche Drupal-Version das Template entwickelt wurde.

• Verwendete Template-Engine:
  Seit Drupal 5.0 wird in der Regel die Engine phptemplate eingesetzt.

(4) Das Vorschaubild: screenshot.png
Die Datei screenshot.png stellt im Backend in der Liste der Themes ein kleines Vorschaubild zur Verfügung. Sowohl der Dateiname als auch das png-Format sind zwingend. Die Größe beträgt in der Regel 150 x 90 px (BxH).

Erstellen können Sie das Vorschaubild mit einem Grafikprogramm wie Photoshop, Photoshop Elements, Gimp. Auch gute Bildbetrachter (Imageviewer) stellen oft die Möglichkeit zur Verfügung, Grafiken zu verkleinern und in einem anderen Format abzuspeichern.

Im Netz finden Sie eine Reihe hilfreicher Anleitungen und Tutorials zum Thema Drupal-Themes. Hier ein kleiner Auszug guter Adressen:

Auf Deutsch:

Theme Handbuch Drupal 6
http://www.drupalcenter.de/handbuch/9913

Themes (Templates) erstellen mit Drupal
http://www.24ix.de/Drupal-Templates.214.0.html

Online-Version des Drupal Buchs von Hagen Graf
Aufbau eines Themes in Drupal
http://drupal.cocoate.com/de/d6/dateien-eines-drupal-themes

Auf Englisch:

Drupal Theme Guide (englisch)
http://drupal.org/theme-guide/6

Drupal theming for designers (englisch)
http://neemtree.com.au/drupal-theming-designers

Zen - Ultimate starting theme for Drupal
http://drupal.org/project/zen
Sehr empfehlenswertes Theme für den Einstieg in die Theme-Entwicklung. Eine gute und ausführliche Doku dazu gibt es unter: http://drupal.org/node/193318