So fügen Sie eigenes CSS in WordPress hinzu (4 einfache Methoden)

Cascading Style Sheets (CSS) bestimmen, wie HTML-Elemente auf einer Webseite dargestellt werden, und steuern Schriftarten, Farben, Abstände und das Layout. WordPress-Themes enthalten integrierte Designoptionen, doch häufig benötigen Sie eigenes CSS, um visuelle Elemente anzupassen, die sich mit den Standardoptionen nicht verändern lassen.

Es gibt vier zuverlässige Möglichkeiten, eigene Styles zu Ihrer WordPress-Website hinzuzufügen:

• Der Block-Editor. Fügen Sie im Site Editor eine neue CSS-Klasse hinzu und weisen Sie sie anschließend bestimmten Blöcken über den Bereich Erweitert zu.
• Der WordPress-Customizer. Öffnen Sie im Dashboard den Bereich Zusätzliches CSS und fügen Sie Ihren Code ein, um Änderungen sofort in der Vorschau zu sehen.
• Ein Child-Theme. Erstellen Sie ein Child-Theme-Verzeichnis und bearbeiten Sie die Datei style.css, damit Ihre Änderungen auch nach Updates des Parent-Themes erhalten bleiben.
• Ein Plugin. Installieren Sie einen Code-Snippet-Manager, um eigene CSS-Regeln einzufügen, zu organisieren und bei Bedarf zu aktivieren oder zu deaktivieren, ohne Theme-Dateien zu bearbeiten.

So fügen Sie mit dem Block-Editor eine eigene CSS-Klasse hinzu

Wenn Sie ein Block-Theme (WordPress 5.9 oder neuer) verwenden, können Sie eigenes CSS gezielt auf einzelne Elemente im Block-Editor anwenden. Bei dieser Methode definieren Sie zunächst eine Klasse im Site Editor und weisen diese anschließend einem Block zu.

Fügen Sie zuerst den CSS-Code im Site Editor hinzu:

1. Melden Sie sich in Ihrem WordPress-Dashboard an und öffnen Sie Design → Editor.
2. Klicken Sie in der linken Seitenleiste auf das Symbol Stile (der schwarz-weiße Kreis). Öffnen Sie anschließend das Menü mit den drei Punkten oben rechts im Bereich und wählen Sie Zusätzliches CSS.

3. Definieren Sie anschließend Ihre neue CSS-Klasse. Für dieses Beispiel erstellen Sie eine Klasse namens custom-highlight, die einen grünen Hintergrund und weißen Text hinzufügt:

.custom-highlight {
   background-color: #28a745;
   color: #ffffff;
   padding: 10px;
}

4. Klicken Sie auf 1 Änderung überprüfen → Speichern, um die Änderungen zu übernehmen.

Nachdem Sie die Klasse definiert haben, können Sie sie einem Block in Ihren Beiträgen oder Seiten zuweisen:

1. Öffnen Sie Beiträge → Alle Beiträge und bearbeiten Sie den Beitrag, den Sie aktualisieren möchten.
2. Wählen Sie den Block aus, den Sie ändern möchten (zum Beispiel einen Absatzblock).
3. Öffnen Sie in der rechten Seitenleiste den Bereich Erweitert.
4. Geben Sie im Feld Zusätzliche CSS-Klasse(n) den von Ihnen erstellten Klassennamen ein.

5. Klicken Sie auf Speichern. Der ausgewählte Block übernimmt nun die im Stylesheet definierten Styles.

Mit dieser Methode wenden Sie Stile gezielt auf einzelne Blöcke an, statt auf alle Elemente eines Typs auf Ihrer Website. Das eignet sich besonders für einmalige Anpassungen, etwa um einen einzelnen Absatz oder einen Call-to-Action hervorzuheben, ohne andere Blöcke desselben Typs zu beeinflussen.

So fügen Sie eigenes CSS mit dem WordPress-Customizer hinzu

Wenn Sie ein klassisches Theme verwenden, ist der WordPress-Customizer die benutzerfreundlichste Methode, um eigenes CSS hinzuzufügen. Diese Funktion wurde mit WordPress 4.7 eingeführt und ermöglicht es Ihnen, CSS zu schreiben und die Änderungen sofort zu sehen, bevor Sie sie veröffentlichen.

1. Öffnen Sie Design → Customizer.
2. Klicken Sie in der linken Seitenleiste auf Zusätzliches CSS.

