So fügen Sie benutzerdefiniertes CSS in WordPress hinzu 

Haben Sie jemals versucht, eine Farbe zu ändern oder etwas auf Ihrer WordPress-Website auszublenden, nur um festzustellen, dass es keine Option dafür gibt? Ich war auch schon da. Ich erinnere mich, dass ich viel zu lange in meinen Theme-Einstellungen nach einer einfachen Schriftartänderung gesucht habe, die einfach nicht möglich war.

Da habe ich von benutzerdefiniertem CSS erfahren. Es ist eine schnelle Möglichkeit, kleine visuelle Probleme auf Ihrer Website zu beheben, ohne Theme-Dateien zu bearbeiten oder einen Entwickler zu beauftragen.

Sie müssen dafür keine Programmierkenntnisse haben. Es gibt vier Stellen, an denen Sie benutzerdefiniertes CSS in WordPress hinzufügen können, und die Wahl, die Sie treffen, entscheidet darüber, ob Ihre Stile den nächsten Theme-Wechsel überstehen.

Methoden zum Hinzufügen von benutzerdefiniertem CSS in WordPress:

• 1. Benutzerdefiniertes CSS mit SeedProd hinzufügen
• 2. Benutzerdefiniertes CSS ohne Seitenersteller hinzufügen
• 3. Verwenden Sie ein benutzerdefiniertes CSS-Plugin
• 4. Bearbeiten Sie Ihre Theme-Dateien (nicht empfohlen)
• Warum fehlt die Option „Zusätzliches CSS“?
• Welche Methode sollten Sie verwenden?
• Bonus: Benutzerdefiniertes CSS auf Seiten oder Blöcke anwenden

Was ist benutzerdefiniertes CSS?

CSS steht für Cascading Style Sheets. Es ist eine einfache Sprache, die steuert, wie Ihre WordPress-Website aussieht.

Zum Beispiel ändert dieser CSS-Code eine Überschriftenfarbe zu Rot:

h1 {
  color: red;
}

Und dieser blendet ein Element auf der Seite aus:

.hidden {
  display: none;
}

Sie müssen keinen Code wie diesen von Grund auf neu schreiben. Meistens kopieren und fügen Sie ihn einfach an der richtigen Stelle ein.

Der Schlüssel ist zu wissen, wo Sie Ihr benutzerdefiniertes CSS platzieren, und genau das zeige ich Ihnen als Nächstes.

Warum benutzerdefiniertes CSS in WordPress hinzufügen?

Manchmal möchten Sie eine Schaltfläche einfärben, eine Überschrift zentrieren oder einen zusätzlichen Abstand entfernen, und Ihr Theme bietet Ihnen keine Möglichkeit dazu.

Hier kommt benutzerdefiniertes CSS ins Spiel. Es gibt Ihnen die Kontrolle über die kleinen Designdetails, die Ihre Website genau richtig aussehen und sich anfühlen lassen.

Mit CSS sind Sie nicht an die Standardeinstellungen Ihres WordPress-Themes gebunden. Sie können Ihr Layout, Ihren Stil und Ihre Abstände feinabstimmen, ohne das Theme zu wechseln oder zusätzliche WordPress-Plugins zu installieren.

Denken Sie daran: CSS hilft bei der Anpassung Ihres Designs, behebt aber keine größeren visuellen Fehler, die benutzerdefiniertes CSS nicht beheben kann, wie z. B. unübersichtliche Layouts oder schlechte Navigation.

Wie fügen Sie also tatsächlich benutzerdefiniertes CSS in WordPress hinzu?

Es gibt verschiedene Möglichkeiten, aber ich beginne mit der, die ich am häufigsten verwende und die ich empfehle, wenn Sie die volle Kontrolle ohne den Aufwand wünschen.

1. Benutzerdefiniertes CSS mit SeedProd hinzufügen (mein bevorzugter Weg)

Wenn Sie SeedProd noch nie verwendet haben, ist es ein Drag-and-Drop-WordPress-Builder, der die Anpassung Ihrer Website super einfach macht, auch wenn Sie kein Entwickler sind.

Ich benutze es ständig, weil ich vollständige Themes oder Landingpages erstellen kann, ohne Code anfassen zu müssen. Und wenn ich doch ein wenig CSS hinzufügen möchte, bietet mir SeedProd einen einfachen Ort dafür.

Bevor wir zu den Schritten kommen, ist es hilfreich, SeedProd auf Ihrer Website eingerichtet zu haben.

Wenn Sie es noch nicht verwendet haben, finden Sie hier ein paar anfängerfreundliche Anleitungen, die Ihnen den Einstieg erleichtern:

• So erstellen Sie ein benutzerdefiniertes WordPress-Theme ohne Code
• So erstellen Sie eine Landingpage in WordPress

Sobald Sie eine Landingpage oder ein Theme mit SeedProd erstellt haben, können Sie Ihr eigenes benutzerdefiniertes CSS hinzufügen. Beginnen wir damit, wie Sie dies auf einer einzelnen Landingpage tun.

So fügen Sie CSS zu einer Landingpage in SeedProd hinzu

Öffnen Sie zunächst Ihr WordPress-Dashboard und gehen Sie zu SeedProd » Landing Pages.

Suchen Sie die Landingpage, die Sie bearbeiten möchten, und klicken Sie auf den Link Bearbeiten daneben.

Dies öffnet den SeedProd Page Builder. Klicken Sie in der unteren linken Ecke auf das Zahnradsymbol, um Ihre Globalen Einstellungen zu öffnen.

Klicken Sie in der linken Seitenleiste auf den Tab Benutzerdefiniertes CSS.

Fügen Sie nun Ihr CSS ein. Hier ist zum Beispiel eines, das Ihren Absatztext formatiert:

p {
  font-style: italic;
  color: #444;
}

Klicken Sie auf die Schaltfläche Speichern in der oberen rechten Ecke.

Sie können Ihre Seite dann in der Vorschau anzeigen, um die gespeicherten Änderungen live auf Ihrer Website zu sehen.

So fügen Sie globales CSS mit dem Theme Builder von SeedProd hinzu

Wenn Sie den Theme Builder von SeedProd verwenden, um Ihre gesamte Website zu gestalten, können Sie benutzerdefiniertes CSS anwenden, das auf jeder Seite funktioniert.

Öffnen Sie zunächst Ihr WordPress-Dashboard und gehen Sie zu SeedProd » Theme Builder.

Suchen Sie die Vorlage namens Globales CSS und klicken Sie auf Design bearbeiten.

Klicken Sie im Builder auf das Zahnradsymbol in der unteren linken Ecke, um die Globalen Einstellungen zu öffnen.

Klicken Sie in der linken Seitenleiste auf den Tab Benutzerdefiniertes CSS.

Klicken Sie auf die Schaltfläche Benutzerdefiniertes CSS bearbeiten. Dies öffnet den WordPress Customizer in einem neuen Fenster.

Klicken Sie im Customizer auf Zusätzliches CSS und fügen Sie dann Ihren Code ein.

Zum Beispiel:

p {
  font-style: italic;
}

Dadurch wird der gesamte Absatztext auf Ihrer Website kursiv angezeigt.

Klicken Sie auf Veröffentlichen, um Ihre Änderungen zu speichern und sie websiteweit anzuwenden.

Sie können Ihre Seite jetzt aktualisieren, um die Änderungen live zu sehen.

Diese Methode ist hilfreich für globale Stiländerungen wie Schriftanpassungen, Abstände und Farbänderungen.

2. Benutzerdefiniertes CSS in WordPress ohne Page Builder hinzufügen

Wenn Sie keinen Page Builder wie SeedProd verwenden, können Sie trotzdem benutzerdefiniertes CSS direkt in WordPress hinzufügen. Die Schritte hängen vom Typ Ihres Themes ab, entweder ein klassisches Theme oder ein Block-Theme.

