So machen Sie Ihr Drupal 7-Theme fit für Drupal 9

07.12.2021 - Aktualisiert am 07.08.2023

Drupal 7 Theme Upgrade — © pixabay.com/de/

Vorsicht "angestaubt"!

Dieser Artikel ist bereits etwas in die Jahre gekommen und enthält möglicherweise Informationen, die nicht mehr dem aktuellen Stand des Themas entsprechen.

Das Theming von Drupal 9 hat sich erheblich weiterentwickelt. Das Auslaufen der Drupal 7 Version im November 2022 verlangt ein unumgängliches Upgrade. Welche Schritte Sie befolgen sollten, um Ihr Drupal 7-Theme für die neueste Version von Drupal fit zu machen, lesen Sie in unserem Blog Artikel.

Die wichtigsten Theming-Funktionen von Drupal 9

Einige der Drupal 9 Funktionen können Theme Aktualisierungen erheblich vereinfachen wie beispielsweise..

Semantisches HTML5-Markup als default
Verbesserte, sofort einsatzbereite Accessibility Features
Verwendung von Twig als Theme-Engine anstelle von PHP Template
Frühere theme_*-Funktionen und *.tpl.php-Dateien werden durch *.twig-Dateien ersetzt
Standardmäßige leistungssteigernde Funktionen (wie CSS- und JS-Aggregation)
Responsive Funktionen OOP
Anhängen von JS- und CSS-Assets durch Verwendung von Libraries (anstelle von drupal_add_css und drupal_add_js)
CSS-Dateistruktur basierend auf SMACSS & BEM
CSS3 Pseudo-Selektoren
Classy als Basis-Theme

Die Umstellung der Theme-Engine auf Twig stellt die wichtigste Änderung dar. Twig ist eine PHP-basierte kompilierte Templating-Sprache. Dies bedeutet, dass die Twig-Engine beim Rendern Ihrer Webseite das Template in ein kompiliertes PHP-template umwandelt, welches in einem geschützten Verzeichnis unter sites/default/files/php/twig gespeichert wird.

Drupal 9 Theme-Migrations-Checkliste

Ein Tool, welches die Migration von Drupal 7-Themes auf Drupal 9 (Upgrade) automatisch durchführt oder anzeigt, was der Anwender ändern muss, gibt es leider nicht.

Für die Migration muss ein komplettes Theme von Grund auf neu erstellt und Elemente aus dem D7-Theme manuell nachgebaut werden. Eine Checkliste für die Migration kann helfen, den Prozess zu vereinfachen.

Folgende Schritte sollten Sie bei der Neuerstellung des Themes beachten:

Schritt 1: Erstellen der Ordnerstruktur

Sie sollten Themes in Drupal 9 im Ordner “themes” der Drupal-Installation finden. Es ist empfehlenswert, diese zu klassifizieren, je nachdem, ob es sich um Contributed Themes oder benutzerdefinierte Themes handelt. Die Struktur sollte etwa so aussehen:

Schritt 2: Erstellen der erforderlichen Dateien

Die einzige Datei, die Drupal benötigt, um Ihr Theme zu erkennen, ist die Datei .info.yml:. Die alte .info-Datei wird nicht mehr benötigt, da sie durch .info.yml ersetzt wurde. Diese Datei folgt der yaml-Syntax. Denken Sie also daran, die Einrückung auf Leerzeichen anstelle von Tabulatoren zu setzen und diese Einrückung zu beachten.

Hier ist ein Beispiel, angenommen, wir erstellen ein Theme namens simple:

Die Einführung des "base_theme" Schlüssels ist essentiell. Mit ihm können Sie den Namen eines anderen Themes definieren, von dem Sie Eigenschaften übernehmen möchten. Wenn Sie dies nicht benötigen, müssen Sie den Schlüssel mit dem Wert "false" hinzufügen.

Schritt 3: Definieren von Regionen

Die Regionen für Drupal 9 Themes werden in der Datei theme_name.info.yml unter dem Schlüssel "regions" definiert:

Schritt 4: Erstellen und Laden von Libraries

Anstatt das alte drupal_add_js zum Hinzufügen von Javascript-Assets oder drupal_add_css zum Hinzufügen von CSS-Dateien zu verwenden, sollten Sie Libraries erstellen und laden. Um diese zu erstellen, müssen Sie eine neue Datei theme_name.libraries.yml hinzufügen und die Libraries darin definieren:

Um die Libraries zu laden, gibt es mehrere Möglichkeiten:

Schritt 5: Verschieben der Theme-Einstellungen

Haben Sie in der Drupal 7-Version Ihres Themes Breakpoints verwendet, mussten Sie das Modul Breakpoints installieren. In Drupal 9 brauchen Sie das nicht mehr, da diese Funktionalität jetzt Teil des Kerns ist. Sie müssen lediglich eine neue Datei theme_name.breakpoints.yml erstellen und dort Ihre Breakpoints hinzufügen. Zum Beispiel:

Schritt 6: Breakpoints erstellen, falls erforderlich

Haben Sie in der Drupal 7-Version Ihres Themes “Breakpoints” verwendet, mussten Sie das beigefügte Breakpoints Modul installieren. In Drupal 9 brauchen Sie das nicht mehr, da diese Funktionalität jetzt Teil des Kerns ist. Sie müssen lediglich eine neue Datei theme_name.breakpoints.yml erstellen und dort Ihre Breakpoints hinzufügen. Zum Beispiel:

Drupal 7 Themes Upgrade — © evolvingweb.ca

Schritt 7: Konvertieren von Templates nach Twig

Die Umstellung der Theme-Engine von PHP Template auf Twig bringt einige wesentliche Änderungen bei den Templates. Einige Online-Tools können Ihnen diesen Prozess erleichtern, wie z. B. https://php2twig.com/. 

In der folgenden Tabelle haben Sie eine Liste der alten und neuen Art, Vorlagen zu schreiben:

Hinweis zu Templates und Preprocess-Funktionen

In Drupal 9 existiert nur der Basis-Hook einer Preprocess-Funktion. In D7 steht Ihnen beispielsweise eine "node--event-teaser.tpl.php" und infolgedessen eine "hook_preprocess_node__event__teaser" Funktion in Ihrer template.php Datei zur Verfügung.

Auch in D9 steht Ihnen die Vorlagendatei für den Event-Teaser zur Verfügung, aber Sie erhalten nur den Basis-Hook "hook_preprocess_node". Um speziell auf Ihren Event-Teaser einzuwirken, müssen Sie deshalb eine Logik innerhalb der Basis erstellen.

Weitere Informationen über die Unterschiede zwischen PHPTemplate und Twig finden Sie hier. https://www.drupal.org/node/1918824

Jetzt können Sie loslegen und Ihre Themes neu erstellen! Weitere Hilfestellungen finden Sie bei den folgenden Quellen: