Vor 10 Jahren habe ich meine Art-Directed-Blogging-Artikel zu Grabe getragen. Das waren individuell und mit Liebe gestaltete Beiträge hier im Blog. Leider war das extrem aufwendig. Die Idee, mehr Gestaltung in Artikel zu bringen als nur über das Teaserbild, hat mich aber nie ganz losgelassen.

Deshalb habe ich das WordPress-Plug-in Hero Color Picker entwickelt. Und zwar vollständig mit OpenAI Codex.

Was genau macht der Hero Color Picker?

Dank des WordPress-Block-Editors – der inzwischen auch Templates umfasst – kann man einfach eine Gruppe um Titel und Teaserbild legen, sie auf 100 % Breite setzen und diesem Element die CSS-Klasse .hero-colored geben.

Das Plug-in erlaubt anschließend das Setzen von Text- und Hintergrundfarbe für dieses Element und speichert diese Werte als Custom Fields direkt am jeweiligen Beitrag. Ein WCAG-Kontrastcheck, eine Vorschau sowie eine Liste der angepassten Artikel im WordPress-Adminbereich machen die Nutzung für mich sehr einfach und schnell.

Wie lief die Entwicklung mit OpenAI Codex ab?

Wie bei allen Thematiken mit künstlicher Intelligenz wird man nicht aus dem Nichts ein Experte, aber es macht Leute mit einem gewissen Maß an Wissen deutlich schneller und kompetenter. Ich habe mich für OpenAI Codex mit Visual Studio Code entschieden.

Vorab war mir klar, dass ich ein React-Plug-in mit Speicherung der Daten als benutzerdefinierte Felder am Beitrag speichern möchte. Außerdem kannte ich das WCAG 2.2 AAA Kontrastverhältnis und konnte es ebenso benennen. Die Bereitstellung in das WordPress.org Repository benötigte Passwörter für die GitHub-Actions, die ich selbst dort hinterlegen musste.

Je präziser ich die Angaben machen kann, desto mehr kann die KI mir die Arbeit gezielt abnehmen. Denn damit war die Aufgabe klar und der spaßige Teil konnte direkt beginnen. Am Ende habe ich keine einzige Zeile selbst geschrieben im Editor. Das meiste waren kurze Steuerungsanweisungen und Codex hat die gesamte Arbeit erledigt:

• Einrichtung der Entwicklungsumgebung mit npm
• Vollständige Entwicklung in PHP und JavaScript
• Ergänzungen aller Feature-Wünsche
• NPM Build-Prozesse
• Deployment über GitHub-Actions und Release-Tags
• Übersetzung für WordPress.org
• Zuschnitt aller Assets (Logo, Banner, SVG)

Noch genialer ist, dass ich nun einfach alle meine Plugins in meine lokale Valet Instanz auf GitHub auschecken kann, und dann lasse ich Codex damit synchron arbeiten. Alles, was Codex bei diesem Plug-in mit mir zusammen gelernt hat, kann er nun direkt bei allen gleichzeitig anwenden:

• Tests, ob die Plug-ins mit der aktuellen WordPress-Version laufen
• Erzeugung und Zuschneiden der Assets
• Neue GitHub-Actions wie Aktualisierung der Assets
• Bessere Linter für PHP und JavaScript.

Im Zusammenspiel mit dem Beitragsbild sind tolle Effekte möglich

Farben aufeinander abzustimmen, war ehrlicherweise nie mein Ding. Trotzdem macht es mir Spaß. Deshalb gehe ich gerade durch ältere Beiträge und passe mit ein paar Klicks die Farben an.

Besonders schön wird es, wenn die Hintergrundfarbe des Beitragsbildes im Hero-Bereich wieder aufgegriffen wird.

Micro Art Directed Blogging ohne CSS Gefrickel

Es hat mir überraschend viel Spaß gemacht, meine Artikel so anzupassen. Und wenn ich irgendwann keine Lust mehr darauf habe, deaktiviere ich einfach das Plugin – und alles sieht wieder aus wie vorher.

Wenn ihr möchtet, installiert selbst den Hero Color Picker und hinterlasst gern eine Bewertung.