Nächste Woche findet bereits das nächste Zürcher WordPress Meetup statt. Deshalb hier die überfällige Zusammenfassung des letzten Meetups. Martin hat die Videos vor einiger Zeit auf WordPress.TV hochgeladen, sobald sie öffentlich sind, werde ich sie hier einbinden.

Das letzte Meetup fand am 26. Juni 2024 statt. Patrick Price, ein erfahrener Online-Unternehmer, hielt einen sehr faszinierenden und inspirierenden Vortrag wie es mit künstlicher Intelligenz möglich ist, eigene WordPress Plugins ohne jegliche Programmierkenntnisse zu entwickeln. Der zweite Vortrag von Marc Wieland drehte sich um «Headless WordPress».

Headless WordPress bedeutet, dass WordPress nur als Backend für die Verwaltung von Inhalten dient, während das Frontend (die Benutzeroberfläche) separat entwickelt wird, oft mit modernen Frameworks wie React oder Vue.js. Die Inhalte werden über APIs bereitgestellt, was mehr Flexibilität und bessere Performance ermöglicht, aber auch technisches Know-how erfordert.

WordPress Plugins ohne Programmierung

Patrick begann seine Karriere im Jahr 2000 bei Scout24 und gründete später eine SEO- und SEA-Agentur sowie das Unternehmen Idealizer, das als Inkubator für seine Projektideen dient. Obwohl er nie selbst programmieren gelernt hat, arbeitet Patrick seit 15 Jahren intensiv mit WordPress und nutzt seine Flexibilität durch Plugins.

Patrick Price Zürich WordPress Meetup Q2/2024
Bild: Patrick Price am Q2/2024 WordPress Meetup in Zürich

Die Herausforderungen bei der Entwicklung von vergleiche.ch

Im Vortrag ging Patrick detailliert auf seine Erfahrungen mit WordPress-basierten Projekten ein. Ein zentrales Beispiel war sein Preisvergleichsportal vergleiche.ch, das er mit grossem finanziellen Aufwand entwickelte, insbesondere durch die Zusammenarbeit mit einem ukrainischen Entwicklerteam. Der Ukraine-Krieg führte jedoch zu Herausforderungen, da er seine Entwickler verlor und keine sofortige Ersatzlösung fand. Dies verdeutlichte die Abhängigkeit von externen Entwicklern und die Schwierigkeiten, bestehende Projekte weiterzuführen, ohne dass neue Entwickler umfassende Anpassungen am Code vornehmen müssen.

Einsatz von ChatGPT zur Automatisierung von Aufgaben

Ein entscheidender Wendepunkt war für Patrick die Entdeckung von KI-Tools wie ChatGPT, die ihm halfen, Programmierprobleme zu lösen. Er schilderte, wie er mit ChatGPT ein Skript entwickelte, um Daten aus einer API in ein CSV-Format zu konvertieren, obwohl er keine Entwickler im Team hatte. Innerhalb von wenigen Stunden konnte er diese Aufgabe erfolgreich automatisieren. Dies weckte in ihm die Neugier auf weitere Möglichkeiten, KI zur Unterstützung seiner Projekte einzusetzen.

Der Bedtime Story Generator: Kreative Geschichten mit KI

Im weiteren Verlauf des Vortrags stellte Patrick ein von ihm entwickeltes Plugin vor, den «Bedtime Story Generator for Children», der mithilfe von KI Gute-Nacht-Geschichten generiert. Die Geschichten können durch Variablen wie das Alter der Kinder, den gewünschten Inhalt und sogar die Moral der Geschichte angepasst werden. Das Plugin generiert zudem passende Bilder und Audioinhalte, die automatisch in den WordPress-Beitrag integriert werden. Er demonstrierte live, wie das Plugin eine Geschichte erstellte, die auf den Wünschen des Publikums basierte. Das gesamte Plugin, das normalerweise Tausende von Franken Entwicklungskosten generieren würde, erstellte er mithilfe von KI und einem ChatGPT Plus Abonnement.

Effiziente Strukturierung von WordPress-Plugins

Ein weiteres Kernthema des Vortrags war die effiziente Strukturierung von Plugins und Code in WordPress. Patrick erläuterte, wie man KI-Modelle so trainiert, dass sie spezifische Aufgaben im Kontext von WordPress-Entwicklungen bewältigen können. Dabei betonte er die Wichtigkeit einer klaren und strukturierten Entwicklung, bei der jede Komponente, sei es API, CSS oder HTML, in separate Threads aufgeteilt wird. Dies erleichtere den Überblick und die Wartung von grösseren Projekten.

Automatische Textoptimierung für vergleiche.ch