Klassische Themes verwenden das ältere Customizer-Tool und basieren oft auf Widgets und Seitenvorlagen. Block-Themes hingegen verwenden den neueren Site-Editor, mit dem Sie Ihre gesamte Website mit Blöcken gestalten können.

Beide Boxen sind in WordPress integriert, es muss also nichts installiert werden. Ich verwende sie für einmalige Änderungen und nicht für etwas, das ich behalten möchte, da WordPress das CSS unter dem jeweils aktiven Theme ablegt.

Verwenden Sie den WordPress Customizer (Klassische Themes)

Gehen Sie in Ihrem WordPress-Dashboard zu Darstellung » Anpassen.

Klicken Sie im Customizer-Menü auf Zusätzliches CSS.

Ein Textfeld wird angezeigt, in das Sie Ihren benutzerdefinierten Code einfügen können. Zum Beispiel:

p {
  color: #0073aa;
}

Dadurch wird der gesamte Absatztext auf Ihrer Website in einen Blauton geändert.

Sie sehen eine Live-Vorschau Ihrer Änderungen auf der rechten Seite, während Sie tippen.

Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf die Schaltfläche Veröffentlichen, um Ihre Änderungen zu speichern.

Diese Methode funktioniert gut mit älteren Themes, die den Customizer unterstützen, und erfordert keine WordPress-Plugins.

Verwenden Sie den Website-Editor (Block-Themes)

Wenn Ihre WordPress-Website ein Block-Theme verwendet, verwalten Sie Ihr Design über den vollständigen Website-Editor anstelle des Customizers.

Gehen Sie zunächst im WordPress-Dashboard zu Darstellung » Editor.

Klicken Sie in der linken Seitenleiste auf das Symbol Stile. Es sieht aus wie ein Halbmond oder eine Farbpalette.

Klicken Sie dann auf das kleine Stiftsymbol mit der Bezeichnung Stile bearbeiten.

Sie sehen nun den WordPress-Editor. Klicken Sie in der oberen rechten Ecke des Bildschirms auf das Drei-Punkte-Menü (⋮) und wählen Sie im Dropdown-Menü Zusätzliches CSS.

Fügen Sie Ihren benutzerdefinierten Code in das Feld ein. Zum Beispiel:

p {
  color: #0073aa;
}

Dadurch wird die Farbe des Absatztextes auf Ihrer gesamten Website geändert.

Klicken Sie oben rechts auf Speichern, um die Änderungen zu übernehmen.

3. Verwenden Sie ein benutzerdefiniertes CSS-Plugin

Wenn Ihr Theme den Customizer oder den Website-Editor nicht unterstützt oder Sie einfach eine saubere Möglichkeit suchen, Ihr CSS an einem Ort zu verwalten, empfehle ich die Verwendung eines Plugins wie WPCode.

WPCode ist ein leichtgewichtiges WordPress-Plugin, mit dem Sie benutzerdefinierte Code-Snippets, einschließlich CSS, hinzufügen können, ohne Ihre Theme-Dateien zu bearbeiten.

Nachdem Sie WPCode installiert und aktiviert haben, gehen Sie im WordPress-Dashboard zu Code-Snippets » + Snippet hinzufügen.

Klicken Sie in das Feld Fügen Sie Ihren benutzerdefinierten Code hinzu (Neues Snippet) und geben Sie Ihrem Snippet einen Namen, z. B. Benutzerdefinierte CSS-Stile.

Wählen Sie unter Code-Typ im Dropdown-Menü CSS-Snippet aus.

Fügen Sie nun Ihr CSS in das Codefeld ein. Zum Beispiel:

p {
  color: #0073aa;
}

Scrollen Sie nach unten und wählen Sie Automatisch einfügen, um das CSS auf Ihrer gesamten Website anzuwenden.

