Webdesign mit ChatGPT

ChatGPT ist hervorragend darin geeignet, uns bei Excel-Formeln auf die Sprünge zu helfen. Wie das geht, habe ich neulich für den «Tagesanzeiger» beschrieben. Weil das ein so grossartiger Erfolg war, habe ich mir überlegt, wie sich das weitertreiben liesse. Könnte ich von ChatGPT aus dem Stand ein CMS genau nach meinen Wünschen entwickeln lassen? Natürlich ist das, zumindest derzeit noch, ein zu hochfliegendes Ziel. Aber ich fresse einen Besen, wenn nicht jetzt schon Leute dabei sind, einer KI beizubringen, wie sie Word­press-Themes generiert.

Aber probieren wir an dieser Stelle doch etwas ganz Simples. Mich nervt seit einiger Zeit, dass die in Word­press eingebetteten Youtube-Videos die Textspalte nicht ausfüllen und linkbündig angeordnet sind. Entweder sollten sie in voller Breite erscheinen oder aber wenigstens zentriert. Also, kann uns ChatGPT helfen, dieses Problem zu lösen?

Grundsätzlich gut, aber in der Praxis untauglich

Ich frage konkret, das bei Word­­press bewerkstelligt werden kann. Ich erhalte sofort eine umfassende Anleitung, in der mir auch beschrieben wird, wie ich die Stildatei anpasse. Die Anleitung ist für meinen Fall ungenau: Ich müsste im Backend-Menü auf Design > Customizer klicken und dann Zusätzliches CSS auswählen. Leider kann das ChatGPT nicht genau wissen, weil Menüs und Klickpfade bekanntlich je nach CMS-Version, Konfiguration und den installierten Themes variieren.

Das gleiche Urteil – grundsätzlich richtig, aber für meine spezielle Situation inakkurat – lässt sich auch zum CSS-Code sagen, den ich von ChatGPT erhalte¹.

Warum? Ich führe eine Inspektion mit dem tollen Untersuchen-Befehl in Firefox durch, der beim Rechtsklick auf ein Seitenelement im Kontexmenü erscheint. Er zeigt auf, dass in meinem Fall das Youtube-Video nicht in einem Element namens .wp-block-embed__wrapper steckt. Das gehört mutmasslich zum Gutenberg-Editor.

Den verwende ich nicht, dafür habe ich aber die Jetpack-Erweiterung installiert, die sich anscheinend auch bei den eingebetteten Videos einmischt. Jedenfalls stecken meine Youtube-Videos im .jetpack-video-wrapper.

Ein Steilpass für die Faulen unter uns

Natürlich könnte ich den Code selbst anpassen, aber der Faulheit halber frage ich ChatGPT danach. Und voilà, ich erhalte sogleich die angepasste Stilanweisung zurück². Die funktioniert nun zumindest zur Hälfte: Die Videos werden jetzt schön zentriert (siehe z.B. hier), aber sie füllen die Spalte noch immer nicht vollkommen aus. Das scheint daran zu liegen, dass im Embed-Code die Breite und Höhe fix vorgegeben ist.

ChatGPT empfiehlt mir – wie erwartet –, die Angabe mit important zu überschreiben³. Das funktioniert ansatzweise: Die Videos erscheinen nun winzig, also wohl in der Standardgrösse, in der sie Youtube ausliefert. Ich komme wohl nicht umhin, die gewünschte Grösse selbst anzugeben⁴. Und das funktioniert: Die Youtube-Videos erscheinen in der gewünschten Spaltenbreite. Allerdings nur am Desktop-Computer und nicht am Handy – darum habe ich diese Deklaration wieder weggelassen.

Was lernen wir daraus?

Aus diesem simplen Experiment ergibt sich ohne jeden Zweifel, dass ChatGPT einen erfahrenen Webmaster nicht ersetzen kann. Nur er kennt die Unwägbarkeiten einer Site und weiss, auf welche individuellen Besonderheiten Rücksicht genommen werden muss. Das würde sich jedoch ändern, sobald ein solcher Bot in der Lage wäre, die fragliche Konfiguration selbst zu untersuchen.

Doch auch wenn ChatGPT den Webmaster nicht arbeitslos macht, ist unbestreitbar, was für eine riesige Hilfe die Sprachmodelle sind. Alles, was ich hier beschreibe, hätte ich zwar selbst ergoogeln können. Doch das wären allgemeine Informationen gewesen, die ich für meinen Fall hätte adaptieren müssen. Die pfannenfertige Lösung spart Zeit und oft genug auch Frust. Sie macht die eigenen Kenntnisse aber keineswegs überflüssig: Wer von CSS keine Ahnung hat, kommt auch mit ChatGPT nicht weiter.

PS: Ich habe auch Bing gefragt, allerdings ohne Erfolg. Microsofts Chatbot hat mir mitgeteilt, er kenne sich mit CSS nicht besonders gut aus.  Und noch ein Nachtrag: Ich habe mich des Weiteren danach erkundigt, ob es möglich wäre, die Fussnoten hier im Blog standardmässig auszublenden und nur bei Bedarf sichtbar zu machen. Auch diese Antwort ist einwandfrei und leider ist, wie befürchtet, dafür Javascript notwendig⁵.

/* Youtube-Videos in der Textspalte zentrieren */
.entry-content .wp-block-embed__wrapper {
    display: flex;
    justify-content: center;
}

/* Breite der Youtube-Videos festlegen */
.entry-content .wp-block-embed__wrapper iframe,
.entry-content .wp-block-embed__wrapper object,
.entry-content .wp-block-embed__wrapper video {
    max-width: 100%;
    height: auto;
}

/* Youtube-Videos in der Textspalte zentrieren */
.entry-content .jetpack-video-wrapper {
    display: flex;
    justify-content: center;
}
/* Breite der Youtube-Videos festlegen */
.entry-content .jetpack-video-wrapper iframe,
.entry-content .jetpack-video-wrapper object,
.entry-content .jetpack-video-wrapper video {
max-width: 100%;
height: auto;
}

.youtube-player {
    width: 100% !important;
    height: auto !important;
}

.youtube-player {
    width: 722px !important;
    height: 406px !important;
}

<button id="einblenden">Einblenden</button>
<div id="meinDiv">Dieser Inhalt wird ausgeblendet.</div>

#meinDiv {
  display: none;
}

document.getElementById("einblenden").addEventListener("click", function() {
  document.getElementById("meinDiv").style.display = "block";
});

Beitragsbild: Adobe Firefly zum Prompt «a friendly robot who designs a website on a computer screen».