Webentwicklung mit ChatGPT und Google Bard, Teil 3 WordPress-Themes mit wenigen Handgriffen?

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?

E-Book zum Thema

Das eBook „KI-Assistenten für Entwickler“ zeigt, wie KI-Werkzeuge die Entwicklungsarbeit revolutionieren, Aufgaben automatisieren, die Produktivität steigern und zur Softwarequalität beitragen.

eBook herunterladen

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:

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.

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.

Webentwicklung mit ChatGPT und Google Bard

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:

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.

Webentwicklung mit ChatGPT und Google Bard

Die Fehlersuche ist in diesen kurzen Code-Schnipseln noch nicht all zu aufwändig, 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.

E-Book zum Thema

KI-Assistenten für Entwickler

Dieses eBook zeigt, wie KI-Werkzeuge die Entwicklungsarbeit revolutionieren, Aufgaben automatisieren, die Produktivität steigern und zur Softwarequalität beitragen. Außerdem beleuchtet es den verantwortungsvollen Einsatz von KI in der Entwicklung.

Folgende drei Kapitel umfasst das eBook:

• Der Megatrend Künstliche Intelligenz
• Die KI zähmen: Nutzungsszenarien und Stolperfallen
• Die besten KI-gestützten Developer-Assistenten

eBook „KI-Assistenten für Entwickler“ herunterladen

(ID:49745728)