Umstellung der Website mg-heute.de von Classic Theme auf Block Theme auf der FrOSCon 2025
Auf der FrOSCon 2025 haben wir dieses Jahr einen Workshop eingerichtet, in dem wir zeigen wollten, wie man eine Website von einem klassischen Theme auf ein Block Theme (in dem Fall Twenty Twenty-Five) umstellt. In diesem Beitrag beschreibe ich den Verlauf und außerdem enthält der Beitrag die Video-Aufzeichnungen.
Die FrOSCon 2025 in St. Augustin
Jedes Jahr veranstaltet der Fachbereich Informatik der Hochschule Bonn-Rhein-Sieg mit Hilfe des FrOSCon e.V. ein spannendes Programm mit Vorträgen und Workshops für Besucher aller Altersklassen, die Freie Software nutzen, kennenlernen wollen oder selbst entwickeln.
Im Rahmen der FrOSCon gibt es auch einen Raum, in dem auf verschiedene Dinge im Zusammenhang mit WordPress eingegangen wird.
Im Rahmen der FrOSCon gibt es auch einen WordPress-Raum. Dieses Jahr gab es interessante Vorträge von Thomas Brühl, Simon Kraft, Bettina Krams und Robert Windisch. Außerdem fanden zwei Workshops statt: Podcast & WordPress mit Magnus van Dyke und Peter Dolfen sowie dieser Workshop zur Umstellung einer Website von einem klassischen Theme auf ein Block Theme. Fast so eine Art „Mini-WordCamp“.
Der Status Quo vor der Umstellung der Website
Anliegen von Harald Wendler, Betreiber der Website mg-heute.de ist es, „parteilich nicht gebunden, über das lokale Geschehen zu berichten, auch mein persönliches Fazit öffentlich zu machen und damit zur Diskussion anzuregen.“
Es handelt sich also um eine regionale Nachrichten-Website für Mönchengladbach, bei der Beiträge nach verschiedenen Gesichtspunkten (z. B. „Kurznachrichten“, „Soziales“, „Wirtschaft“ etc.) kategorisiert werden.
Auf der Website mg-heute.de kam bis zur Umstellung das klassische Theme MH Newsdesk in der Pro-Version zum Einsatz. Im Zusammenhang mit dem Theme MH Newsdesk wurden Beiträge auf der Startseite und auf Kategorieseiten gefiltert nach Kategorie dargestellt. Dazu wurden entsprechende Widgets des Themes verwendet, die recht aufwendig sind und bei einem Block Theme wie Twenty Twenty-Five (TT5) nicht mehr zur Verfügung standen.
Daher mussten diese Beitragsübersichten mit dem Abfrage-Block (Query Loop) nachgebaut werden.
Udo Meisen hat netterweise den Part übernommen, eine Entwicklungsseite einzurichten, so dass wir am Sonntag, den 17.8. direkt loslegen konnten. Außerdem hat Udo Meisen auch bei der Entwicklung der Website mit Twenty Twenty-Five mit Rat und Tat bei dem Workshop auf der FrOSCon unerstützt.
Vorbereitung der Umstellung
- Mehrere unterschiedliche Sicherungen erstellen
- Erstellung einer Entwicklungsumgebung auf dem Server oder lokal (z. B. mit local: https://localwp.com/
- Struktur der aktuellen Website analysieren
- Header mit Menü
- Aufbau des Contents (welche Templates werden benötigt)
- Footer
- Farben und Schriften
- Erstellung der wesentlichen Komponenten (z. B. Query Loops) auf der lokalen Entwicklungsumgebung
Umstellung auf TT5 – Verlauf des Workshops
- Entwicklungsumgebung auf dem Server erstellen (Danke an Udo Meisen)
- Twenty Twenty-Five (TT5) installieren und aktivieren
- überflüssige Plugins deaktivieren
- Installation und Aktivierung „Create Block Theme“ (Vorsicht bei „Save Changes to Theme“ – immer vorher erst sichern)
- Child Theme mit „Create Block Theme“ erstellen
- Anpassungen im Website-Editor durchführen:
- Stil,
- Vorlagen,
- Templates,
- Header,
- Footer
- Testen der neuen Website in verschiedenen Browsern und auf unterschiedlichen Geräten
Aufzeichnungen (Episoden) mit dem Verlauf der Umstellung
Info
Info: Leider sind Anmerkungen oder Reaktionen aus dem Publikum in den Videos (Aufzeichnungen) meistens nicht gut zu hören.
1. Epsiode
- Status Quo (alte Website)
- Installation und Aktivierung von Twenty Twenty-Five (TT5)
- Installation und Aktivierung von „Create Block Theme“
- Erstellung des Child Themes
- Anpassungen im Website-Editor durchführen:
- Farbe
- Schrift
- Layout
- Anpassung des Seiten-Templates
- Erste Patterns (Vorlagen) erstellen
2. Episode
- Erstellung der Startseite
- Modifizierung des Seiten-Templates
- Erstellung des Templates „Kategorie-Archive“
- Anpassung des Headers
- Anpassung des Footers
3. Episode
- Gruppe mit Logo, Website-Titel und Website-Untertitel über dem Header
- Custom CSS (Zusätzliches CSS)
- Modifizierung des Footers
- Erstellung des Templates „Datums-Archive“
- „Aufräumen“ der Navigation
- Installation und Aktivierung des Plugins Dynamic Header & Navigation for Block Themes
- Anpassungen der Einstellungen in dem Plugin
- Suche im Menü (verschiedene Optionen)
- Überprüfung der mobilen Darstellung
Nachbearbeitung:
Natürlich können im Rahmen eines Workshops nicht alle Anforderungen an eine Website bis ins letzte Detail optimiert werden. Daher nachfolgend einige Dinge, die ich nach Beendigung des Workshops in Abstimmung mit Harald Wendler, dem Eigentümer der Domain mg-heute.de, durchgeführt habe:
- Breite des Contents auf der Startseite vergrößert.
- Die „Suche“ als Menüpunkt statt Suche direkt im Menü wegen Design-Problemen. Es gibt jetzt eine Seite „Suche“ auf der dann Suchbegriffe eingegeben werden können.
- Korrigiert: Bei dem Kategorien-Template und Datum-Template war bei Abfragetyp „Individuell“ und nicht „Standard“ angegeben, so dass egal welche Auswahl getroffen wurde, alle Beiträge angezeigt werden.
- Verbessert: Farben bei Paginierung (sowohl Standard als auch bei Hover)
- Die Website scheint jetzt auch weitestgehend barrierefrei zu sein.
- Darstellung von Datum, Autor und Kategorien in den Query-Loops optimiert
- Verlinkung von Bild und Titel zugefügt
- Bildbeschreibung beim Einzelbeitrag über ein separates Plugin automatisiert zugefügt.
- Bilddarstellung im Template Einzel-Beitrag optimiert (statt Standard-4:3 – Original)
- Todo:
- Teilweise müsste noch die Schriftgröße z. B. bei der Anzeige der Kategorien wegen Barrierefreiheit verändert werden.
- Bei den Bildern (Einzelbeitrag bzw. Archive) ist der Platz nach oben bzw. unten je nach gewähltem Bild zu groß.
Fazit
Es hat richtig viel Spaß gemacht, die Website umzustellen und ich habe dabei wieder viel gelernt. Allerdings waren die Anforderungen speziell an die Query Loops sicher nicht trivial, so dass diese Umstellung ohne eine vorherige Erstellung der Website auf einem lokalen Server nicht im verfügbaren Zeitrahmen möglich gewesen wäre. Sicherlich ist der Aufwand bei einer Website mit ein paar Unterseiten ohne Query Loops wesentlich geringer. Diese Umstellung hat mir aber auch wieder gezeigt, wie unglaublich flexibel Block Themes sind und ich kann nur dazu ermutigen, sich damit zu beschäftigen.
Links und Quellen
- https://wordpress.tv/2025/09/03/moving-a-website-from-classic-to-a-block-theme/
- https://de.wordpress.org/plugins/shrinking-logo-sticky-header/
- https://froscon.org/
- https://programm.froscon.org/froscon2025/schedule/
- https://mg-heute.de/
- https://wordpress.tv/2025/09/26/mastering-the-query-loop-block-in-wordpress/
Weitere Beiträge zum Thema
- News aus dem WordPress-Universum – 2/2026
- Child Theme mit Create Block Theme erstellen
- ARIA-Attribute zur Verbesserung der Barrierefreiheit
- Block Theme: Template-Teil in Template einfügen
- WordPress 7.0: Was ist geplant?
Wir freuen uns über eine Kontaktaufnahme
Was hältst du davon?
Wir hoffen, dieser Beitrag hat dir gefallen und wir würden uns über einen Kommentar freuen. Auch über Erweiterungen, Korrekturen, Hinweise oder sonstige Anmerkungen freuen wir uns sehr.
Newsletter: Wenn du über unsere neuesten Beiträge und Neuigkeiten rund um WordPress informiert werden möchtest, kannst du dich gerne bei unserem kostenlosen Newsletter anmelden. Hier die bisher versendeten Newsletter
Blog: Auf der folgenden Seite findest du weitere interessante Beiträge sortiert nach Kategorien und Schlagwörtern.
Schreibe einen Kommentar