Klassen-Umbenennung beim Update von Contao 4 auf 5 automatisieren

Anleitung für Notepad++

Das Update von Contao 4 auf Contao 5 bringt tiefgreifende strukturelle Änderungen mit sich. Neben der Umstellung auf Twig-Templates wurden zahlreiche CSS-Klassen umbenannt. Besonders auffällig ist die Abkehr vom Präfix .ce_ hin zu .content-. Für Entwicklerinnen und Entwickler bedeutet dies, dass bestehende Stylesheets und Template-Anpassungen umfassend angepasst werden müssen.

Gerade bei Projekten mit umfangreichem CSS- oder SCSS-Code kann diese Aufgabe schnell mehrere hundert Anpassungen umfassen. Die Bordmittel von Notepad++ reichen hier nur bedingt aus, da jede Ersetzung einzeln durchgeführt werden müsste. Eine effiziente Lösung bietet das Plugin PythonScript, mit dem sich alle Ersetzungen in einem einzigen Durchlauf automatisieren lassen.

Ein Major-Update ist immer sehr komplex und sollte nur von Profis durchgeführt werden. Die Agentur Zentral GmbH führt Updates von Contao 4 auf 5 zuverlässig durch.

Anfrage stellen

Installation des PythonScript-Plugins in Notepad++

  1. In Notepad++ den Menüpunkt Plugins → Plugin-Verwaltung öffnen.
  2. Das Plugin Python Script suchen. auswählen und installieren.
  3. Nach Abschluss der Installation Notepad++ neu starten.

Automatisierte Klassen-Umbenennung

Um die Klassennamen konsistent an die neue Contao-5-Struktur anzupassen, empfiehlt sich ein Skript, das alle Änderungen auf einen Schlag durchführt.

Python Script anlegen:

  1. Neues Script unter Plugins → Python Script → New Script anlegen.
  2. Code in neue .py-Datei eintragen und speichern.
  3. Script über Plugins → Python Script → Scripts ausführen.

Die folgende Routine zeigt ein Beispiel für häufige Ersetzungen, wie sie im Zuge des Updates erforderlich sind:

# -*- coding: utf-8 -*-
# Klassen-Umbenennung für Contao 4 → Contao 5 in Notepad++ mit PythonScript

replacements = {
    ".ce_code": ".content-code",
    ".ce_headline": ".content-headline",
    ".ce_html": ".content-html",
    ".ce_list": ".content-list",
    ".ce_text": ".content-text",
    ".ce_table": ".content-table",
    ".ce_hyperlink": ".content-hyperlink",
    ".ce_toplink": ".content-toplink",
    ".ce_image": ".content-image",
    ".ce_gallery": ".content-gallery",
    ".ce_youtube": ".content-youtube",
    ".ce_vimeo": ".content-vimeo",
    ".ce_download": ".content-download",
    ".ce_downloads": ".content-downloads",
    ".ce_markdown": ".content-markdown",
    ".ce_player": ".content-player",
    ".image_container": "figure",
    "caption": "figcaption",
    ".first": ":first-child",
    ".last": ":last-child"
}

editor.beginUndoAction()
for old, new in replacements.items():
    editor.rereplace(old, new)
editor.endUndoAction()

notepad.messageBox("Alle Ersetzungen wurden durchgeführt!", "Fertig")

Hintergrund der Änderungen

Die Umstellung auf Twig in Contao 5 bringt nicht nur eine modernere Template-Struktur mit sich, sondern auch eine konsistente Namenskonvention für CSS-Klassen. Während in Contao 4 Inhalte noch über das Präfix .ce_ („content element“) gekennzeichnet waren, setzt Contao 5 auf die einheitliche Schreibweise .content-.

Darüber hinaus wurden weitere Bezeichner angepasst, etwa zur Vereinheitlichung von Bild- und Text-Containern oder zur semantisch korrekten Auszeichnung von Bildunterschriften (caption → figcaption).

Praxis-Beispiel: Contao-4-Code zu Contao-5-Code

Um die Umstellung greifbarer zu machen, zeigt das folgende Beispiel, wie ein typischer Contao-4-Codeblock angepasst werden muss.

Alte Contao-4-Struktur: 

<div class="ce_text">
    <p>Willkommen auf unserer Website!</p>
</div>

<div class="ce_image">
    <img src="bild.jpg" alt="Beispielbild">
</div>

Angepasste Contao-5-Struktur: 

<div class="content-text">
    <p>Willkommen auf unserer Website!</p>
</div>

<div class="content-image">
    <img src="bild.jpg" alt="Beispielbild">
</div>

Durch die automatisierte Ersetzung mit dem PythonScript werden alle .ce_-Klassen wie .ce_text oder .ce_image zuverlässig in die neuen .content--Klassen umgewandelt. Dies spart nicht nur Zeit, sondern reduziert auch Fehler bei umfangreichen Projekten.

Fazit

Das Update auf Contao 5 erfordert umfassende Anpassungen im Frontend-Code, insbesondere in CSS- und SCSS-Dateien. Durch die Automatisierung der Klassennamen-Umbenennung mit Notepad++ und dem PythonScript-Plugin lassen sich diese Änderungen effizient, konsistent und reproduzierbar durchführen.

Zurück zur Blog-Übersicht