WordPress Zusätzliches CSS: wo Sie es einfügen und wie Sie die Button-Farbe ändern

Bevor Sie CSS schreiben: Vielleicht reicht eine Einstellung

Die einfachste Button-Farbe ist die, die Sie ohne Code setzen. Prüfen Sie zuerst:

• Block-Theme: Design → Editor → Stile. In den Einstellungen für Blöcke oder Elemente finden Sie Buttons und können Hintergrund- und Textfarbe für die ganze Website ändern.
• Klassisches Theme: Design → Customizer. Viele Themes haben dort einen Abschnitt für Farben oder Buttons.
• WooCommerce-Shop: Buttons In den Warenkorb übernehmen ihre Farbe meist vom Theme, oft reicht also eine Änderung in den Theme-Stilen.

CSS brauchen Sie, wenn es keine solche Option gibt oder wenn Sie einen bestimmten Button ändern wollen.

Wo Zusätzliches CSS in Ihrem Theme ist

CSS aus dem Website-Editor und CSS aus dem Customizer sind zwei getrennte Orte. Die Notiz des WordPress-Core-Teams zu CSS in globalen Stilen erklärt das. Haben Sie ein Block-Theme, aber früher einmal CSS im Customizer eingefügt, lohnt es sich, es an einen Ort zu verschieben, damit Sie in einem Jahr wissen, wo Sie suchen müssen.

Eine Button-Farbe Schritt für Schritt ändern

1. Öffnen Sie die Seite mit dem Button, klicken Sie mit der rechten Maustaste darauf und wählen Sie Untersuchen. Sie sehen die Klasse des Elements, zum Beispiel wp-block-button__link oder button.
2. Gehen Sie zu der Stelle für Zusätzliches CSS aus der Tabelle oben.
3. Fügen Sie eine Regel hinzu, zum Beispiel:

.wp-block-button__link {
  background-color: #1f6f5c;
  color: #ffffff;
}
.wp-block-button__link:hover {
  background-color: #17574a;
}

4. Beobachten Sie die Vorschau. Hat sich die Farbe nicht geändert, ist eine Regel des Themes stärker. Setzen Sie den Namen eines Bereichs vor die Klasse, zum Beispiel .site-footer, statt die Regel gleich mit important zu erzwingen.
5. Veröffentlichen oder speichern Sie die Änderungen.
6. Prüfen Sie die Seite in einem privaten Fenster und auf dem Handy. Die Textfarbe muss auf dem neuen Hintergrund lesbar sein.

Die Farben im Beispiel sind nur Beispiele. Weitere Wege, auch über ein Child Theme und ein Plugin, beschreibt der Leitfaden von Hostinger zu eigenem CSS in WordPress.

Was ein paar Zeilen CSS sonst noch beheben

Die Button-Farbe ist der häufigste Wunsch, aber dasselbe Feld hilft bei anderen kleinen Stilkorrekturen:

• Ein Element ausblenden, zum Beispiel das Datum unter Beiträgen oder den Autorennamen, mit einer Regel display: none. Das Element steht weiter im Seitencode, Sie sehen es nur nicht.
• Abstände, wenn eine Überschrift an einem Bild klebt oder Buttons auf dem Handy zu dicht stehen.
• Schriftgröße an einer Stelle, zum Beispiel im Fußbereich, ohne die ganze Typografie des Themes zu ändern.
• Linkfarbe im Inhalt von Beiträgen, wenn die Farbe des Themes auf weißem Hintergrund zu blass ist.
• Layout auf dem Handy, mit einer Regel, die eine Bedingung zur Bildschirmbreite hat und nur auf schmalen Bildschirmen gilt.

Zwei Gewohnheiten ersparen Ihnen in ein paar Monaten die Suche. Setzen Sie über jede Regel einen Kommentar zwischen /* und */, zum Beispiel „grüne Buttons, Oktober 2026“. Und halten Sie alle Korrekturen an einem Ort, nicht ein bisschen im Customizer, ein bisschen in den Editor-Stilen und ein bisschen in den Einstellungen eines Page-Builder-Plugins. Dann sehen Sie leicht, welche Regel was macht, und entfernen ohne Sorge die, die Sie nicht mehr brauchen.

Ein Wort der Vorsicht zum Ausblenden. Verbergen Sie so einen Text, der für Kunden wichtig ist, etwa Versandkosten, verschwindet er vom Bildschirm, aber nicht aus den Pflichten des Shops. Solche Inhalte korrigieren Sie an der Quelle.

Wenn Zusätzliches CSS nicht reicht

Zusätzliches CSS ändert das Aussehen, nicht den Inhalt oder die HTML-Struktur. Damit fügen Sie keinen neuen Text in den Fußbereich ein und verschieben keinen Button in einen anderen Abschnitt. Dafür brauchen Sie Templates im Website-Editor oder Dateien in einem WordPress Child Theme. Sie sind im WordPress Theme Handbook beschrieben.

Ändert sich nach dem Speichern nichts, obwohl das CSS korrekt ist, ist oft der Cache schuld. Die Reihenfolge zum Leeren beschreiben wir im Beitrag WordPress Änderungen werden nicht angezeigt.

Wie der Chat CSS mit Vorschau ändert

Mit dem TellMyShop-Plugin für WordPress und WooCommerce liest Ihr Chat (Claude oder ChatGPT) Ihr aktuelles Zusätzliches CSS und fügt einen Teil hinzu oder ersetzt ihn. Vor dem Speichern prüft er, ob die geschweiften Klammern zusammenpassen, und warnt Sie vor dem Laden von Stilen von anderen Domains. In einem Block-Theme ändert er auch Farben und Typografie in den globalen Stilen.