Das zusätzliche CSS der Website anzeigen oder ändern

Ein Button soll abgerundet sein, eine Überschrift kleiner, ein Abstand größer, und das Theme bietet dafür keine Einstellung. Dafür gibt es das zusätzliche CSS, aber die richtige Regel zu schreiben und genau das zu treffen, was gemeint ist, ist nicht jedermanns Sache.

Im Admin-Bereich öffnest du Design → Customizer → Zusätzliches CSS, trägst die Regeln ein und siehst in der Vorschau, ob es passt. Das vorhandene CSS liest du selbst durch, und eine Regel mit Fehler wirkt auf jede Seite der Website.

Besser ist es, das vorhandene CSS zuerst zu lesen, die neue Regel dahinterzusetzen, ohne Bestehendes zu überschreiben, und das Ergebnis vor dem Speichern anzusehen.

Die KI schreibt das CSS nach deiner Beschreibung und speichert es erst nach deinem Ja.

Der Prompt für ChatGPT, Claude und Co.

Ersetze [Wunsch] durch das, was sich auf der Website ändern soll, zum Beispiel „alle Buttons sollen abgerundete Ecken haben“. Der Rest der Aufgabenstellung bleibt unverändert:

Zeige mir das zusätzliche CSS meiner Website. Schreibe dann CSS, damit gilt: [Wunsch]. Hänge es an das vorhandene CSS an und ersetze nichts. Zeige mir die neuen Regeln und sage mir, welche Stellen der Website sie betreffen. Speichere erst nach meiner ausdrücklichen Bestätigung. Nenne mir danach, was gespeichert wurde. Wenn du das nicht erledigen kannst, nenne mir den Grund und erkläre mir Schritt für Schritt, wie ich das CSS im WordPress-Admin selbst eintrage.

Prompt kopieren

Wird an meiner Website etwas geändert?

Ja. Das zusätzliche CSS des aktiven Themes wird ergänzt und gilt sofort für alle Besucher. Der Prompt lässt die KI vorher aufschreiben, was sie vorhat, und auf dein Ja warten.

Kann ich das rückgängig machen?

Ja. Die KI zeigt dir vorher das bisherige CSS und setzt es auf Wunsch wieder ein. Außerdem behält WordPress bei jedem Speichern eine Revision.

Das musst du beachten

Es geht um das zusätzliche CSS des aktiven Themes. Jedes Theme hat sein eigenes, bei einem Themewechsel ist es nicht mehr aktiv. Das CSS anderer Themes kann die KI lesen, aber nicht ändern.

Bei Block-Themes liegen Farben, Schriften und CSS der globalen Stile im Editor unter Design → Editor → Stile. Das ist ein anderer Speicherort. Dafür gibt es Farben, Schriften oder Abstände der Website ändern.

Ersetzt die KI das gesamte CSS, statt etwas anzuhängen, geht Bestehendes verloren. Der Prompt verlangt deshalb das Anhängen. Beim Aufräumen zeigt sie dir vorher Alt und Neu.

CSS, das einen Teil eines style-Tags enthält, lehnt WordPress ab, dann bleibt alles unverändert. Sieh dir nach dem Speichern die Startseite und eine Unterseite an.

Das Ändern des zusätzlichen CSS ist im MCP-Plugin zunächst ausgeschaltet. Ein Administrator schaltet es in den Einstellungen des MCP-Plugins ein. Das Lesen funktioniert ohne diesen Schritt.

Das zusätzliche CSS aufräumen und kürzen

Über die Jahre wächst das zusätzliche CSS: Regeln stehen doppelt, spätere überschreiben frühere, und niemand weiß mehr, wofür eine Zeile gut ist. Das alles zu durchsuchen, dauert. Die KI liest das CSS, findet doppelte und überschriebene Regeln und schlägt eine kürzere Fassung mit gleicher Wirkung vor.

Lies das zusätzliche CSS meiner Website und finde Regeln, die doppelt vorkommen, die von einer späteren Regel überschrieben werden oder sich widersprechen. Schlage mir eine bereinigte Fassung mit gleicher Wirkung vor, mit Kommentaren, die kurz sagen, wofür jeder Block gedacht ist. Zeige mir das bisherige und das neue CSS nebeneinander und nenne mir, was du entfernt hast und warum. Speichere nichts, ich entscheide danach.

Prompt kopieren

Du bekommst das bisherige und das bereinigte CSS und eine Liste dessen, was entfällt. Ob das Aussehen gleich bleibt, siehst du erst auf der Website: Speicherst du die neue Fassung, sieh dir Startseite und eine Unterseite an. Das bisherige CSS hast du vorher von der KI bekommen und kannst es jederzeit wieder einsetzen lassen.