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

Von: Kerstin Dankwerth
Stand: 27. Juni 2011
Beitrag bewerten
Ersten Kommentar schreiben

Inhalt

Über die Autorin:

bild117238

Kerstin Dankwerth arbeitet seit 1996 als Grafikerin und Web-Entwicklerin im Netz. Zu ihren Stammkunden gehören u.a. akademie.de, 104I9 OldieStar Radio, FDP Berlin,

Newsletter abonnieren

Frontend und Backend, Grundeinstellungen, Themes

Drupal-Themes

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.

Drupal-Themes

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).

Bild vergrößernDas 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.

Globale Anzeigeeinstellungen der Themes

Im Fenster Globale Einstellungen können Sie festlegen, welche Elemente auf der Website standardmäßig angezeigt werden sollen. Bild vergrößernDie Standard-Anzeigeeinstellungen der Website

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.

Theme-spezifische Einstellungen

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

Bild vergrößernAktive 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.

Bild vergrößernKonfigurationseinstellungen 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).

Aufgabe: Farbkombinationen im Garland-Theme ändern

Probieren Sie Einstellungsmöglichkeiten und Farbkombinationen im Garland-Theme einmal aus.

Wählen Sie im Feld Farbauswahl eine andere vordefinierte Farbkombination und schauen Sie sich das Ergebnis im Frontend an.

Definieren Sie eine eigene Farbkombination. Tragen Sie dazu in den einzelnen Feldern die gewünschten Farben ein und beobachten Sie das Ergebnis wieder im Frontend.

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

Voraussetzungen: Eigene Themes entwickeln

Aber Anzeigeeinstellungen hin oder her, in der Praxis sind diese Möglichkeiten meist nicht ausreichend. Wenn, wie es in der Praxis meistens der Fall ist, die Umsetzung des firmenspezifischen Corporate Designs erwünscht ist, werden Sie nicht darum herumkommen, sich intensiv in die Theme-Programmierung einzuarbeiten, um danach eigene Themes entwickeln zu können.

Aber, wie bereits erwähnt, sollten Sie mit der Theme-Programmierung erst dann beginnen, wenn Sie mit dem modularen Aufbau und den Grundfunktionen von Drupal vertraut sind. Denn beides gleichzeitig zu erlernen führt schnell zur Verwirrung und somit fast zwangsläufig zu einem recht uneffektiven und eher frustrierenden Erlebnis.

Voraussetzung für die Entwicklung eigener Themes sind sehr gute HTML- und CSS-Kenntnisse. Des Weiteren ist es wichtig, dass Sie zumindest über ein PHP-Grundverständnis verfügen, sodass Sie in der Lage sind, PHP-Anweisungen aus anderen Themes logisch zu interpretieren und bei Bedarf in Ihrem eigenen Theme einzusetzen bzw. anzupassen.

Die Entwicklung eigener Drupal-Themes erfordert neben genügend Zeit auch einiges an Geduld. Im Drupal-Einsteigerkurs ist es leider nicht möglich, gezielter auf die Theme-Programmierung einzugehen.

Aufbau eines Drupal-Themes

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.

Bild vergrößernDie 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.

Das Verzeichnis /public_html/themes ist vom Drupal-Entwickler nur für die Core-Themes gedacht. Wenn Sie weitere Themes, die Sie aus dem Netz heruntergeladen oder selbst entwickelt haben, auf Ihrer Drupal-Site bereitstellen möchten, müssen Sie diese im Ordner /sites/all/themes ablegen.

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.

Bild vergrößernDie 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.

Aufgabe: Ein Blick hinter die Kulissen

Werfen Sie ruhig einmal einen Blick in den Quellcode der Theme-Dateien. Sind Sie unsicher im Umgang mit Quellcode, legen Sie vorab einfach eine Kopie der Dateien an. Dann sind Sie auf jeden Fall auf der sicheren Seite und es kann nichts mehr schief gehen.

Auch ein Blick in andere Theme-Verzeichnisse kann nicht schaden. So können Sie sich eine grobe Vorstellung davon machen, dass der Aufbau der Themes und die Anzahl der enthaltenen Dateien recht unterschiedlich ausfallen kann.

Tutorials zu Drupal-Themes

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

Mitglied werden, Vorteile nutzen!

  • Sie können alles lesen und herunterladen: Beiträge, PDF-Dateien und Zusatzdateien (Checklisten, Vorlagen, Musterbriefe, Excel-Rechner u.v.a.m.)
  • Unsere Autoren beantworten Ihre Fragen
  • Sie bekommen erhebliche Rabatte auf unsere von Experten geleitete Online-Workshops
 

Online-Workshop-Kalender