23.03.17

Drupal 7 Webseite erstellen - aber richtig

Eine CMS Drupal-Webseite in 6 Schritten

In diesem Text möchte ich Euch in nachvollziehbaren Schritten erklären, wie man am besten eine Webseite an Drupal anbindet. Die Vorgehensweise ist praxisgeprüft und für zukünftige Erweiterungen ausgelegt. Vorraussetzung für diese Anleitung ist, dass man schon grundlegende Erfahrungen mit Drupal 7, wie z.B. eine Installation, gemacht hat und die Fach-Terminologie grob versteht.

Drupal 7 kommt standardmäßig mit einer Auswahl von fertigen Themes daher. Damit ist das CMS theoretisch “out-of-the-box” verwendbar. Da diese Themes aber allesamt sehr generisch aufgebaut sind, kann man Drupal in dieser Standardkonfiguration allenfalls für den Betrieb eines vereinfachten Blogs verwenden. Etwas verkürzt zusammengefasst gibt es ein Layout-Template und ein Inhalts-Template pro Theme. Das Layout-Template sorgt für den Aufbau von Header und Footer. Das Inhalts-Template stellt die Inhalte des CMS recht ungestaltet und nacheinander aufgelistet dar. Die im Core befindlichen Zusatzfunktionen “Kommentar” und “Auf der Startseite anzeigen” machen den angesprochenen Blog-Betrieb in einer einfachen Art und Weise möglich.

Für den Betrieb einer professionellen Drupal-Webseite reicht das Basis-Setup jedoch nicht aus. 

Die technische Realisierung einer professionellen Drupal-Webseite geschieht in der Regel wie folgt: Konzept, Screen-Design, HTML-Programmierung und zum Schluß die CMS-Anbindung. Dies bedeutet, dass beim Start der CMS-Anbindung alle notwendigen Anforderungen bereits festliegen. Die Ausführung der Arbeitsschritte kann somit strukturiert und linear beginnen:

1. Neue Drupal-Site anlegen

Zu Beginn legt Ihr im htdocs unter “sites“ einen neuen Ordner an, der dem Namen der später verwendeten Domain inkl. “www” entspricht. In diesem Beispiel verwenden wir exemplarisch “www.test.de”. Vermutlich setzt Ihr zum Entwickeln eine lokale Umgebung ein. Am besten erstellt Ihr dann im o.g. Ordner noch einen Symlink “www.test.local”, der auf den zuvor erstellten Ordner verweist (einfach im Ordner Sites “ln -s www.test.local www.test.de” in der Kommandozeile unter OSX/Linux eingeben). So stellt Ihr sicher, dass Ihr keine redundanten Daten erstellt. Dann noch die Datei settings.php aus dem Ordner “sites/default” in den neuen Ordner kopieren, und dort die Konfiguration der Datenbank anpassen. Für den Zugriff auf www.test.local müsst Ihr noch die hosts-Datei entsprechend anpassen.

2. Neuen Drupal-Theme anlegen

Im nächsten Schritt erstellt Ihr unter “sites/www.test.de” den Ordner “themes” und darin wiederum den Ordner mit dem Namen Eures neuen Themes, den wir exemplarisch “mytest” nennen. Folgende Standard-Theme-Dateien sollten vorhanden sein, die Ihr auch hier herunterladen könnt.

  • template.php
  • mytest.info
  • templates/html.tpl.php
  • templates/page.tpl.php
  • templates/node.tpl.php
  • templates/node-contact.tpl.php
  • scripts/javascript.js
  • scripts/styles.css
  • images/test.png

Mit diesen Dateien habt ihr bereits die Basis für eine individuelles Drupal-Theme, das Ihr später ganz flexibel entsprechend den Anforderungen ergänzen könnt. Tiefergehende Lektüre über den Aufbau eines Drupal-Themes findet Ihr hier: www.drupal.org/theme-guide/6-7

3. Admin-Theme festlegen