3. Ein Code-Editor wird geöffnet. Geben Sie Ihre CSS-Regeln ein oder fügen Sie sie ein. Zum Beispiel, um Absatztext zu formatieren:

p {
   color: green;
   font-size: 16px;
}

4. Der Vorschaubereich auf der rechten Seite aktualisiert sich sofort.
5. Wenn Sie mit dem Ergebnis zufrieden sind, klicken Sie auf Veröffentlichen.

Diese Methode speichert Ihr CSS in der Datenbank statt in den Theme-Dateien. Dadurch bleiben Ihre Änderungen erhalten, wenn Sie das Theme aktualisieren. Wenn Sie jedoch zu einem anderen Theme wechseln, gehen diese Anpassungen verloren. Wenn Sie häufiger Themes wechseln, sollten Sie stattdessen ein Plugin verwenden.

So fügen Sie eigenes CSS mit einem Child-Theme hinzu

Das Bearbeiten der Datei style.css eines Parent-Themes ist riskant, da Theme-Updates die Datei überschreiben und Ihre Anpassungen löschen können. Ein Child-Theme verhindert dieses Problem, indem es Ihre Änderungen in einem separaten Verzeichnis speichert, das WordPress nach dem Parent-Theme lädt. Dadurch können Ihre Anpassungen die Styles des Parent-Themes überschreiben.

1. Greifen Sie über den Dateimanager Ihres Hosting-Kontrollpanels oder über einen FTP-Client wie FileZilla auf die Dateien Ihrer Website zu.
2. Navigieren Sie zum Verzeichnis wp-content/themes/.
3. Öffnen Sie den Ordner Ihres aktiven Child-Themes.

4. Suchen Sie die Datei style.css und öffnen Sie sie.
5. Fügen Sie Ihr eigenes CSS am Ende der Datei hinzu. Beispiel:

body {
   background-color: #f0f0f1;
}

6. Speichern Sie die Datei oder laden Sie sie erneut auf Ihren Server hoch.

Diese Methode eignet sich besonders für Entwickler oder Website-Betreiber, die umfangreiche Designanpassungen planen. Damit bleibt Ihr eigener Code strukturiert und wird bei zukünftigen Theme-Updates nicht überschrieben.

So fügen Sie eigenes CSS mit einem Plugin hinzu

Wenn Sie Theme-Dateien nicht bearbeiten oder den Customizer nicht verwenden möchten, bietet ein Plugin eine sichere und strukturierte Alternative. Wir empfehlen WPCode, da das Plugin ein leistungsfähiges Snippet-Management sowie eine Bibliothek mit mehr als 100 vorgefertigten Code-Snippets bietet.

1. Installieren und aktivieren Sie das Plugin über Plugins → Plugins hinzufügen.
2. Öffnen Sie Code Snippets → + Add Snippet.
3. Bewegen Sie den Mauszeiger über Add Your Custom Code (New Snippet) und klicken Sie auf + Add Custom Snippet.

4. Wählen Sie CSS Snippet als Code-Typ aus.
5. Geben Sie anschließend einen Titel für Ihr Snippet ein (zum Beispiel „Custom header styles“).
6. Fügen Sie Ihr CSS in den Code-Editor ein. Zum Beispiel:

/* Highlight important text */
.highlight {
   background-color: #fffa9c;
   padding: 4px 6px;
   border-radius: 4px;
}

7. Stellen Sie Active auf On und klicken Sie anschließend auf Save Snippet.

Plugins sind besonders nützlich, wenn Sie häufig das Theme wechseln, da das CSS unabhängig davon aktiv bleibt, welches Theme gerade aktiv ist. Ihre eigenen Stile werden unabhängig von Ihren Theme-Dateien gespeichert.

Fehlerbehebung bei häufigen Problemen mit eigenem CSS in WordPress

Die meisten Probleme mit eigenem CSS in WordPress lassen sich beheben, indem Sie den Cache leeren, die Spezifität von CSS-Selektoren überprüfen oder Syntaxfehler korrigieren.

CSS-Änderungen werden nicht angezeigt

Der häufigste Grund, warum neue CSS-Änderungen nicht erscheinen, ist Caching. Browser und Caching-Plugins speichern statische Versionen Ihrer Website, um die Ladegeschwindigkeit zu verbessern. Dadurch kann es passieren, dass aktualisiertes CSS nicht sofort angezeigt wird.

