Eine Person mit langem roten Haar präsentiert lächelnd vor einem Whiteboard. Eine andere Person steht mit dem Rücken zur Kamera und hört zu. Auf dem Whiteboard sind Texte und Pfeile zu sehen.
ChatGPT, wie er mir meine zehnte dumme Frage zu Word­press beantwortet – Symbolbild (ThisisEngineering, Unsplash-Lizenz).

GPT-5 zeigt Word­press den Meister

Das neue Sprach­mo­dell von OpenAI legt beim Web­de­sign massiv zu: Pro­bleme und Schön­heits­feh­ler mit Web­sites las­sen sich nun in ein paar Mi­nu­ten be­sei­ti­gen. Das de­mon­strie­re ich an­hand von drei Bei­spielen.

Vor zwei Wochen lancierte OpenAI GPT-5. Die Reaktionen waren verhalten: Das neue Sprachmodell sei unpersönlich und zu kurz angebunden. Meine eigenen Erfahrungen sind viel positiver. Überraschen sollte uns das nicht: Wie gut oder schlecht ein Sprachmodell abschneidet, hängt von der Aufgabe und unseren Erwartungen ab.

Mein Auftrag umfasste Korrekturen und Verbesserungen an meiner Website. Es ging zwar um drei kleine Ärgernisse: Schönheitsfehler, die die Funktionsweise und den Nutzen des Blogs nur minimal schmälerten. Trotzdem ist bemerkenswert, dass die KI in allen Fällen prompt eine einwandfreie Lösung lieferte. Ich brauchte nur wenige Minuten für die Umsetzung.

Das ist der entscheidende Vorteil: Ohne die Hilfe der künstlichen Intelligenz hätte das zu viel Zeit in Anspruch genommen. Und eben: GPT-5 macht jetzt den Unterschied. Das weiss ich, weil ich einige der Dinge bereits im Februar mit GPT-4o ausprobiert habe, damals ohne Glück.

Eine echte Erleichterung

Mit anderen Worten: ChatGPT kennt sich seit dem Update verflixt gut mit Word­press aus. Ich gehe davon aus, dass das Sprachmodell auch bei anderen Content-Management-Systemen weiterhilft; zumindest, wenn es nicht allzu exotische Kandidaten sind. Selbst bei generellen Belangen des Webdesigns verschafft uns die KI schnelle Resultate. Ich habe neulich bei meinem Artikelarchiv mittels regulärer Ausdrücke einige Formatierungen repariert¹.

Die drei Probleme haben allesamt mit dem Theme, also den Designvorgaben diese Blogs hier zu tun. Das auszuwählen, war vor drei Jahren eine nervenaufreibende Angelegenheit. Wie sich erst hinterher zeigte, hat das Theme meiner Wahl von Haus aus einige Mängel. Um sie zu beheben, stellte ich ChatGPT es in Gänze zur Verfügung. Ich tat das, indem ich die originale Zip-Datei des Herstellers in den Chat hochlud.

Das sind die drei Weisungen, die GPT-5 auszuführen hatte:

1) Fehlende Übersetzungen nachtragen

Einer der Mängel ist die lückenhafte Übersetzung. In Beiträgen mit nur einem Kommentar wird die Leserinnen-Rückmeldung mit dem Text «One thought on [Titel]» eingeleitet. Bei Beiträgen mit mehr als einem Kommentar ist der Text dazu korrekt in Deutsch («2 Kommentare zu [Titel]»)².

ChatGPT erklärt mir, ich solle die .pot– bzw. .po-Datei im Theme-Ordner unter /languages/ bearbeiten. Ich könne dafür einen Editor wie Poedit verwenden. Ich habe stattdessen den faulen Weg gewählt, die Datei mit den deutschen Texte heruntergeladen und ChatGPT gebeten, sämtliche fehlenden Strings nachzutragen.

Klar, es ist mit einem Risiko verbunden, diese Datei nur oberflächlich zu prüfen und danach sogleich auf den Webserver zu verfrachten. Doch ich gestehe: Genau das habe ich getan. Falls ihr im Frontend von Clickomania irgendwelche Unflätigkeiten entdeckt, kennt ihr jetzt den Grund.

Chatfenster mit einer Meldung über das Übersetzen von deutschen Texten in einer Datei. Zwei Datei-Icons mit Dateinamen: «de_DE.po» und «de_DE_filled.po».
GPT-5 liefert die Übersetzungen im passenden Dateiformat ab.

2) Die Seite mit den Suchresultaten verbessern

Der zweite Schönheitsfehler betraf die Seite mit den Suchresultaten. Standardmässig zeigte sie das Theme als einspaltige Liste an. Am Desktop erscheinen riesige Bilder, zwischen denen die Titel kaum zu erkennen waren: sehr unübersichtlich.