Drupal 7 unterstützt zwar s.g. Overlays bei der Inhaltsbearbeitung, ich rate Euch jedoch einen mitgeliefertes Drupal-Standard-Theme für die Inhaltsbearbeitung zu nutzen. Diese sind generisch und unterstützen alle CMS-Verwaltungsfunktionen, was bei unserem individuellem Theme ja bewusst nicht gewünscht ist. Dazu aktiviert Ihr nun in Drupal unter “Darstellung” die beiden Themes “mytest” und z.B. Seven. Mytest setzt Ihr dann als default. Ganz unten könnt Ihr nun “Seven” als Verwaltungs-Theme wählen und definieren, dass dieser standardmäßig für die Inhaltsbearbeitung verwendet wird. Ab sofort wird Seven für alle CMS-Funktionen (s.g. “Backend”) und mytest für die Ansicht der erstellten Inhalt auf der Webseite (s.g. “Frontend”) verwendet. Für den Kunden bedeutet dies, dass das Aussehen bei der Inhaltsbearbeitung optisch vom Erscheinungsbild der Webseite klar getrennt ist.


 









 

4. HTML-Templates auf Inhalt analysieren

Wie zu Beginn angekündigt, verfolgen wir das Ziel die Webseite individuell umzusetzen. Das bedeutet, wir müssen die zuvor erstellten Templates im Theme “mytest” für Drupal hinterlegen. Dazu untersuchen wir die noch statischen HTML-Templates auf Gemeinsamkeiten. Haben wir z.B. zwei Templates ausgemacht, die sich nur geringfügig unterscheiden (z.B. ein Template ohne Bilder im Fließtext und ein Template mit Bildern im Fließtext), so können wir die Unterschiede in PHP-Regeln (if-else) und müssen nur ein Template anlegen. So vermeiden wir Overhead bei Anlegen einzelner Inhalts-Templates.

5. Inhaltstypen mit Feldern erstellen 

Die von uns zuvor analysierten Templates erstellen wir nun als neue Inhaltstypen in Drupal. Jeden dynamischen Bereich im Templates definieren wir als Feld. Eine Beispielkonfiguration könnte sein: Texttitel (Text), Text 1 (Großtext), Bilder (Datei->Bild, Mehrfach), Text 2 Optional (Großtext). Durch die Verwendung von Gruppen lassen sich die Felder im Backend logisch anordnen.

 

6. Drupal-Templates anlegen und Variabeln andocken 

In diesem Schritt passen wir nun zuerst die bereits erstellten zwei Drupal-Standard-Layout-Templates an. Sie sind aus einem beliebigen Designer-Template “zu schneiden” und stellen die Grundstruktur einer HTML-Seite dar.

html.tpl.php => Beinhaltet <HTML> <HEAD>, Bereich von CSS und Javascript 
page.tpl.php =>  Beinhaltet <BODY>, Bereich z.B. von Kopfnavigation

Danach werden die Inhalts-Templates aus den Inhaltstypen erstellt. Sie beinhalten nur den Inhaltsbereich. Also den Bereich, der sich beim Navigieren einer Seite hauptsächlich ändert. Alle von den Feldern abgeleiteten notwendigen Variabeln werden nun dynamisch mit PHP “angedockt”. Wie in Punkt 4 angesprochen, kann man im Template die Darstellung durch PHP-Logik variieren lassen. Beispielsweise kann das Vorhandensein eines Bildes durch if-else abgefragt und die Darstellung verändert werden. 

Hier eine Liste von exemplarischen Inhalts-Templates:

  • node--frontpage.tpl.php => Startseite mit Claim, Teasern und einem Slider
  • node--aboutus.tpl.php => “Über uns” mit Auflistung von Mitarbeitern
  • node--references-overview.tpl.php => Referenzen, Auflistung von verlinkten Einzelreferenzen
  • node--references-item.tpl.php => Referenz-Einzelseite, mit Text und bis zu fünf Bildern
  • node--contact.tpl.php => Kontaktseite mit Formular

Anhand dieses Prinzips lassen sich einfache, wie auch komplexe Websites strukturiert erstellen. Ebenfalls ist auf diese Art und Weise die zukünftige Erweiterungsfähigkeit einer Webseite garantiert.