Patrick zeigte schliesslich einige fortgeschrittene Funktionen seines Plugins, wie etwa die automatische Optimierung von Promotions-Texten, die er für vergleiche.ch nutzt. Mittels eines einzigen Klicks kann er längere und doppelte Inhalte kürzen und individualisieren lassen, was ihm erhebliche Zeit spart und die Einzigartigkeit seines Contents erhöht.

Praxistipps zur WordPress-Entwicklung mit KI

Der Vortrag schloss mit einer Fragerunde, in der Patrick betonte, dass seine Arbeit primär auf dem Teilen von Wissen basiere, und er keine Absicht habe, seine Plugins kommerziell zu vermarkten. Dennoch zeigte er auf, wie man Plugins entwickeln und über Marktplätze anbieten könnte. Seine praxisnahen Tipps und Beispiele gaben den Zuhörern wertvolle Einblicke in den Einsatz von KI für die WordPress-Entwicklung.

Headless WordPress

Marc Wieland, ein erfahrener WordPress-Entwickler und digitaler Nomade, stellte den «Headless» Ansatz und seine Erfahrungen bei der Umsetzung grosser Projekte anhand des Blogs des Schweizerischen Nationalmuseums vor. Seit 2018 arbeitet Marc von unterwegs und ist derzeit bei der Firma whatwedeo in Bern tätig. Mit über zehn Jahren WordPress-Erfahrung führte er das Publikum durch die komplexen technischen Herausforderungen, die bei der Umsetzung von WordPress-Projekten in einer Agenturumgebung auftreten.

Video: Screen Recording Blog Nationalmuseum

Einführung in das Projekt: Blog Nationalmuseum

Marc stellte den Blogs des Schweizerischen Nationalmuseums vor, das in drei Sprachen (Deutsch, Französisch, Englisch) verfügbar ist. Das Design wurde komplett überarbeitet, und der Blog bietet nun eine benutzerfreundliche Oberfläche mit integrierter Suchfunktion. Der Blog basiert auf dem Gutenberg-Editor und verwendet das Advanced Custom Fields Plugin (ACF) zur Erstellung und Bearbeitung von Inhalten.

Die Herausforderung bestand darin, 1.000 bestehende Blogartikel zu migrieren und das bisherige System durch eine moderne, ansprechende Benutzeroberfläche zu ersetzen. Dieser Prozess wurde durch Scripting automatisiert, was den Migrationsprozess erheblich beschleunigte.

Einsatz moderner Technologien

Ein zentrales Thema des Vortrags war der Einsatz von «Headless» WordPress. Hierbei handelt es sich um ein Konzept, bei dem das Backend (WordPress) und das Frontend (in diesem Fall Vue.js) entkoppelt werden. Inhalte werden über die WordPress REST-API bereitgestellt und dann durch ein Framework wie Vue.js im Frontend dargestellt. Marc zeigte, wie diese Architektur den Vorteil bietet, dass das Frontend unabhängig vom Backend aktualisiert werden kann. Allerdings wies er darauf hin, dass dieser Ansatz komplex ist und nicht immer einen Vorteil bietet – insbesondere bei kleineren Projekten oder solchen ohne hohe Anforderungen an Flexibilität und Skalierbarkeit.

Technische Infrastruktur und DevOps-Ansatz

Ein wesentlicher Aspekt der Präsentation war der Einsatz von DevOps-Praktiken, also die Zusammenarbeit zwischen Entwicklungs- (Dev) und IT-Betriebsteams (Ops), sowie Automatisierung und kontinuierliche «Lieferprozesse». Marc erläuterte, wie sie ein eigenes DevOps-Team haben, das sich um die Verwaltung der Server und des Hostings kümmert. Alle Entwicklungsprozesse laufen in Docker-Containern, was bedeutet, dass die Entwicklungsumgebung exakt der Produktionsumgebung entspricht. Dies stellt sicher, dass es keine Diskrepanzen zwischen den Umgebungen gibt, was Fehler minimiert.

Für die Versionierung und das Deployment verwenden sie GitLab, wodurch automatische Tests, Sicherheitschecks und Coding-Standards sichergestellt werden, bevor Änderungen auf die Produktionsumgebung übertragen werden. Dies ermöglicht eine saubere und strukturierte Arbeitsweise, insbesondere in Teams.

API-Integration und Suchfunktion mit Algolia

Marc betonte den Einsatz von externen APIs und Tools, die den Blog effizienter und benutzerfreundlicher machen. So wird die Suche im Blog nicht über die native WordPress-Suche, sondern über den externen Dienst Algolia realisiert, der eine höhere Relevanz und schnellere Ergebnisse liefert. Zudem werden API-Aufrufe gecached, um die Performance zu verbessern. Der Vorteil dieser API-basierten Struktur ist die Skalierbarkeit und Flexibilität in der Handhabung grosser Datenmengen.

