Comic On! – Tourneetheater

Comic On! ist ein Tourneetheater aus Köln. Das Ensemble spielt seit über 35 Jahren Präventionstheater zu Mobbing, Medienkompetenz und Radikalisierung direkt an Schulen bundesweit: über 30 Theaterstücke, Produktionen für Klasse 3 bis 11 und Workshops für Grund- und weiterführende Schulen. 2025 habe ich die Website comic-on.de auf WordPress mit Oxygen 6.2 entwickelt, mit drei eigenen Post Types, einem eigenen Plugin für den Instagram-Feed und meinem eigenen Termin-Plugin MIZ-SHG Bridge, das die Tournee-Termine aus der Tourneeplanung importiert. Das Design stammt von Catrin Roth, ich habe es technisch umgesetzt.

Die Aufgabe

Comic On! spielt direkt an Schulen im gesamten Bundesgebiet. Die Website muss deshalb zwei Dinge leisten: das Programm aus Produktionen und Workshops für Schulen nachvollziehbar darstellen und die Tournee-Termine aktuell halten, obwohl die Planung außerhalb von WordPress in der Tourneeplanung MIZ-SHG stattfindet. Terminseiten von Hand nachzupflegen war keine Option, weil sich das Programm laufend ändert.

Dazu kamen die weiteren Inhalte einer Theaterseite: ein Team mit 15 Mitgliedern, Bereiche für Fördern & Spenden und Partner, Datenschutzerklärung und Impressum, ein Consent-Management und ein Instagram-Feed auf der Startseite. Das Team von Comic On! soll Produktionen, Workshops, Teammitglieder und Termine selbst pflegen können, ohne Layouts im Builder anzufassen.

Die Umsetzung

Aufbau in Oxygen 6.2 mit Zero Theme

Die Seite läuft auf WordPress mit Oxygen 6.2 und dem Oxygen Zero Theme, serverseitig auf PHP 8.4 und Apache. Das Theme bleibt bewusst leer, Oxygen liefert Layout, Templates und Styling. Den Entwurf von Catrin Roth habe ich in Oxygen übertragen: Startseite, Übersichten, Einzelseiten für Produktionen und Workshops, die Teamseite sowie die Bereiche Fördern & Spenden und Partner.

Drei eigene Post Types

Die Inhalte liegen nicht in freien Seiten, sondern in drei eigenen Post Types. Der Post Type produktionen enthält die vier Produktionen, darunter RADIKAL, upDATE und R@USGEMOBBT 2.0, jede mit Einzelseite unter /produktionen/<slug>/; die Gesamtübersicht liegt unter /produktionen-ubersicht/. Der Post Type workshop bündelt die drei Workshops mit Einzelseiten unter /workshop/<slug>/ und der Übersicht /workshops/. Der Post Type teammitglied enthält die 15 Teammitglieder, die auf /team/ ausgegeben werden. Strukturierte Felder statt Fließtext sorgen dafür, dass neue Produktionen oder Teammitglieder im Backend angelegt werden und in Übersichten und Einzelseiten erscheinen, ohne dass jemand ein Layout anfasst.

Tournee-Termine aus MIZ-SHG

Die Tourneeplanung von Comic On! läuft in MIZ-SHG. Dafür habe ich das Plugin MIZ-SHG Bridge entwickelt, aktuell in Version 4.0.1. Es liest die CSV-Exportdatei dieser Planung ein, standardmäßig aus wp-content/uploads/csvdata/webexport.csv. Der Import startet, sobald sich die Datei ändert, oder manuell per WP-CLI mit wp msb import, bei Bedarf mit –force. Auf /termine/ stellt das Plugin die Termine als durchsuchbare Tabelle mit den Spalten Datum, Tag, Stadt, Stück und Option dar. Es gibt eine Suche nach Datum und den Filter „Nur freie Termine anzeigen“. Freie Termine erhalten einen Button „Freier Termin“, der auf eine konfigurierbare Kontakt-URL führt. Eingebunden wird das Ganze über die Shortcodes msb_table, msb_search und msb_results, die beiden letzten mit einem Gruppen-Parameter. Das Plugin nutzt die Textdomain msb und bringt eigene Sprachdateien mit.

Instagram-Feed als Oxygen-Element

Für den Instagram-Feed auf der Startseite habe ich das Plugin „Instagram Feed für Oxygen“ geschrieben. Es registriert den Feed als eigenes Oxygen-Element inklusive Dynamic Data. So lässt sich der Feed im Builder wie jedes andere Element platzieren und gestalten, statt ein fremdes Widget per Embed-Code einzubauen.

SEO und strukturierte Daten

Die Seite liefert JSON-LD für Organization, ContactPoint und WebSite aus. Suchmaschinen erhalten damit Name, Kontaktweg und Website-Identität des Theaters in maschinenlesbarer Form.

Performance, Medien und Datenschutz

WPvivid Imgoptim übernimmt die WebP-Auslieferung und das Lazy Loading der Bilder. Das Consent-Management läuft über Usercentrics. Datenschutzerklärung und Impressum sind eigene Seiten.

Technik im Detail

• WordPress mit Oxygen 6.2 und Oxygen Zero Theme
• PHP 8.4 auf Apache
• Drei eigene Post Types: produktionen (4 Einträge), workshop (3 Einträge), teammitglied (15 Einträge)
• Übersichtsseiten /produktionen-ubersicht/, /workshops/, /team/ und /termine/
• Eigenes Plugin „Instagram Feed für Oxygen“: Oxygen-Element mit Dynamic Data auf der Startseite
• Eigenes Plugin MIZ-SHG Bridge 4.0.1: CSV-Import aus wp-content/uploads/csvdata/webexport.csv bei Dateiänderung oder per WP-CLI (wp msb import, –force)
• MIZ-SHG Bridge: Tabelle mit Spalten Datum, Tag, Stadt, Stück, Option; Suche nach Datum; Filter „Nur freie Termine anzeigen“; Button „Freier Termin“ mit konfigurierbarer Kontakt-URL
• MIZ-SHG Bridge: Shortcodes msb_table, msb_search und msb_results, Textdomain msb mit Sprachdateien
• JSON-LD: Organization, ContactPoint, WebSite
• WPvivid Imgoptim: WebP-Auslieferung und Lazy Loading
• Consent-Management: Usercentrics
• Bereiche Fördern & Spenden und Partner; Seiten Termine, Team, Datenschutzerklärung, Impressum

Design und Rollen

Design: Catrin Roth. Sie hat das Webdesign entworfen, ich habe es 2025 in Oxygen umgesetzt und die Entwicklung übernommen: Post Types, das Instagram-Plugin, das eigene Termin-Plugin MIZ-SHG Bridge, strukturierte Daten, Bildoptimierung und Consent-Einbindung. Rolle: Entwicklung und Designumsetzung.

Das Ergebnis

Das Team von Comic On! pflegt Produktionen, Workshops, Teammitglieder und Termine selbst über strukturierte Felder. Die Tournee-Termine kommen aus der Tourneeplanung auf die Website, ohne dass Seiten händisch umgebaut werden müssen. Ein wechselndes Programm ist damit Routine statt Pflegeproblem. Wie ich solche Projekte angehe, steht unter Websites und Plugins.