Mit KI-Tools ein WordPress-Plugin erstellen

Da KI in unserer heutigen Welt so präsent ist, dachten wir, es wäre interessant zu untersuchen, wie Entwickler diese Tools nutzen können, um WordPress-Plugins zu erstellen oder zu verbessern. Dieser Beitrag führt dich Schritt für Schritt durch die Erstellung eines WordPress-Plugins mit dem beliebten KI-Codierassistenten Cursor.

Auch wenn KI ein zuverlässiger Assistent sein kann, ist sie kein vollständiger Ersatz für menschliches Fachwissen. Ein/e erfahrene/r Entwickler/in muss die Ergebnisse noch überprüfen, Fehler finden, die Leistung optimieren und sicherstellen, dass der Code sicher und skalierbar ist.

Das heißt, wir befinden uns eindeutig im Zeitalter der natürlichsprachlichen Programmierung. Du wirst wahrscheinlich kein komplettes CMS mit einem einzigen Prompt erstellen können – und erwarte auch keinen vollwertigen Page Builder – aber KI kann viele Teile des Prozesses beschleunigen. Sogar Low-Code-Enthusiasten können davon profitieren, während fortgeschrittene Entwickler intelligentere und schnellere Wege finden, um zu entwickeln.

Überblick über KI-Coding-Tools

Unabhängig vom verwendeten Tool, ob online oder am Desktop, haben die meisten KI-Codegeneratoren Folgendes gemeinsam:

• Sie haben riesige Datenmengen aufgenommen und sind auf Code-Repositories trainiert worden.
• Sie bieten automatische Vervollständigung und intelligente Codevorschläge, die Zeit sparen.
• Sie beherrschen viele Programmiersprachen.
• Sie sind kontextbewusst, d.h. sie können die Struktur deiner Codebasis verstehen.
• Sie interpretieren natürlichsprachliche Eingabeaufforderungen, selbst bei kleinen Tippfehlern.
• Bei einigen kannst du zwischen verschiedenen großen Sprachmodellen (LLMs) wechseln.
• Die meisten unterstützen Plugin-Systeme oder Erweiterungen.
• Viele enthalten Tools zum Debuggen und Refactoring.

Wer sind also die wichtigsten Akteure im Bereich der KI-Programmierung?

1. ChatGPT: Der bekannteste Name in der KI-Branche im Moment. ChatGPT muss nicht eingerichtet werden und kann Code generieren, erklären, was er tut, und auf Folgefragen antworten – alles an einem Ort.
2. GitHub Copilot: Copilot wurde von GitHub und OpenAI entwickelt und lässt sich direkt in deine Lieblings-IDEs integrieren und schlägt dir während der Eingabe Code in Echtzeit vor. Es ist wie Pair Programming mit einem KI-Entwickler.
3. Grok: Ähnlich wie ChatGPT und Claude ist Grok ein Tool von xAI, das für X-Nutzer/innen zur Verfügung steht und für seine Einstellung bekannt ist.
4. Gemini: Dies ist Googles Familie von universellen KI-gestützten Tools, die ChatGPT ähneln.
5. Windsurf: Eine IDE, die sich darauf spezialisiert hat, die Bedürfnisse von Entwicklern zu antizipieren.

Ein paar Worte zur Verwendung von Cursor AI

Für die Erstellung unseres Plugins haben wir uns für Cursor AI entschieden, ein wachsender Favorit unter Entwicklern. Cursor AI ist eine Abspaltung der VSCode IDE, deshalb sieht sie vertraut aus und fühlt sich vertraut an. Da sie flexibel ist, können deine VSCode-Einstellungen und Vorlieben in Cursor AI importiert werden.

Als Open-Source-IDE mit vollem Funktionsumfang gibt es viele Erweiterungen und zahlreiche Möglichkeiten, auf die Code-Dokumentation zuzugreifen.

Der Chat von Cursor hat mehrere Modi, die jeweils für eine bestimmte Aufgabe optimiert sind.

Du kannst mit der Modusauswahl (Cmd+.) oder über Tastaturkürzel zwischen den Modi wechseln:

• Fragemodus: Am besten geeignet für schnelle Fragen, Erklärungen oder die Planung von Funktionen. Du kannst z. B. eingeben: „Welche Programmiersprache wird in dieser Codebasis verwendet?“ und erhältst eine kontextbezogene Antwort auf der Grundlage deiner geöffneten Dateien. Du erreichst ihn mit Cmd+L (Mac) oder Ctrl+L (Windows/Linux).
• Agent-Modus: Ideal, wenn du möchtest, dass Cursor deine gesamte Codebasis durchforstet und umfassendere Änderungen vornimmt, z. B. das Erzeugen von Dateien, das Implementieren einer neuen Funktion oder das Refactoring. Du kannst z.B. sagen: „Erstelle eine Dokumentationsdatei basierend auf dem, was in /plugins/contentwriter steht. Löse diesen Modus mit Cmd+I oder Ctrl+I aus.“
• Manueller Modus: Verwende diesen Modus, wenn du mehr Kontrolle haben willst und die KI nur innerhalb einer bestimmten Datei oder eines bestimmten Snippets arbeiten soll. Du könntest sie z.B. bitten, “ theme.json mit den Komponenten aus ../docs zu überarbeiten.“ Dieser Modus wird automatisch aktiviert, wenn du die Bearbeitung direkt oder über die Befehlspalette beginnst.

Plugin-Spin-up-Workflow

Wenn du bisher nur ChatGPT zum Schreiben deines Codes benutzt hast, verpasst du vielleicht, was die KI-Codeunterstützung alles kann. Zwar können allgemeine KI-Tools ein gültiges WordPress-Plugin erstellen, aber das ist sicher nicht der effizienteste Weg, um Code zu testen oder zu debuggen.

Hier kommen Tools wie Cursor AI ins Spiel – sie kombinieren KI mit einer vollwertigen IDE, um dich durch einen strukturierten, entwicklerzentrierten Arbeitsablauf zu führen.

Ein guter Einstieg in die Arbeit mit KI-Assistenten ist es, sie mit einer Aufgabe zu betrauen, mit der du bereits vertraut bist. Wähle ein kleines, gut überschaubares Projekt. Stürze dich nicht gleich in komplexe Funktionen oder die Entwicklung umfangreicher Plugins. Und erwarte auf keinen Fall, dass die KI dein ganzes Plugin auf einen einzigen vagen Prompt hin entwickelt. Wie bei jeder anderen Entwicklungsaufgabe auch, solltest du zunächst deine Ziele in einfacher Sprache niederschreiben.

In dieser Anleitung werden wir ein Plugin namens Custom Writer erstellen, das eine neue Benutzerrolle in WordPress registriert. Diese Rolle kann Beiträge erstellen und bearbeiten, aber sie sollte keine Beiträge löschen oder auf andere Beitragstypen zugreifen können.

Schritt 1: Öffne das Plugin-Verzeichnis

Starte Cursor und wähle Datei > Ordner öffnen, um zu deinem /wp-content/plugins Verzeichnis zu navigieren. Damit ist die Grundlage für die Erstellung deines Plugins geschaffen.

Schritt 2: Starte eine neue Chatsitzung

Drücke Cmd + Shift + L (oder Ctrl + Shift + L unter Windows), um einen neuen Chat zu beginnen.

Wechsle in den Fragemodus, indem du Cmd + L / Ctrl + L drückst, damit wir mit einer Planungsaufforderung beginnen können. In diesem Modus hilft dir Cursor, deine Idee zu durchdenken, ohne gleich zum Code zu springen.

Über der Haupteingabeaufforderung siehst du ein Feld mit der Aufschrift Kontext hinzufügen. Hier kannst du dein Ziel vollständig beschreiben. Sei genau, auch wenn deine Rechtschreibung nicht perfekt ist – Cursor ist nachsichtig.

Wir geben Folgendes ein:

Achte auf das Schlüsselwort @WordPress – damit wird Cursor angewiesen, auf die offizielle WordPress-Dokumentation zu verweisen. Das ist eine der einfachsten Methoden, um sicherzustellen, dass dein Plugin den Best Practices entspricht.

Schritt 3: Überprüfe die Markdown-Prompts

Sobald du auf Senden drückst, antwortet Cursor mit einem ausführlichen Dokument markdown. Darin wird alles beschrieben, was dein Plugin tun sollte – vom Einrichten von Hooks bis zum Aufräumen nach der Deinstallation.

Hier ist ein Schnappschuss von dem, was Cursor beinhaltet:

• Plugin-Headerdaten (Name, Version, Lizenz)
• Codestruktur (eine einzelne .php Datei in einem eigenen Plugin-Ordner)
• Rollenerstellung mit add_role()
• Spezifischen Fähigkeiten (edit_posts, publish_posts, etc.)
• Hooks für die Aktivierung, Deaktivierung und Deinstallation
• Empfehlungen zu Sicherheit, Leistung und Tests

Du kannst die Prompts anpassen, bevor du fortfährst, aber wir sind mit ihnen so zufrieden, wie sie sind.

Schritt 4: In den Agentmodus wechseln und das Plugin erstellen

Jetzt ist es an der Zeit, den Code zu erstellen.

Wechsle in den Agentenmodus, indem du Cmd + Shift + I (oder Ctrl + Shift + I) drückst. Dadurch erhält Cursor die Erlaubnis, in deiner Codebasis zu arbeiten und mehrstufige Aufgaben auszuführen.

Drücke die Eingabetaste und du siehst die Schaltfläche Befehl ausführen.

Klicke auf den Ausführungsbefehl, und schon erstellt Cursor dein Plugin. Du solltest einen neuen Ordner (z.B. custom-writer-role) mit einer einzelnen .php Datei darin sehen.

Schritt 5: Überprüfe und akzeptiere die Datei

Öffne die Datei, die Cursor erstellt hat. Hier kannst du Änderungen vornehmen, z. B. den Plugin-Autor aktualisieren oder die Inline-Kommentare verfeinern.

Wenn du zufrieden bist, klicke auf Datei akzeptieren. Keine Sorge, du kannst die Datei später immer noch bearbeiten. Dies bestätigt nur, dass die Datei Teil deiner Codebasis sein soll.

Schritt 6: Aktiviere das Plugin in WordPress

Gehe zu deinem WordPress Admin Dashboard. Suche unter Plugins nach deinem neuen Plugin und aktiviere es.

Wenn alles korrekt erstellt wurde, siehst du eine Erfolgsmeldung und das Plugin ist aktiviert.

Schritt 7: Teste die neue Rolle

Erstelle einen neuen Benutzer und weise ihm die Rolle Custom Writer zu. Dein Test sollte zeigen:

• Neue Benutzerrolle erfolgreich erstellt
• Es können nur Beiträge erstellt werden.
• Beiträge können bearbeitet und angesehen, aber nicht gelöscht werden.

Schritt 8: UI-Macken entdecken und beheben

Eine Sache, die dir auffallen wird, ist, dass der Schnellbearbeitungslink in der Beitragsliste immer noch verfügbar ist. Er erlaubt zwar kein Löschen, aber wir haben nicht danach gefragt, und das kann für die Nutzer verwirrend sein.

Gehe zurück zu Cursor und starte einen neuen Prompt mit der Bitte um Hilfe beim Entfernen von Quick Edit.

Während der Erstellung der Demo für diesen Leitfaden haben wir eine Reihe von Aufforderungen an Cursor gestellt, verschiedene Ansätze zum Entfernen von Quick Edit zu wählen. An einer Stelle sahen wir Verweise auf „user_switch“, was uns zu der Frage veranlasste, ob es einen Konflikt mit dem Plugin „Switch User Role“ gab. (Dies war das einzige Plugin, das neben unserem Plugin lief.)

Cursor sagte uns, dass es einen Konflikt geben würde, nachdem wir es auf dieses mögliche Problem aufmerksam gemacht hatten. Es folgte eine weitere Runde von Prompts. Dabei stellten wir fest, dass sich der neue Benutzer nicht anmelden konnte, weil eine höhere Berechtigungsstufe erforderlich war.

Eine weitere Promptrunde begann – ohne Erfolg. In bestimmten Abständen entfernte Cursor zwar die Schnellbearbeitung, aber auch die Bearbeitungsfunktion wurde entfernt. Wir fühlten uns verloren und baten Cursor, uns zusammenzufassen, wo wir nun stehen, um sicherzugehen, dass wir wussten, was er verstanden hatte. An einem Punkt fragten wir: „Was sagst du?“

Schließlich fand Cursor einen Weg, alle Probleme zu lösen, und gab uns eine Zusammenfassung der vorgenommenen Änderungen.

