Es kann vorkommen, dass Sie auf Ihrer WordPress-Website benutzerdefinierte CSS hinzufügen müssen.

Für die meisten Anfänger ist die Verwendung von FTP zu verwirrend, aber es gibt andere Möglichkeiten, benutzerdefinierte CSS hinzuzufügen.

In diesem Artikel zeigen wir Ihnen, wie Sie auf einfache Weise benutzerdefinierte CSS zu Ihrer WordPress-Website hinzufügen können, ohne irgendwelche Theme-Dateien zu bearbeiten.

Wie du dein WordPress Theme mit CSS anpasst

Um das Erscheinungsbild Ihrer Website mit CSS zu ändern, müssen Sie entweder eigenen Code hinzufügen oder vorhandenen Code ändern. Während es möglich ist, CSS hinzuzufügen, ohne die Themadateien zu berühren, müssen Sie auf das Stylesheet Ihrer Website zugreifen, um den bestehenden Code des Themes zu ändern.

Wenn Sie Ihr Theme ändern, denken Sie daran: Wenn Ihr Theme aktualisiert wird, gehen alle Änderungen, die Sie an style.css, functions.php oder anderen Theme-Vorlagendateien vornehmen, verloren.

Wenn Sie Ihre Website direkt bearbeiten wollen, müssen Sie ein Child-Theme verwenden.

Sie können sich das Stylesheet als „Antwortbuch“ für Ihre Website vorstellen, in dem festgelegt ist, wie sie gestylt wird und wie das CSS geschrieben wird.

Sie werden die Bearbeitung hier abschließen, aber wir zeigen auch den Umgang.

Sie können Ihr WordPress-Stylesheet über das WordPress-Dashboard oder über einen FTP-Client bearbeiten. Beide Methoden werden behandelt.

Methode 1: Hinzufügen von benutzerdefiniertem CSS über den Theme Customizer

Seit WordPress 4.7 können Benutzer nun benutzerdefinierte CSS direkt über den WordPress-Adminbereich hinzufügen. Das ist supereinfach, und Sie können Ihre Änderungen sofort in einer Live-Vorschau sehen.

Zunächst müssen Sie die Seite Themes “ Anpassen aufrufen.

Dadurch wird die WordPress-Theme-Anpassungsschnittstelle gestartet.

Sie sehen die Live-Vorschau Ihrer Website mit einer Reihe von Optionen im linken Bereich. Klicken Sie im linken Bereich auf die Registerkarte Zusätzliches CSS.

Die Registerkarte verschiebt sich und zeigt Ihnen ein einfaches Feld, in das Sie Ihr benutzerdefiniertes CSS hinzufügen können. Sobald Sie eine gültige CSS-Regel hinzugefügt haben, können Sie sehen, wie sie im Live-Vorschaufenster Ihrer Website angewendet wird.

Sie können weiterhin benutzerdefinierten CSS-Code hinzufügen, bis Sie mit dem Aussehen Ihrer Website zufrieden sind.

Vergessen Sie nicht, auf die Schaltfläche „Speichern und veröffentlichen“ oben zu klicken, wenn Sie fertig sind.

Hinweis: Alle benutzerdefinierten CSS, die Sie mit dem Theme-Customizer hinzufügen, sind nur für dieses spezielle Theme verfügbar. Wenn Sie es mit anderen Themes verwenden möchten, müssen Sie es kopieren und in Ihr neues Theme einfügen, indem Sie die gleiche Methode anwenden.

Methode 2: Hinzufügen von benutzerdefiniertem CSS mit einem Plugin

Mit der ersten Methode können Sie nur benutzerdefinierte CSS für das derzeit aktive Thema speichern. Wenn Sie das Thema wechseln, müssen Sie Ihr benutzerdefiniertes CSS möglicherweise kopieren und in das neue Thema einfügen.

Wenn Sie möchten, dass Ihr benutzerdefiniertes CSS unabhängig von dem von Ihnen verwendeten WordPress-Theme angewendet wird, ist diese Methode die richtige für Sie.

Als Erstes müssen Sie das Simple Custom CSS Plugin installieren und aktivieren. Nach der Aktivierung gehen Sie einfach zu Erscheinungsbild “ Benutzerdefiniertes CSS und schreiben oder fügen Ihr benutzerdefiniertes CSS ein.

Vergessen Sie nicht, auf die Schaltfläche „Benutzerdefiniertes CSS aktualisieren“ zu klicken, um Ihre Änderungen zu speichern.

Sie können nun Ihre WordPress-Website aufrufen, um das benutzerdefinierte CSS in Aktion zu sehen.

Verwendung eines benutzerdefinierten CSS-Plugins vs. Hinzufügen von CSS im Theme

Beide oben beschriebenen Methoden sind für Anfänger zu empfehlen. Fortgeschrittene Benutzer können benutzerdefiniertes CSS auch direkt zu ihren Themes hinzufügen.

Das Hinzufügen von benutzerdefinierten CSS-Snippets in Ihr übergeordnetes Theme wird jedoch nicht empfohlen. Ihre CSS-Änderungen gehen verloren, wenn Sie das Theme versehentlich aktualisieren, ohne Ihre benutzerdefinierten Änderungen zu speichern.

Am besten ist es, stattdessen ein Child-Theme zu verwenden. Viele Anfänger möchten jedoch kein Child-Theme erstellen. Abgesehen vom Hinzufügen von benutzerdefiniertem CSS wissen Anfänger oft nicht, wie sie das Child-Theme verwenden werden.

Mit einem benutzerdefinierten CSS-Plugin können Sie Ihr benutzerdefiniertes CSS unabhängig von Ihrem Theme speichern. Auf diese Weise können Sie ganz einfach das Theme wechseln, und Ihr benutzerdefiniertes CSS ist immer noch vorhanden.

Eine weitere großartige Möglichkeit, benutzerdefinierte CSS zu Ihrer WordPress-Website hinzuzufügen, ist die Verwendung des CSS Hero-Plugins. Mit diesem wunderbaren Plugin können Sie fast jeden CSS-Stil auf Ihrer WordPress-Website bearbeiten, ohne eine einzige Zeile Code zu schreiben.

{ Tipp }

Falls CSS-Anweisungen nicht wie vorgesehen funktionieren, kann dies durch die Verwendung der (!important) Regel behoben werden.

//Beispiel
h1 {font-size:24px!important;}

Dadurch erhält die CSS-Anweisung die höchste Priorität und ignoriert andere bereits vorhandene Regeln einfach. Alternativ kann man auch versuchen, CSS-Klassen etwas weiter zu spezialisieren.

Wenn Sie sehen, dass sich auf der Website gar keine Änderungen ergeben, kann auch ein Caching-Plugin schuld sein. In diesem Fall wäre es am besten, den Cache zu leeren oder die Seite im privaten Modus zu öffnen.