Klicken Sie dann auf Snippet speichern und schalten Sie den Schalter oben auf Aktiv.

Das war's! Ihre benutzerdefinierten Stile sind jetzt auf Ihrer gesamten Website live, und Sie können jederzeit zu diesem Snippet zurückkehren, um Änderungen vorzunehmen.

4. Bearbeiten Sie Ihre Theme-Dateien (nicht empfohlen)

Diese Methode funktioniert nur, wenn Sie ein klassisches Theme verwenden. Block-Themes bieten keinen Zugriff auf den Theme-Datei-Editor im WordPress-Dashboard.

Wenn Sie ein klassisches Theme verwenden und mit der Codebearbeitung vertraut sind, können Sie benutzerdefiniertes CSS direkt in die style.css-Datei Ihres Themes einfügen. Dies empfehle ich jedoch nicht, es sei denn, Sie wissen, was Sie tun.

Wenn Sie Theme-Dateien direkt bearbeiten, können Ihre Änderungen bei Updates verloren gehen. Sie sehen auch keine Live-Vorschau, und selbst ein kleiner Tippfehler kann Ihr Layout beschädigen.

Wenn Sie jedoch ein Child-Theme verwenden oder wissen, wie Sie Ihre Website wiederherstellen können, falls etwas schief geht, erfahren Sie hier, wie es geht.

Gehen Sie im WordPress-Dashboard zu Darstellung » Theme-Datei-Editor.

Klicken Sie aus der Dateiliste auf der rechten Seite auf style.css.

Scrollen Sie zum Ende der Datei und fügen Sie Ihr CSS ein. Zum Beispiel:

p {
  color: #0073aa;
}

Klicken Sie auf Datei aktualisieren, um Ihre Änderungen zu speichern.

Warum fehlt die Option „Zusätzliches CSS“ in WordPress?

WordPress blendet „Zusätzliches CSS“ für jedes Konto aus, dem die Berechtigung edit_css fehlt. Wenn die Box also verschwindet, ist es die Berechtigung, die fehlt, nicht die Funktion.

Das Theme ist der offensichtliche Verdächtige, und das ist es fast nie. WordPress führt die gleiche Berechtigungsprüfung für die Customizer-Box und die Website-Editor-Box durch, sodass ein Theme-Wechsel nichts ändert.

Drei Dinge schalten diese Berechtigung ab:

• Eine Sicherheitseinstellung in wp-config.php. Wenn DISALLOW_UNFILTERED_HTML auf einer Website definiert ist, entzieht WordPress allen, einschließlich Administratoren, die Möglichkeit, benutzerdefiniertes CSS zu bearbeiten.
• Multisite. In einem WordPress-Netzwerk behält nur der Super-Admin, der das Netzwerk verwaltet, die Berechtigung, sodass einzelne Website-Admins die Box verlieren.
• Ein Härtungs-Plugin, das es entfernt. Die Berechtigung edit_css basiert auf einer älteren Berechtigung namens unfiltered_html, und einige Sicherheits-Plugins entfernen diese, wodurch die CSS-Box mit entfernt wird.

Ich habe dies im Code von WordPress 7.1 selbst gelesen, anstatt die Theme-Erklärung zu wiederholen, da die Option überhaupt nicht auf Theme-Unterstützung basiert.

Wenn Sie der einzige Administrator sind und nichts Offensichtliches Sie blockieren sollte, fragen Sie Ihren Hoster oder wer auch immer die Website eingerichtet hat, ob DISALLOW_UNFILTERED_HTML in Ihrer wp-config.php-Datei definiert ist. Das ist die schnellste Möglichkeit, dies auszuschließen.

Wenn sich die Einstellung als bewusst herausstellt, respektieren Sie sie und legen Sie Ihr CSS irgendwo ab, das nicht die gleiche Prüfung durchläuft. SeedProds Custom CSS-Box speichert über die eigenen Berechtigungen des Builders, und WPCode verwendet seine eigene Snippet-Berechtigung, sodass ein fehlendes Feld für zusätzliches CSS keines von beiden am Funktionieren hindert.

