Jenseits von Vibe Coding: Ein WordPress-Magazin mit Claude Code erstellen
Für Projekte wie ein Fachmagazin für Bildungsthemen ist maßgeschneiderter Code nicht immer zwingend erforderlich. Statt sich direkt in Next.js oder Supabase zu vertiefen, ist der Start mit WordPress oft die klügere Wahl: Das CMS liefert von Haus aus ein fertiges Admin-Dashboard, SEO-Plugins, eine Medienbibliothek und eine REST-API mit. Der Autor dieses Projekts – ein Infrastruktur-Spezialist ohne jegliche PHP- oder WordPress-Kenntnisse – nutzte die Claude-Code-CLI, um einen VPS bereitzustellen und sämtliche Anpassungen vorzunehmen.
Das Ziel: Ein minimalistischer Blog mit Hero-Bereich, Artikelraster, Suchfunktion und kategorisierten Rubriken. Entwicklungsbudget: 0 $. Das Ergebnis: Ein voll funktionsfähiger MVP, der innerhalb weniger Abende realisiert wurde.
Infrastruktur-Setup
Tech-Stack: Ubuntu-VPS, Nginx mit Caching, PHP 8.3 (FPM), MySQL 8.0 und das GeneratePress-Theme. Claude Code generierte die SSH-Befehle für:
- Installation der Pakete und Konfiguration von PHP-FPM.
- Einrichtung von Nginx mit SSL (Let's Encrypt), einer Firewall (UFW) und Fail2ban.
- Deployment von WordPress mit sprechenden URLs (Pretty Permalinks) sowie Rank Math für Sitemaps und SEO.
Der Workflow: Aufgabe in natürlicher Sprache definieren → KI schreibt die Skripte → Überprüfung und Iteration. Das spart Stunden bei Routineaufgaben, aber eine manuelle Validierung bleibt unverzichtbar.
Anpassungen über mu-plugins
Zwölf mu-plugins übernahmen die gesamte Logik der Startseite. Beispielhafte Prompts für die KI:
- Ein Hero-Bereich mit einem angepinnten Beitrag sowie einem dreispaltigen Raster für aktuelle Artikel.
- Ein dynamischer Kategorie-Block, der
get_terms()nutzt, anstatt auf statisches HTML zu setzen. - Integration der Suche im Header, Entfernen der Sidebar und Hover-Effekte für Artikel-Karten.
Herausforderungen und Lösungen:
- WordPress-Core-Styles überschreiben benutzerdefiniertes CSS → Einsatz eines
mu-pluginsmit Priorität 999. - Raster bricht auf Mobilgeräten → gezielte Padding-Anpassungen und optimierte Media Queries.
- Änderung der Kategorie-Slugs → Umstellung von fest codierten Werten auf dynamische Abfragen.
Design-Entscheidungen: Schriftart Inter, weiße Karten mit dezenten Schlagschatten, vollständig responsives Layout. Die KI generierte das CSS basierend auf Prompts in natürlicher Sprache wie „Füge beim Hovern einen Schatten hinzu und hebe die Karte leicht an.“
Iterativer KI-Workflow
Ein typischer Zyklus verläuft wie folgt:
- Präzise Aufgabenstellung definieren („dreispaltiges Raster, 20px Padding“).
- KI generiert PHP/CSS (im ersten Durchlauf bereits ca. 80 % treffsicher).
- Test im Browser.
- Fehler melden („Text berührt auf Mobilgeräten den Rand“).
- Lösung iterativ anpassen (2–4 Runden pro Feature).
KI-Limitationen, die man beachten sollte:
- Sie sieht das gerenderte Ergebnis nicht – man muss sich auf detaillierte Beschreibungen oder Screenshots verlassen.
- Sie verfolgt keine Datenbankänderungen – dynamische Anforderungen müssen explizit formuliert werden.
- Korrekturen können benachbarten Code brechen (Datei-Überschreibungen erfordern sorgfältige Versionskontrolle).
Wichtige Erkenntnisse
- Hoher ROI für Nicht-Experten: KI schließt Lücken in der WordPress-API (Hooks, Filter) und spart wochenlanges Dokumentationsstudium.
- Iteration ist Pflicht: Man sollte mit 2–4 Zyklen pro Aufgabe rechnen, benötigt aber kein tiefes Stack-Wissen.
- Grundkenntnisse erforderlich: Vertrautheit mit Nginx, SQL und CSS bleibt essenziell für Prompt Engineering und Validierung.
- Fokus auf MVP: Ideal für schnelles Prototyping und CMS-Anpassungen (WordPress, Shopify).
- Sicherheit ist manuell: KI implementiert kein Rate-Limiting oder CSRF-Schutz, solange sie nicht explizit dazu aufgefordert wird.
Wann dieser Ansatz sinnvoll ist
Am besten geeignet für:
- Prototypen und MVPs ohne strenge Produktions-SLAs.
- Anpassungen bekannter Plattformen auf einem unbekannten Tech-Stack.
- Einzelentwickler oder kleine Teams.
Nicht empfehlenswert für:
- Kritische Systeme, die Enterprise-Sicherheitsstandards erfordern.
- Nutzer ohne jeglichen technischen Hintergrund.
- Komplexe Architekturen ohne angemessene QA-Überwachung.
Die Kennzahlen: 2 Wochenenden (jeweils 3–4 Stunden), VPS für ca. 7 $/Monat, rund 600 Zeilen CSS + 12 mu-plugins sowie ein Claude-Abo.
— Editorial Team
Noch keine Kommentare.