Headless Architektur: MVP-Ansatz und Mehrsprachigkeit

In der Headless-Architektur verwenden sie ein Model-View-Controller (MVC) Konzept, wobei das «View» in diesem Fall wegfällt, da Vue.js das Rendering übernimmt. WordPress dient in diesem Szenario als Content-Management-System, das die Inhalte über die API bereitstellt. Diese werden dann im Frontend durch Vue.js verarbeitet und dargestellt. Marc ging auch auf die Mehrsprachigkeitsanforderungen ein, die durch das Plugin Polylang realisiert werden. Polylang erwies sich als einfacher und stabiler als das weit verbreitete WPML, das Marc als zu komplex und überladen empfand.

Herausforderungen und Best Practices

Ein grosses Thema im Vortrag war die Komplexität von Headless-Systemen. Marc betonte, dass dieser Ansatz oft viel Logik und Struktur erfordert, was den Entwicklungsprozess komplizierter macht. Bei der Umsetzung des Nationalmuseum-Blogs wurde bewusst auf eigene Blöcke im Gutenberg-Editor verzichtet, da diese zu aufwendig in der Entwicklung waren. Stattdessen wurden grössere, vordefinierte Blöcke eingesetzt, um die Komplexität zu reduzieren.

Er zeigte auch, wie sie den Code strukturierten und modularisierten, um ihn wartbar und verständlich zu halten. So wurde zum Beispiel die functions.php in viele kleine Klassen aufgeteilt, um die Übersicht zu wahren und neue Entwickler leichter einarbeiten zu können.

Fragen und Diskussion

In der anschliessenden Fragerunde wurden verschiedene Themen angesprochen, darunter der Einsatz von Headless-Systemen für E-Commerce-Seiten. Marc erklärte, dass auch E-Commerce-Seiten «Headless» realisiert werden können, dies jedoch oft nicht die beste Wahl ist, da es die Entwicklung komplizierter macht und keine signifikanten Vorteile bietet.

Ein weiteres Thema war die Sicherheit der API und der Einsatz von Composer zur Versionierung und Verwaltung von Plugins. Marc erklärte, dass sie WordPress und alle Third-Party-Plugins über Composer verwalten, was eine saubere Versionierung und ein einfaches Rollback ermöglicht.

Zum Abschluss betonte er, dass sie bei dem Blog-Projekt keine automatisierten Tests einsetzen, sondern sich auf manuelle Tests und Abnahmeprozesse mit dem Kunden verlassen. Dies ist ausreichend, da der Blog nur wenige Male im Jahr aktualisiert wird.

Fazit

Das WordPress Meetup Zürich am 26. Juni 2024 bot spannende Einblicke in zwei unterschiedliche, aber gleichermassen wertvolle Ansätze der WordPress-Entwicklung. Patrick Price demonstrierte, wie künstliche Intelligenz, insbesondere ChatGPT, selbst für technisch weniger versierte Anwender eine wertvolle Hilfe bei der Entwicklung individueller WordPress-Lösungen sein kann. Sein Einsatz von KI für Projekte wie den Bedtime Story Generator verdeutlichte das Potenzial, Routineaufgaben effizient zu automatisieren und kreative Ansätze zur Lösung technischer Herausforderungen zu finden.

Marc Wielands Vortrag bot tiefe Einblicke in die technischen Aspekte von Headless WordPress und die damit verbundenen Herausforderungen bei grossen Projekten wie dem Blog des Schweizerischen Nationalmuseums. Er zeigte auf, wie moderne Tools und Technologien wie Docker, GitLab und Algolia die Entwicklung und Wartung komplexer Websites erleichtern, betonte aber auch die zusätzlichen Komplexitäten eines Headless-Ansatzes. Seine Praxisbeispiele machten deutlich, wie wichtig es ist, klare Strukturen und Automatisierung in grossen Projekten zu etablieren, um Stabilität und Skalierbarkeit zu gewährleisten.

Beide Vorträge zeigten eindrucksvoll, wie vielfältig die Möglichkeiten mit WordPress in Kombination mit modernen Tools sind – sei es durch den Einsatz von KI oder durch komplexe Headless-Architekturen. Egal ob für kleinere Projekte oder gross angelegte Lösungen: Das Meetup verdeutlichte, dass WordPress auch in hochkomplexen Umgebungen eine tragende Rolle spielen kann und sich durch den Einsatz innovativer Technologien flexibel an unterschiedliche Anforderungen anpassen lässt.

Schreib einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert