WordPress-Plugins erstellen mit KI: HTML, CSS, PHP & Co. mit Copilot

Das hätte ich ohne KI niemals geschafft: Beim Relaunch dieser Website habe ich mir von Microsoft Copilot helfen lassen und dabei zahlreiche WordPress-Plugins selbst erstellt – fast ohne Programmierkenntnisse!

Ich bin kein IT’ler und habe dank einiger redaktionell betreute Projekte maximal ein Grundverständnis von HTML und etwas CSS. Mit PHP, JavaScript und AJAX hatte ich bislang keine wirklichen Berührungspunkte.

Trotzdem konnte ich dank Copilot einige kommerzielle WordPress-Plugins durch eigene Erweiterungen ersetzen. Das spart nicht nur Geld, sondern auch Ladezeit. Ganz ehrlich: Wenn ich das kann, dann kannst Du das sicher auch! 😊

Vorteile von Vibe Coding mit Copilot

Erst vor ein paar Tagen habe ich gehört, dass es für meine Vorgehensweise schon einen Begriff gibt: Beim sogenannten Vibe Coding erklärt man dem Chatbot in natürlicher Sprache, welche Erweiterung man programmieren möchte. Die KI spuckt auf Zuruf den passenden Code aus, korrigiert Tippfehler und erklärt verwendete Funktionen.

Natürlich generiert die KI auf Anhieb keine perfekten Lösungen. Der vorgeschlagene Code erfüllt aber meist seinen Zweck oder ist eine solide getippte Grundlage für Fortgeschrittene. Selbst Programmier-Profis würden sonst sicher Stunden für das brauchen, was Copilot in wenigen Sekunden ausgibt.

Eigene WordPress-Plugins mithilfe von KI zu erstellen, hat aus meiner Sicht mehrere Vorteile:

• Du hast die volle Kontrolle über die Funktionalität und kannst alles so umsetzen und gestalten, wie Du es für Dein Web-Projekt benötigst.
• Ein eigenes WordPress-Plugin enthält keine unnötigen Features oder Werbebotschaften. Das spart Code, Ladezeit und Nerven.
• Die einzelnen Erweiterungen lassen sich separat überarbeiten und bei Problemen flexibel deaktivieren.
• Du bist unabhängig von unzuverlässigen Entwicklern und kommerziellen Anbietern, deren Erweiterungen oft überladen sind, den Datenschutz vernachlässigen oder unnötig Geld kosten.

Bei meinem Relaunch habe ich übrigens hauptsächlich Microsoft Copilot in der Version für Privatkunden genutzt. Im Dialog hat mir der Chatbot zum Beispiel dabei geholfen, den HTML-Code zu verstehen, das CSS anzupassen, JavaScript-Fehler zu korrigieren und vieles mehr.

Für jedes Plugin habe ich einen eigenen Chatverlauf begonnen. An das große ganze Projekt hat sich die KI dank Memory-Funktion trotzdem „erinnert“ und zum Beispiel übergreifende Variablen und CSS-Regeln berücksichtigt.

Schritt für Schritt zum eigenen WordPress-Plugin

Auf Wunsch gibt die KI das gewünschte Plugin als fertige ZIP-Datei aus, die Du im Backend von WordPress nur noch installieren und aktivieren musst. Korrekturen und Änderungen sind dann aber umständlich. Außerdem möchte ich den Code ja verstehen und flexibel anpassen.

Deshalb habe ich mich für eine andere Vorgehensweise entschieden und dabei Copilot als Sparringspartner genutzt – im Kern einfach so:

1. Zugriff auf WordPress-Installation per FTP-Zugang (z. B. mit WinSCP)
2. neuen Ordner und dazugehörige PHP-Datei im Ordner erstellt

3. Copilot um passenden Code gebeten und eingefügt
4. Plugin im Backend von WordPress aktiviert

5. Funktionalität getestet und im Dialog mit Copilot verbessert
6. Design der Klassen per CSS festgelegt – ebenfalls mithilfe von Copilot

Wie Du den KI-Assistenten und seine Grundfunktionen für verschiedene Zwecke nutzt, erfährst Du ausführlich in meinem aktuellen Handbuch „Microsoft Copilot für Einsteiger“.

