Eigene Themes in Drupal erstellen – Teil 1

Im Folgenden möchte ich zeigen, wie man ein eigenes Theme in Drupal 8 erstellt. Dabei gehen wir nicht von einem bestehenden aus, sondern beginnen ganz am Anfang. Alles was benötigt wird: Eine laufende Drupal 8 – Installation und ein Text-Editor. Ich verwende hier die Freeware „Sublime Text 3“. Notepad++ tut’s aber beispielsweise auch.

Drupal vorbereiten

Als ersten Schritt schalten wir einige Performance-Tricks aus, was uns das Arbeiten ein bisschen leichter macht. Diese würden nämlich den Quellcode so optimieren, dass er nicht oder nur mehr sehr schwer lesbar ist.

Die nötigen Einstellungen finden sich in Configuration > Performance. Hier die beiden Punkte bei „Bandwidth Optimization“ deaktivieren:

Zu beachten ist hier auch der Punkt „Clear all caches“. Diesen werden wir noch öfter benötigen.

Theme anlegen

Wenn man in Drupal auf „Appearance“ klickt, gibt es einige Themes zur Auswahl. Man unterscheidet dabei zwischen Themes für die eigentliche Homepage (Default Theme) und für den Admin-Bereich (Admin Theme). Wir kümmern uns um das Layout unserer Homepage, daher lassen wir Admin Themes einmal aus. Ziel ist, dass unser eigenes Theme in dieser Liste auftaucht. Dazu sind einige Schritte notwendig:

Ordner und Info-Datei anlegen

Damit Drupal ein Theme als solches erkennt, gibt es einige Mindestanforderungen.

Für die benötigte Ordnerstruktur legen wir einen Ordner „custom“ im Drupal-„Themes“-Ordner an. Anschließend einen Unterordner in „custom“ mit dem Namen unseres Themes – hier „theme1„:

Jedes Theme wird durch mehrere YAML-Dateien beschrieben. Die wichtigste ist jene mit dem Namen „themename.info.yml„. Daher als ersten Schritt in unserem Fall „theme1.info.yml“ im Ordner erstellen und folgendes eintragen:

name: Theme1
description: Drupal 8 Starter Theme
type: theme
core: 8.x

Nun sollte das Theme in der Auswahl von Drupal 8 bereits unter „Uninstalled“ zur Verfügung stehen – wenn auch noch ohne Formatierungen. Mit „Install and set as default“ können wir es testen.

Theme bereinigen

Obwohl wir noch keine CSS- und JavaScript-Files eingeschlossen haben, sieht man beim Betrachten des Quellcodes im Browser (bitte vorher ausloggen, sonst sieht man die CSS der Menüleiste), dass unzählige CSS-Dateien inkludiert sind. Wir wollen beispielsweise „views.module.css“ und „align.module.css“ nicht verwenden. Dazu einfach die „theme1.info.yml“ ergänzen:

stylesheets-remove:
 - core/themes/stable/css/views/views.module.css
 - core/themes/stable/css/system/components/align.module.css

Cache leeren nicht vergessen, da andernfalls (wie man im Quellcode im Browser leicht sehen kann) die Änderungen nicht übernommen werden.

CSS und JavaScript einfügen

Welche Abhängigkeiten ein Theme hat, wird über eine Datei namens „themename.libraries.yml“ gesteuert. Daher legeben wir ein neues YAML-File theme1.libraries.yml an. Dies beinhaltet alle Infos, welche CSS- und JavaScript-Dateien inkludiert sind.

global-css:
  css:
    theme:
      css/style.css: {}

Nun in “theme1.info.yml” vor “stylesheets-remove” folgendes ergänzen:

libraries:
  - theme1/global-css

global-js:
  js:
    js/main.js: {}
  dependencies:
    - core/jquery

libraries:
  - theme1/global-css
  - theme1/global-js

Start mit HTML

Vielleicht hat sich schon jemand gewundert – aber wie schafft es Drupal, bereits Inhalt auszugeben, obwohl wir nur zwei YAML-Dateien kreiert haben und noch gar keine HTML-Struktur hinterlegt haben? Ganz einfach: Wenn kein HTML-Grundgerüst zur Verfügung steht, greift Drupal auf das im Core mitgelieferte zurück, zu finden unter: core/modules/system/templates. In unserem Fall wird die Datei „page.html.twig“ verwendet.

Wenn wir die Datei verwenden wollen, editieren wir sie natürlich nicht dort, sondern kopieren sie einfach in unseren Theme-Ordner, in dem wir bereits die beiden YAML-Dateien liegen haben. Dort können wir sie anschließend ändern.

Dabei können wir übrigens gleich Drupal so einstellen, dass es Änderungen gleich übernimmt (Caching ausschalten) und uns hilfreiche Kommentare zur Theme-Entwicklung einblendet (Twig-Debugging einschalten). Eine genaue Anleitung findet sich hier: Caching deaktivieren und Debugging aktivieren in Drupal 8

Das war der erste Teil. Weitere folgen in Kürze.