EDV Beratung Feike

Diese Reihe beschäftigt sich mit den notwendigen Arbeitsschritten zur Entwicklung einer Website (i.F. "Site") mit Hilfe des Content Management Systems (CMS) Drupal in version 6.x. Anhand meines Projekts "EQUIRA" zeige ich Schritt für Schritt die Entwicklung des Systems bis zur Inbetriebnahme auf einem Hetzner Root-Server.

Drupal Design und Themeing

Meistens gibt der Kunde ein Design vor. Unter dem Design einer Webseite versteht man die grafische Gestaltung "im weitesten Sinne". In den seltensten Fällen dürfte die Vorgabe alle Seiten der Site enthalten, im Detail, und insbesondere in den dynamischen Bereichen besteht immer Spielraum für Abweichungen.

Praktisch immer kommt das Design von einem Designstudio in Form von PaintShopPro Grafiken. Hieraus ein funktionsfähiges - und grafisch soweit wie möglich identisches - Theme zu bauen ist Inhalt der ersten Aufgabe.

In diesem Beispiel ist folgendes Design vorgegeben:

Dazu noch folgende Nebenbedingungen:

• Keine Tables verwenden.
• Content muss im Browser auf Breite 980px zentriert werden. Natürlich soll aber das ganze Browserfenster schwarz sein und die horizontalen Separatoren über die ganze Breite laufen.
• MainContent Markup muss vor dem Spaltencontent stehen (SEO Cond.)

Design in Regions zerlegen

Ein Drupal Theme definiert "Regions". Hierunter versteht die Engine einzeln ansteuerbare Bereiche des Designs, z.B. können Blöcke über die Adminoberfläche in bestimmte Regions konfiguriert werden. Manchmal bezeichnet man diese Darstellung in Bereichen auch als Mockup oder Wireframe.

Das vorgegebene Design legt folgende Aufteilung in Regions nahe:

Das Theme anlegen

Wenn die Grundlagen durchdacht sind, ist es Zeit das Theme anzulegen. Die Basisinstallation von Drupal ist sehr einfach. Paket Drupal 6.x hier runterladen und im Webspace (z.B. /srv/www/htdocs bei SuSE oder /var/www bei Debian) auspacken. Mein Theme wird "equira" heißen und auf der Adresse "www.equira.com" laufen.

Grundsätzlich wird Drupal im Verzeichnis "sites" (ab jetzt sind alle Pfadangaben relativ zum Webspace zu verstehen, hier also z.B. /var/www/sites) an eigene Bedürfnisse angepasst. Man kann sein Theme zwar auch einfach ins Verzeichnis "themes" packen, bekommt dann aber bei Core Upgrades größere Probleme. Ich erstelle also mein Theme in "sites/www.equira.com/themes/equira" (sites/all/themes/equira ginge auch, dann wird es allerdings bei Multisite Betrieb auf dem Server schwierig). Im Verzeichnis equira erstelle ich nun die für ein Theme minimal notwendigen Dateien equira.info und page.tpl.php.

equira.info - das Info File des Themes

Das *.info File eines Themes teilt der Drupal Engine grundlegende Fähigkeiten und Eigenschaften des Themes mit, auch Vererbungen und ganze Theme Hierarchien sind möglich. Die ganzen Details zur info Datei gibt es hier.

Mein theme info für equira sieht erstmal so aus:

Der Abschnitt "deactivate core css's" deaktiviert einige CSS Files des Drupal Cores, das macht das Themeing via CSS später leichter (natürlich nur wenn man wie ich das Core Layout nicht mag). Die Header Region habe ich mir gespart weil hier im vorgegebenen Layout keinerlei dynamische (also pro Seite verschiedene) Inhalte zu finden sind.

Die Region "PlainCode before Body" füge ich in alle meine Templates ein. Hierüber lassen sich später absolut positionierte Elemente (position:absolute) oder Schmankerl wie der Google Analytics urchinTracker JavaScript Code unterbringen.

page.tpl.php für equira erstellen

Die Datei page.tpl.php ist in Drupal das steuernde Template für ein Theme. Hier werden der HTML-Markup und die PHP - Codeschnippsel implementiert. Die Engine fügt später dynamisch Content aus der Datenbank ein. Ich bin ein Fan des "Semantischen Markups" von Andy Clarke (siehe Buchempfehlung auf der Seite), daher schreibe ich einige Layer entsprechend meinem Mockup ins Template:

Der #frame ist nötig um den #footer am Ende auch wirklich unter alle Bereich in der Mitte zu bekommen. Wie man aus diesem Markup das dreispaltige (und dreizeilige) Layout via CSS entstehen lässt ist im Netz bereits ausgiebig diskutiert und bspw. hier von Matthew Levine beschrieben worden.

Jetzt muss man noch die PHP Variablen ins Templete einfügen:

Dabei ist die abkürzende Schreibweise wie bspw. $footer so zu verstehen:
$footer := <?php if ($footer) print $footer; ?>

Ausblick

Im nächsten Teil Wie entwickle ich eine Drupal Webseite - Teil 2beschreibe ich, wie die Tabs der zweiten Menüebene und das 3. Menü erstellt werden. Außerdem führe ich das Drupal Modul "equira" ein um einige "Preprocessings" für das Theme durch zu führen.