Am Anfang war das Wort
Hier ein weiterer Versuch mit “Vibe coding” Plugins für WordPress zu erstellen. Die Idee ist diesmal eine TOC für Blog-Artikel zu erstellen, die alle Headline strukturiert als Gutenbergblock zur Verfügung stellt. Design-Feinheiten sollen heute mal ausseracht gelassen werden. Zunächst starten wir mal mit einem Prompt “Frei Schnauze”.
Der initiale Prompt
Erstelle ein WordPress-Plugin, das einen Gutenberg-Block bereitstellt. Dieser Block soll beim Erstellen des Inhalts automatisch eine Inhaltsverzeichnisbox generieren, in der alle H2-, H3- und H4-Überschriften der Seite erfasst und als anklickbare Navigationslinks dargestellt werden. Der Autor soll im Block-Editor auswählen können, welche der Überschriftsebenen (H2, H3, H4) im Inhaltsverzeichnis angezeigt werden, ohne spezielle Voreinstellungen. Die Inhaltsverzeichnisbox wird ausschließlich über eine eigene CSS-Klasse mit Custom CSS gestylt; alle notwendigen Styles sollen in einer separaten CSS-Datei hinterlegt werden. Für den Smooth-Scroll-Effekt beim Anklicken der Links wird mittels JavaScript ein Effekt mit einer Dauer von 500ms und einer ease-in Animation implementiert. Alle erforderlichen Dateien – PHP, JavaScript und CSS – sollen vom Plugin generiert werden und enthalten Entwicklerkommentare sowie Erklärungen. Das Plugin muss ab WordPress Version 6.7 kompatibel sein.
Die Antwort
Im Folgenden findest du den vollständigen Code für ein WordPress-Plugin, das einen Gutenberg-Block bereitstellt. Dieser Block generiert automatisch eine Inhaltsverzeichnisbox, in der alle H2-, H3- und H4-Überschriften des Seiteninhalts (bspw. innerhalb des Containers mit der Klasse .entry-content) als anklickbare Navigationslinks aufgeführt werden. Im Block-Editor kann der Autor per Toggle-Control auswählen, welche Überschriftsebenen berücksichtigt werden sollen. Die actual Styling erfolgt ausschließlich über eine eigene CSS-Klasse (in der separaten CSS-Datei) und für den Smooth-Scroll-Effekt beim Klick wird mittels JavaScript ein 500ms langer Ease-In-Effekt realisiert.
Die Plugin-Struktur sieht folgendermaßen aus:
Kopieren
custom-toc-block/
├── custom-toc-block.php
├── block.js
├── smooth-scroll.js
└── style.css
Das Ergebnis war durchwachsen.
Ein verbesserter Prompt
Mit meinem PromptGenerator habe ich dann einen neuen umfangreichen und verbesserten Prompt erstellen lassen.
Hier der verbesserte Prompt:
Erstelle ein WordPress-Plugin, das einen Gutenberg-Block für ein Inhaltsverzeichnis bereitstellt. Der Block soll automatisch alle H2-, H3- und H4-Überschriften des Inhalts erkennen und eine anklickbare Navigation generieren. Im Block-Editor soll der Autor auswählen können, welche Überschriftsebenen (H2, H3, H4) im Inhaltsverzeichnis angezeigt werden, ohne dass Voreinstellungen nötig sind.
Das Inhaltsverzeichnis (CSS-Klasse: toc) soll folgende Eigenschaften haben:
Styling: Es wird über eine eigene CSS-Klasse gestylt, wobei die Styles in einer separaten CSS-Datei (table-of-content.css) definiert sind. Das Styling soll sich am Design des aktivierten Themes orientieren (z. B. Schriftarten, Farben).
Smooth-Scroll: Ein 500ms-Smooth-Scroll-Effekt (ease-in) wird mit JavaScript (table-of-content.js) implementiert, um beim Anklicken der Links einen weichen Übergang zu den entsprechenden Überschriften zu ermöglichen.
"Zurück nach oben"-Button: Ein dauerhaft sichtbarer Button, der am unteren Bildschirmrand positioniert ist und den Benutzer mit Smooth-Scroll-Effekt zum Seitenanfang bringt.
Ein- und Ausklappbar: Das Inhaltsverzeichnis kann über einen einfachen Pfeil-Button ein- und ausgeklappt werden. Der Slide-Effekt wird dafür verwendet, um das Inhaltsverzeichnis optisch ansprechend ein- und auszublenden. Standardmäßig ist das Inhaltsverzeichnis geöffnet.
Anpassungsmöglichkeiten im Gutenberg-Editor: Der Benutzer kann folgende Einstellungen vornehmen:
Abstände: Anpassung der Abstände zwischen den einzelnen Einträgen im Inhaltsverzeichnis.
Rahmen: Möglichkeit, einen Rahmen hinzuzufügen und dessen Stil (z. B. durchgezogene Linie, gestrichelt) und Stärke zu definieren.
Schriftarten und Farben: Anpassung der Schriftgröße, Schriftart und Farben (Text und Hintergrund).
Position im Fließtext: Der Benutzer kann die Position der Inhaltsverzeichnisbox innerhalb des Inhalts (z. B. links, rechts oder zentriert) festlegen.
Mobile Sichtbarkeit: Standardmäßig ist das Inhaltsverzeichnis auf mobilen Geräten ausgeblendet. Der Benutzer kann diese Einstellung im Block-Editor ändern.
Im Gutenberg-Editor soll der Block eine Vorschau des Inhaltsverzeichnisses anzeigen, basierend auf den Überschriften der Seite. Für Seiten ohne Überschriften wird ein Hinweis angezeigt (z. B. "Keine Überschriften gefunden").
Funktionsweise
Der Gutenberg-Block wird vom Benutzer manuell in den Inhalt eingefügt. Es gibt keine automatische Aktivierung oder globale Einstellung für alle Seiten.
Auf mobilen Geräten ist das Inhaltsverzeichnis standardmäßig ausgeblendet, kann jedoch im Block-Editor aktiviert werden.
Dateistruktur und Anforderungen
Das Plugin soll alle notwendigen Dateien enthalten, mit folgenden Namen und ausführlichen Entwicklerkommentaren:
PHP-Datei: table-of-content.php (registriert den Block und lädt die Assets).
JavaScript-Datei: table-of-content.js (für Smooth-Scroll, Slide-Effekte und Interaktivität).
CSS-Datei: table-of-content.css (für das Styling des Inhaltsverzeichnisses).
Zusätzliche Anforderungen:
Kompatibilität: Das Plugin muss mit WordPress-Version 6.7 und höher kompatibel sein.
Modularer Aufbau: Es soll so gestaltet sein, dass zukünftige Erweiterungen einfach integriert werden können.Das ganze dann mit local by flywheel und VSCode mit GPT-4.1 lokal generieren lassen.
Jetzt noch die package.json erstellt und das JS für den Gutenberg in das src-Verzeichniss verschoben. Dann npm init und npm run build ausgeführt. Das Ergebnis ist passable und in weniger als einer halben Stunde erstellt.
Ein erster Schritt für Übersichtlichkeit. Vibe coding ist möglich aber nur für Experten. Das Feintuning wird dann umso umfangreicher.