Welche Methode sollten Sie verwenden?

Wählen Sie basierend darauf, was passieren soll, wenn Sie Ihr Theme ändern, denn das ist der wirkliche Unterschied zwischen diesen vier.

Methode	Am besten für	Überlebt eine Theme-Änderung?	Benötigt einen kostenpflichtigen Plan?
SeedProd	Gestaltung von Landingpages und Vorlagen, die Sie selbst erstellt haben	Ja, das CSS wird mit der Seite gespeichert	Nein für eine einzelne Seite, Plus für die gesamte Website
Customizer oder Site Editor	Eine schnelle Anpassung des Themes, das Sie gerade verwenden	Nein, WordPress speichert es pro Theme	Nein
WPCode	CSS, das Sie bei jeder Theme-Änderung beibehalten möchten	Ja	Nein
Theme-Dateien	Nichts, es sei denn, Sie arbeiten in einem Child-Theme	Nein, das nächste Update überschreibt es	Nein

Wenn das CSS website-weit ist und Sie aufhören möchten, darüber nachzudenken, würde ich WPCode verwenden, da es das einzige der vier ist, das Ihr Theme komplett ignoriert. Wenn die Gestaltung zu einer Seite gehört, die Sie entworfen haben, behalten Sie sie in SeedProd zusammen mit der Seite.

Der Customizer ist immer noch gut für eine kleine Anpassung, die Sie nach einem Re-Theme nicht vermissen würden. Wissen Sie einfach, dass Sie sich dafür entscheiden.

Bonus: Benutzerdefiniertes CSS auf Seiten oder Blöcke anwenden

Manchmal möchten Sie nicht, dass Ihr CSS die gesamte Website beeinflusst, sondern nur auf einer Seite oder einem einzelnen Block angewendet wird. Dies können Sie durch die Verwendung von Seiten-IDs oder benutzerdefinierten CSS-Klassen erreichen.

Seiten-IDs in WordPress verwenden

Jede Seite in WordPress hat eine eindeutige ID, die Sie verwenden können, um Stile nur für diese Seite anzusprechen.

Um die Seiten-ID zu finden, besuchen Sie die Seite in Ihrem Browser, klicken Sie mit der rechten Maustaste irgendwo und wählen Sie Untersuchen.

Suchen Sie im Code nach dem Tag <body>. Es wird eine Klasse wie page-id-37 enthalten.

Sie können dies dann in Ihrem CSS wie folgt verwenden:

.page-id-37 p {
  color: green;
}

Dadurch wird die Textfarbe des Absatzes nur auf dieser spezifischen Seite geändert.

SeedProd-Blockeinstellungen verwenden

Wenn Sie SeedProd verwenden, können Sie bestimmte Blöcke ansprechen, indem Sie einen benutzerdefinierten Klassennamen hinzufügen.

Öffnen Sie Ihre Seite im SeedProd-Builder und klicken Sie auf den Block, den Sie gestalten möchten. In meinem Fall möchte ich einen bestimmten Überschriftenblock gestalten.

Gehen Sie im linken Bereich zum Tab Erweitert, suchen Sie die Option Attribute und erweitern Sie sie.

Finden Sie das Feld mit der Bezeichnung CSS-Klasse und fügen Sie einen Klassennamen wie my-special-style hinzu.

Fügen Sie dann in Ihrem globalen oder seitenbezogenen Feld für benutzerdefiniertes CSS etwas wie folgt hinzu:

.my-special-style {
  background-color: #fff7e6;
  border-radius: 10px;
}

Nachdem Sie die Seite gespeichert und in der Vorschau angezeigt haben, sehen Sie Ihre Änderungen an diesem spezifischen Block, ohne den Rest Ihrer Website zu beeinträchtigen.