• Browser-Cache. Leeren Sie den Browser-Cache oder führen Sie einen Hard Refresh aus (Strg + Umschalt + R unter Windows, Cmd + Umschalt + R auf dem Mac). Sie können die Seite auch in einem Inkognito- oder privaten Fenster öffnen, um zwischengespeicherte Dateien zu umgehen.
• Server- oder Plugin-Cache. Wenn Sie ein Caching-Plugin wie WP Super Cache, W3 Total Cache oder LiteSpeed Cache verwenden, löschen Sie den Cache in den Einstellungen des Plugins. Wenn Ihr WordPress-Host Caching auf Serverebene nutzt (zum Beispiel über den Hostinger Cache Manager), löschen Sie den Cache zusätzlich über Ihr Control Panel.

CSS-Selektor-Spezifität

Wenn Ihr Code vorhanden ist, aber nicht angewendet wird, werden die Regeln möglicherweise von vorhandenen Theme-Styles überschrieben. CSS priorisiert Regeln anhand der sogenannten Spezifität. Dabei werden Inline-Styles höher gewichtet als IDs, IDs höher als Klassen und Klassen höher als Elementselektoren.

Um das Problem zu beheben, verwenden Sie einen spezifischeren CSS-Selektor. Statt nur .button zu verwenden, können Sie beispielsweise div.content .button ansprechen oder einen übergeordneten Container in den Selektor aufnehmen.

Als letztes Mittel können Sie die !important-Deklaration verwenden:

.button {
   background-color: #ff0000 !important;
}

Verwenden Sie !important jedoch sparsam. Ein übermäßiger Einsatz erschwert die Wartung, da spätere Änderungen ebenfalls !important verwenden müssen, um frühere Regeln zu überschreiben. Dadurch entstehen sogenannte Specificity Wars, die Ihre Styles langfristig schwerer verwaltbar machen.

Fehlerhafte CSS-Syntax

Eine einzige fehlende geschweifte Klammer } oder ein Semikolon ; kann Ihr gesamtes Stylesheet ungültig machen. Wenn Sie Dateien manuell bearbeiten, überprüfen Sie deshalb immer sorgfältig Ihre Syntax.

Wir empfehlen einen Code-Editor wie Visual Studio Code, der Syntaxfehler in Echtzeit hervorhebt. Auch der im WordPress-Customizer integrierte Syntax-Highlighter markiert Fehler in Rot, bevor Sie Ihre Änderungen speichern.

Das neue Design ist nicht responsiv

Eigenes CSS kann gelegentlich dazu führen, dass Ihr Layout auf Mobilgeräten nicht korrekt angezeigt wird. Testen Sie Ihre Änderungen daher immer auf verschiedenen Bildschirmgrößen mithilfe der Entwicklertools Ihres Browsers (Inspect → Toggle device toolbar).

Um die Responsivität zu verbessern, können Sie Ihren Code in eine Media Query einbetten:

@media only screen and (max-width: 600px) {
   body {
      font-size: 14px;
   }
}

Wie füge ich weiteren eigenen Code zu WordPress hinzu?

Neben CSS können Sie auch andere Arten von eigenem Code zu WordPress hinzufügen. Welche Methode Sie verwenden, hängt von der Programmiersprache und davon ab, ob Sie serverseitige Funktionen oder Frontend-Verhalten ändern möchten.

• PHP. Wenn Sie Kernfunktionen anpassen möchten – zum Beispiel benutzerdefinierte Beitragstypen erstellen oder Inhalte filtern – können Sie PHP-Code zu WordPress hinzufügen. Dieser Code wird auf dem Server ausgeführt, bevor die Seite geladen wird.
• JavaScript. Für dynamische Funktionen wie Animationen, Ereignisbehandlung oder Tracking-Skripte können Sie JavaScript zu WordPress hinzufügen. Dieser Code wird im Browser des Nutzers ausgeführt, nachdem die Seite geladen wurde.

Unabhängig von der gewählten Methode sollten Sie vor dem Hinzufügen von eigenem Code immer ein aktuelles Website-Backup erstellen, um Datenverlust oder Website-Fehler zu vermeiden.

Alle Tutorial-Inhalte auf dieser Website unterliegen Hostingers strengen redaktionellen Standards und Normen.