Beispiele für eigene WordPress-Plugins

Ein paar konkrete Beispiele gefällig? Diese voll funktionsfähigen WordPress-Plugins habe ich mithilfe von Microsoft Copilot in nur einer Woche erstellt und veröffentlicht:

Amazon Box (statt AAWP)

Per Shortcode kann ich in Blog-Artikeln auf passende Produkte bei Amazon.de verweisen – mit verschiedenen Ansichten und automatisch generierten Affiliate-Links.

Auto Adsense (statt Advanced Ads)

Einfacher als das kommerzielle Plugin: Werbeanzeigen von Google Adsense werden automatisch an bestimmten, von mir definierten Positionen im Beitragstext eingefügt.

Breadcrumbs (statt Integration per Yoast)

Mit wenigen eigenen Code-Zeilen stelle ich auf WordPress-Seiten die Hierarchie dar – mit anklickbaren Verlinkungen.

Cache Master (statt WP Fastest Cache & Co.)

Auf dieses Plugin bin ich besonders stolz: Die Erweiterung speichert bereits aufgerufene Webseiten am Stück, sodass sie für zukünftige Besucher*innen schneller geladen werden.

Download gegen Mail (statt Download After Email)

Ich biete in meinem Blog zahlreiche Downloads an – viele davon kostenlos. Über dieses Modul kann man sich den Link zur gewünschten Datei einfach per E-Mail zusenden lassen.

External Link Icons

Ich möchte Verweise zu externen Webseiten wie Amazon, YouTube & Co. optisch hervorheben. Dieses Plugin fügt jeweils ein passendes Icon vor dem Link ein.

Headline mit Logo

Bei Bedarf kann ich vor Überschriften passende Icons einbinden, zum Beispiel passende App-Logos aus der Microsoft-Welt.

KI-Button

Von der eigenen Idee zum funktionsfähigen Plugin: Über jedem Online-Artikel erscheint mein KI-Button. Ein Klick darauf fasst den folgenden Text zusammen – als kleiner Service für interessierte Leser*innen. Hast Du sowas schon mal auf einer anderen Website gesehen?

Kontaktformular (statt Contact Form 7)

Von Haus aus bietet WordPress kein einfaches Kontaktformular an. Für einfache Nachrichten braucht es meist kein umfangreiches Plugin. Meine Lösung ist einfach gehalten und erfüllt ihren Zweck.

Like-Button (statt Jetpack)

Es muss nicht immer Facebook sein: Mein eigener Like-Button sitzt unter jedem Blog-Artikel. Jeder Klick auf Gefällt mir wird in einer Datenbank gezählt. Die beliebtesten Beiträge zeige ich auf der Startseite ein.

Swiper

Eigentlich bin ich kein großer Fan von animierten und automatisch durchlaufenden Elementen. Beliebt sind sie auf Webseiten trotzdem, um mehrere Inhalte auf kleinem Raum zu präsentieren. Den Swiper auf meiner Startseite habe ich ebenfalls per WordPress-Plugin eingebaut.

Teilen-Button (statt Shariff Wrapper, Jetpack, o. ä.)

Werden Blog-Artikel eigentlich oft direkt via Social Media geteilt? Viele Webseiten nutzen dafür den Shariff Wrapper. Weil ich die Erweiterung ziemlich umständlich finde, habe ich mir mit Copilot eine eigene einfachere Lösung erstellt.

Die Reihe der vorgebenen Plattformen kann ich jederzeit flexibel ändern und ergänzen, falls in Zukunft weitere Soziale Netzwerke eine Rolle spielen.

Wieder was gelernt – dank Microsoft Copilot!

In den kommenden Wochen werde ich sicher noch weitere Funktionen ergänzen und weiter ausprobieren, wie ich meine Plugin-Sammlung noch verbessern kann. In jedem Fall habe ich bei diesem Projekt schon wieder so viel gelernt und vorher niemals gedacht, dass ich WordPress-Plugins so einfach selbst erstellen kann.

Hast Du Dir auch schon mal bei der Website-Programmierung von KI helfen lassen? Welche Funktionen und Erweiterungen sind dabei entstanden? Schreibe Deine Tipps und Erfahrungen gerne als Kommentar unter diesen Beitrag.