Webentwicklung mit ChatGPT und Google Bard, Teil 3 WordPress-Themes mit wenigen Handgriffen?
Anbieter zum Thema
GPT-4 hat sich bei der Entwicklung einfacher WordPress-Plug-ins als praktischer Helfer erwiesen. Doch kann die KI auch bei Themes und Designs behilflich sein?

Schreiber und Webentwickler zittern derzeit ob der Möglichkeiten von KI-Tools wie ChatGPT und seinem aktuellen Sprachmodell GPT-4. Die Sorge ist durchaus berechtigt, immerhin erwies sich die KI in unseren Tests bereits bei der Erstellung von Websites und dem Schreiben einfacher WordPress-Plug-ins und Codeschnipsel als praktischer Helfer.
Tatsächlich kann GPT-4 inzwischen einfache Websites bauen – allerdings bestehen Websites natürlich aus mehr als HTML-Code und WordPress-Plug-ins. Daher wollen wir einmal schauen, wie sich GPT-4 bei der Frontend-Entwicklung schlägt: Schafft GPT WordPress-Themes?
GPT-4 für Basis-Themes? Kein Problem!
GPT-4 kann inzwischen mit nur einer Frage ein sehr einfaches WordPress-Theme „entwickeln“. Dazu muss der Nutzer der KI nur kurz mitteilen, welchen Namen das Theme tragen soll, und dass die KI es für WordPress erstellen soll:
„Erstelle mir ein einfaches WordPress-Theme mit Quellcode. Es soll ‚KI-Theme’ heißen.“
Das Basis-Theme besitzt kaum CSS-Befehle, funktioniert aber auf Anhieb und ist sogar responsiv. Es ist allerdings sinnvoll, GPT auf Basis der bereits ausgegebenen style.css um mehr Inhalt zu bitten. Bei der Gelegenheit ist es auch gleich möglich, noch den Autorennamen beizupacken, indem dieser in den Prompt eingefügt wird.
„Bitte erstelle mir eine basale style.css mit den nötigen Formatierungen. Das Theme heißt weiterhin KI-Theme, ich bin Christian Rentrop.“
Das Ergebnis kann sich bereits sehen lassen: Die WordPress-Seite besitzt zwar noch keinen Header und Footer, beide lassen sich aber mit wenigen Handgriffen ergänzen: Einfach GPT fragen, das auch gleich die Einbindung erklärt und die index.php anpasst.
An dieser Stelle zeigt sich – wieder einmal – dass GPT-4 zwar den Inhalt des bisherigen Chats benutzen kann, um „weiterzuentwickeln“, allerdings weder nachfragt noch „versteht“, was es da eigentlich macht. Stattdessen liefert die KI einfach Codeschnipsel und weist den User an, diese einzubauen. Das funktioniert erstaunlicherweise, allerdings wird im Header zunächst kein Text eingeblendet. Ein schneller Blick in den Stylesheet liefert die Antwort: GPT hat weißen Text auf weißen Hintergrund gesetzt – und das ist natürlich Blödsinn.
Beitrags-Layout anpassen? Kein Problem.
Was GPT bisher vergessen hat, ist die single.php für Einzelseiten sowie die Excerpt- und „Weiterlesen“-Funktion für die Startseite. Aber auch diese Ergänzung ist ein Kinderspiel: Auf Nachfrage gibt GPT den Inhalt der entsprechenden Seite als PHP-Code an, der nur noch ins Theme kopiert werden muss. Was fehlt, sind Kommentarfunktion und Beitragsdatum, die aber per Nachfrage ebenfalls in den Code integriert werden.
Auch den Wunsch nach einem rechts im Beitrag stehenden Teaserbild mit 25 % Beitragsweite erfüllt GPT schnell. Eine weitere Nachfrage, schon ist es anklickbar und öffnet sich groß als Datei im Browserfenster. Standard nach heutigen Maßstäben wäre also eine Lightbox:
„GPT, bitte ermögliche, dass das Bild bei Klick groß in einer Lightbox geöffnet wird. Diese soll als Overlay dargestellt werden und die Website zu 50 % verdunkeln.“
Der Versuch, eine Lightbox direkt im Theme zu integrieren, scheitert jedoch: Der Code, den GPT-4 generiert, passt nicht auf das zuvor entworfenen Design, Variablen und Funktionen werden durcheinandergeworfen, der Code funktioniert einfach nicht.
Ein Plug-in wie Simple Lightbox ist hier auf die Schnelle sicher die bessere Wahl. Alternativ können Entwickler GPT-4 natürlich auch schnell eine Lightbox als Plug-in schreiben lassen. Unser Versuch in diese Richtung war aber wenig fruchtbar, der JavaScript-Code fehlerhaft und die Funktion eingeschränkt. Hier eine weitere Baustelle aufzumachen, ist nicht sinnvoll: GPT soll sich auf das Kernproblem konzentrieren.
Menü stylen: Keine Chance
Sinnvoller ist daher ein Blick in das Menü des Themes: Das ist nämlich noch nicht vernünftig gestylt. GPT soll also dafür sorgen, dass das Menü rechts steht, der Blogtitel links. Was die KI auch noch problemlos schafft, indem sie header.php und style.css aktualisiert und um entsprechendes CSS ergänzt.
Was folgt, ist allerdings eine Qual, denn GPT schafft es auch nach mehreren Versuchen und Erklärungen nicht, die Menü-Einträge horizontal anzuzeigen, weder ober- noch unterhalb des Blog-Titels. Das hängt wahrscheinlich damit zusammen, dass es versucht, seinen eigenen, nicht besonders sauberen Code an die Wünsche des Anwenders anzupassen.
An diesem Punkt lohnt sich auch ein Blick in den Quelltext, insbesondere in die style.css: Hier hat eine gewisse Zerfaserung der von GPT erstellten Code-Basis eingesetzt: CSS-Klassen werden wiederholt oder beim nächsten Versuch spontan umbenannt, wodurch zunächst nicht nachvollziehbare Fehler auftreten.
Die Fehlersuche ist in diesen kurzen Code-Schnipseln noch nicht all zu aufwendig, weshalb sich diese Fehler an dieser Stelle händisch korrigieren lassen. Immerhin: Das Theme funktioniert weiterhin und kann als Grundlage zur händischen Weiterentwicklung verwendet werden. Es ist und bleibt aber sehr rudimentär.
Theme-Entwicklung mit GPT? Eher nicht!
Insgesamt ist GPT-4 nicht besonders gut für die Theme-Entwicklung geeignet. Tatsächlich – und entgegen den jubelnden Meldungen im Netz – konnten wir GPT-4 nur ein sehr einfaches, aber immerhin funktionierendes Basis-Template für WordPress entlocken. Bei den Versuchen, das initial erstellte „blanke“ Theme optisch anzupassen, zerfaserte GPT allerdings die Code-Basis – und scheiterte schon an Aufgaben wie dem Versetzen des Menüs.
Die Theme-Entwicklung für WordPress scheitert, wie auch alle anderen Versuche der Webentwicklung bisher, primär daran, dass die KI nicht versteht, was sie da eigentlich macht. Menschliche Entwickler haben Tricks und Kniffe, die sie jederzeit einsetzen können, GPT-4 hingegen versucht, per Lehrbuch zu coden – und das kann nur scheitern.
Je komplexer er wird, desto mehr Nacharbeit ist nötig – und am Ende ist es vermutlich einfacher, den Code direkt selbst zu schreiben. Es gibt aber einen Ausweg: Elementor besitzt inzwischen ein KI-Tool, das durchaus interessante Ergebnisse Mithilfe der KI liefern kann.
(ID:49753255)