FAQs zum Hinzufügen von benutzerdefiniertem CSS in WordPress

Wie füge ich CSS zu einer bestimmten Seite hinzu?

Sie können eine Seite mit ihrer eindeutigen Seiten-ID ansprechen, z. B. .page-id-123 p { color: red; }. Wenn Sie SeedProd oder WPCode verwenden, fügen Sie dem Block oder Abschnitt, den Sie gestalten möchten, eine benutzerdefinierte CSS-Klasse hinzu und sprechen Sie diese Klasse stattdessen an.

Kann ich HTML und CSS zusammen verwenden?

Ja. Sie können HTML in WordPress-Blöcke oder Widgets einfügen und es mit benutzerdefiniertem CSS gestalten, solange Ihr CSS das richtige Element oder die richtige Klasse anspricht.

Ist es sicher, CSS ohne Entwickler hinzuzufügen?

Ja, solange Sie sich von Ihren Theme-Dateien fernhalten. CSS ändert nur das Aussehen, sodass ein Fehler als visuelle Eigenart und nicht als kaputte Website erscheint, und Sie können die Regel löschen, um sie rückgängig zu machen. Das direkte Bearbeiten von Theme-Dateien ist der einzige Teil davon, der ein echtes Risiko birgt.

Beeinflusst das Hinzufügen von CSS zu WordPress mobile Geräte?

Ihr CSS gilt für jede Bildschirmgröße, es sei denn, Sie verpacken es in eine Media Query. Wenn Sie in SeedProd arbeiten, können Sie im Builder zur mobilen Vorschau wechseln und es dort anpassen, bevor Sie veröffentlichen.

Warum funktioniert mein benutzerdefiniertes CSS nicht?

Meistens sind zwei Dinge die Ursache. Entweder ist eine Regel in Ihrem Theme spezifischer als Ihre, sodass sie gewinnt, oder ein Caching-Plugin liefert immer noch das alte Stylesheet aus. Leeren Sie zuerst Ihren Cache, klicken Sie dann mit der rechten Maustaste auf das Element und wählen Sie „Untersuchen“, um zu sehen, welche Regel tatsächlich angewendet wird.

Wo speichert WordPress mein benutzerdefiniertes CSS?

CSS, das Sie im Customizer hinzufügen, wird in einem versteckten Beitrag gespeichert, den WordPress nach Ihrem aktiven Theme benennt. Deshalb folgt es Ihnen nicht, wenn Sie wechseln. Der Site Editor speichert sein CSS mit den globalen Stilen Ihres Themes. SeedProd und WPCode speichern beides außerhalb des Themes.

Bereit, Ihre WordPress-Website anzupassen?

Benutzerdefiniertes CSS ist der schnellste Weg, um ein Theme zu umgehen, das Sie etwas nicht ändern lässt, und keines davon erfordert einen Entwickler.

Sie müssen nichts neu erstellen oder lernen, wie Stylesheets funktionieren, um es zu verwenden. Entscheiden Sie, wo das CSS leben soll, fügen Sie es ein und sehen Sie sich die Seite in Ihrem Browser an.

Wenn Sie die Gestaltung lieber visuell vornehmen und sie an der erstellten Seite anhaften lassen möchten, erledigt SeedProd beides am selben Ort.

Möchten Sie Ihre WordPress-Website weiter anpassen?

Hier sind einige Anleitungen, die ich als Nächstes empfehle:

• So bearbeiten Sie Ihre WordPress-Homepage
• Anpassen von Headern in WordPress
• So fügen Sie Testimonials zu WordPress-Seiten hinzu
• So erstellen Sie eine benutzerdefinierte 404-Seite in WordPress

Danke fürs Lesen! Wir würden uns freuen, Ihre Gedanken zu hören. Treten Sie also gerne der Unterhaltung auf YouTube, X und Facebook bei, um weitere hilfreiche Ratschläge und Inhalte für das Wachstum Ihres Unternehmens zu erhalten.