Eine komplette WordPress-Website erstellen
Eine Beschreibung rein, ein fertiges Block-Theme raus. Diese Fertigkeit führt die anderen
wp-* Fertigkeiten der Reihe nach aus. Jedes Gate muss abgeschlossen sein, bevor das nächste startet.
Gate 0: Brief (harter Stopp)
Aus der Beschreibung des Benutzers SITE_BRIEF.md erstellen mit:
- Zweck und Zielgruppe, Markenton, Farben und Schriftarten (Standardwerte vorschlagen, falls keine angegeben).
- Seitenliste (Standard: Startseite, Über uns, Dienstleistungen oder Produkte, Blog, Kontakt).
- Funktionen (Kontaktformular, Blog, Galerie, Shop). Nur das, was der Benutzer angefragt hat.
- Annahmen, nummeriert, jeweils mit ihrem Standardwert.
Dem Benutzer zeigen und bitten, zu akzeptieren, abzulehnen oder zu beraten. Stoppen und warten.
Gate 1: Projekteinrichtung
- In einem neuen Ordner arbeiten (vom Benutzer gewählter Name). Niemals die Dateien einer bestehenden Site berühren.
- Ein Block-Theme erstellen:
style.css,theme.json,templates/,parts/(Header, Footer),patterns/,assets/,functions.php. - WordPress Core Blöcke und Muster verwenden. Kein Page Builder, kein CSS-Framework.
- Optional lokaler Test: WordPress Playground oder
wp-env, falls verfügbar.
Gate 2: Designsystem (wp-responsive-fluid-design)
Farben, flüssige Schriftgrößenskala und Abstandstoken in theme.json definieren. Header,
Footer, Navigation und ein mobiles Menü erstellen. Alle Werte stammen aus den Tokens.
Gate 3: Seiten und Inhalt
Vorlagen und Muster für jede Seite im Brief erstellen. Klaren Platzhaltertext verwenden (kein Lorem Ipsum, wenn der Zweck bekannt ist) und Bilder mit
alt-Text. Semantisches HTML verwenden: eine h1 pro Seite.
Gate 4: Bewegung (wp-animated-block-theme)
Scroll-Enthüllungen, Hover- und Seitenübergangseffekte zuerst mit CSS hinzufügen, dann mit der
Interactivity API. Alles respektiert prefers-reduced-motion; Inhalte bleiben ohne JS sichtbar. wp-gsap-lottie-integration nur verwenden, wenn ein angeforderter
Effekt dies erfordert.
Gate 5: Prüfungen
wp-motion-performance-audit: High-Elemente beheben (layoutauslösende Animation, Layoutverschiebung, schwere Skripte).wp-accessible-ui-review: High-Elemente beheben (Fokus, Kontrast, Beschriftungen, Überschriften).- Bei 360, 768, 1024 und 1440 px prüfen: kein horizontaler Scroll.
- Validieren:
php -lauf PHP-Dateien, JSON-Gültigkeit auftheme.json.
Gate 6: Übergabe
Eine kurze README.md im Theme-Ordner schreiben: wie zu installieren (ZIP und hochladen),
wie Seiten zu bearbeiten sind und was nicht verifiziert wurde (Live-Lighthouse, echte Geräte,
Screenreader, Hosting). Nicht mehr behaupten, als ausgeführt wurde. Nicht deployen, pushen
oder committen, es sei denn, der Benutzer bittet darum.
Regeln
- Keine Geheimnisse, API-Schlüssel oder absoluten lokalen Pfade in irgendeiner Datei.
- Nur Plugins hinzufügen, die der Benutzer genehmigt hat; am besten keine.
- Generischen Platzhalterinhalt verwenden; niemals echte persönliche oder Kundendaten.
- Jede Änderung muss auf den Brief zurückführbar sein.