Schritt 9: Beobachte weitere Verhaltensweisen

Beim Testen haben wir außerdem festgestellt:

• Die Mediathek ist unzugänglich, obwohl wir sie nicht erwähnt haben. Das ist eine Erinnerung: Wenn du eine Funktion nicht ausdrücklich anforderst, wird die KI sie wahrscheinlich nicht einbauen.
• In der Zusammenfassung von Cursor steht, dass es „für Beiträge und Seiten funktioniert“, aber das Plugin blockiert den Zugriff auf Seiten korrekt. Die KI hat also etwas zu viel erklärt, aber das Verhalten ist korrekt.

Schritt 10: Weiter testen und iterieren

Ab hier kannst du weitere Plugins installieren, die Kompatibilität testen und deine Rolle nach Bedarf verfeinern. Wenn etwas kaputt geht oder sich nicht so verhält, wie du es erwartest, kommst du zu Cursor zurück und fragst nach.

Das wirst du oft tun – Folgefragen stellen, Prompts umformulieren oder einfach nur „Was denkst du?“ fragen, um Cursors Sichtweise zu erfahren.

Das ist der Punkt, an dem Cursor wirklich glänzt: Die Feedback-Schleife ist schnell und der Assistent wird mit jedem Durchlauf besser.

Immer vorsichtig bleiben

Nur weil du eine KI bitten kannst, ein Plugin zu erstellen, heißt das nicht, dass du es auch tun solltest – zumindest nicht, ohne es vorher zu durchdenken.

Nimm dir Zeit, um zu definieren, was dein Plugin tun soll, bevor du es aufforderst. Überlege dir seinen Zweck, die erforderlichen Funktionen und mögliche Abhängigkeiten. Frage dich: Könnte dieses Plugin mit wichtigen Erweiterungen wie WooCommerce in Konflikt geraten? Wenn die Antwort „vielleicht“ lautet, solltest du das in deinem Prompt erwähnen.

Je mehr Kontext du der KI gibst, desto besser sind deine Ergebnisse. Sei spezifisch. Beschreibe deine Ziele klar und deutlich. Halte dich nicht zurück.

KI mag sich magisch anfühlen, aber es ist immer noch wichtig, verantwortungsvoll zu arbeiten. Denke an die gleichen Grundpfeiler, die du auch bei der manuellen Programmierung berücksichtigst:

• Sicherheit – bereinige Eingaben, überprüfe Fähigkeiten, befolge Best Practices
• Leistung – vermeide überflüssige Abfragen, halte die Logik straff
• Barrierefreiheit – berücksichtige Benutzerrollen, UI-Elemente und inklusive Interaktion
• Testen – Randfälle ausprobieren, Plugins mischen und die Funktionalität validieren
• Bereitstellung – bereite dich auf Versionierung, Rollbacks und Skalierbarkeit vor
• Refactoring – überprüfe deinen Code, nicht nur einmal, sondern regelmäßig

Zusammenfassung

Die Landschaft des assistierten Codes ändert sich jede Minute. Das erinnert an die Anfänge der Suche, als es zahlreiche Einträge gab. Am Ende haben nur wenige von ihnen überlebt. Das könnte auch hier passieren, auch wenn Open Source vielleicht eine andere Richtung einschlagen wird.

Wir schlagen vor, dass du eine Reihe von KI-Tools mit der gleichen Ausgangsfrage ausprobierst und dann den Weg der Programmierung und die Ergebnisse vergleichst. Sei offen für die Möglichkeit, dass du deine bevorzugte Anwendung ändern musst, wenn sich die Landschaft weiter entwickelt.

Wenn sich die KI-Tools weiterentwickeln, sollte das auch für deinen Arbeitsablauf gelten – und das beginnt mit der richtigen Umgebung.

Das entwicklerfreundliche WordPress-Hosting von Kinsta bietet dir die Geschwindigkeit, die Kontrolle und die Werkzeuge, die du brauchst, um deine Projekte zu entwickeln, zu testen und zu starten. Ganz gleich, ob du lokal mit DevKinsta arbeitest oder ein Staging-System einsetzt, wir unterstützen dich.

Entdecke die WordPress-Hosting-Angebote von Kinsta und fange an, intelligenter zu bauen.