Also: Würde ChatGPT bitte dafür sorgen, dass die Suchresultate wie auf der Startseite als Raster angezeigt werden?

Das sei kein Problem, erklärt das Sprachmodell. Es liefert mir sogleich die entsprechende Variante der search.php-Datei, die ich bloss an die richtige Stelle auf meinen Webserver verfrachten muss. Dafür ist nicht einmal ein FTP-Programm vonnöten. Stattdessen klicken wir im Backend auf Design > Theme-Datei-Editor, wählen rechts unter Theme-Dateien den Eintrag Suchergebnisse (search.php) aus, fügen dort den Output von ChatGPT ein und klicken auf Datei aktualisieren.

Ein Mann trägt Kopfhörer und spricht in ein Mikrofon. Im Hintergrund leuchtet ein Schild mit dem Text «The Joe Rogan Experience».
Die Suche vorher: Am Desktop ist nur ein Ergebnis zu sehen.
Drei Podcast-Beiträge: Links Gespräch in Studio, Mitte Menschenmenge mit abstraktem Objekt, Rechts Matroschka-Puppen. Titel und Daten sind sichtbar.
Suche nachher: Die Treffer werden als Raster nebeneinander angezeigt.

Das war’s. Nein, nicht ganz. Ich sollte darauf hinweisen, dass wir diese Änderung besser nicht am Original vornehmen, sondern ein «Child» unseres Themes anfertigen. Dieser Weg hat den Vorteil, dass unsere Modifikationen erhalten bleiben, auch wenn unser Theme ein Update erfährt. Die Details dazu beschreibe ich hier.

3) Die Seitenleiste festkleben

Eine Funktion, die mir gut gefällt, ist die «klebrige Seitenleiste» (sticky sidebar): Sie gleicht an grossen Bildschirmen Längenunterschiede zwischen dem Menübereich (in diesem Blog am rechten Rand) und dem Text des Beitrags aus. Das tut sie, indem die beiden Bereiche unterschiedlich scrollen: Falls die Leiste kürzer ist als der Text, rutscht deren unteres Ende beim Scrollen nach unten mit, bis beide am unteren Rand bündig abschliessen. Analog funktioniert es, wenn die Menüleiste länger ist als der Blogpost: Dann bleibt der Text stehen, während die Leiste nach oben rutscht, bis sie am Ende anlangt.

Vor allem letzteres ist eine ästhetische Verbesserung: In meinen Augen ist es hässlich, wenn die Menüleiste bei kurzen Posts übersteht: Es wirkt, als sei dem Autor zu wenig eingefallen, um die Seite vollzubekommen.

Genau deswegen achtete ich bei der Auswahl meines Themes auf dieses Feature. Es ist zwar enthalten. Bloss funktionierte es bei der Premium-Version nicht, und der Hersteller-Support konnte oder wollte mir nicht weiterhelfen (was das über ihn aussagt, wäre ein anderes Thema).

Doch Freude herrscht: GPT-5 macht dieses Versäumnis wett. Das Sprachmodell erkennt den Fehler und schlägt eine Korrektur in der custom.js-Datei vor. In der ersten Variante wird nur die Variante adressiert, in der die Seitenleiste kürzer ist als der Text. Nach meiner Nachfrage liefert es mir eine symmetrische Version, die keine Wünsche übriglässt.

4) Da Capo: Affiliate-Links markieren

ChatGPT hat mich schliesslich auf die Idee gebracht, wie ich meine Affiliate-Links für Amazon kennzeichnen kann, wie es vorgeschrieben wird. Dafür nutze ich den Trick, per CSS einen Text einzublenden. Das ist für Links, die mit der Klasse ausgezeichnet sind, mit folgendem CSS-Eintrag möglich:

a.amazon-affiliate::after { content: " • Als Amazon-Partner verdiene ich an qualifizierten Verkäufen • " }

Fussnoten

1) Ich habe mir erklären lassen, wie man beim Durchkämmen des HTML-Codes vernünftig nach ganzzeiligen Elementen sucht. Aus unerfindlichen Gründen funktioniert mit dem Search Regex-Plug-in die Suche nach ^Zeile$ nicht. Mit (\r\n)Zeile(\r\n) klappt es wunderbar, allerdings nur, wenn man fürs Einfügen $1Neue Zeile$2 benutzt. 

2) Ich nahm schon früher einen Anlauf, um dieses Problem zu lösen; war dabei aber anscheinend nicht gründlich genug.

Ein Kommentar zu «GPT-5 zeigt Word­press den Meister»:

  1. Genau dieselbe Erfahrung hab ich auch gemacht, darum haben mich diese teilweise negative Bewertung doch gewundert. Wenn aber mit vorurteile an die KI rangeht, dann wird die Erfahrung negativ.

    Obwohl die KI mit Promox ihre probleme hatte.

Kommentar verfassen