loader image

Radiboxes Server machen WordPress Websites bis zu 4x schneller - ohne zusätzliche Optimierung. Raidboxes migriert deine Website und du kannst selbst vergleichen. Wenn du zufrieden bist, wähle einfach das passende Paket in deren Preistabelle.

4.97

Sehr gut

trustedshops.de

Autor

duckducknews

Eigenes css in WordPress einbinden

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.

css-in-wordpress-einfuegen

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.

Launching the theme customizer

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.

Additional CSS option in WordPress theme customizer

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.

Adding custom CSS with live preview

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.

Save your custom CSS changes

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.

Simple Custom CSS

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.

Editing custom CSS with CSS Hero plugin for WordPress

{ 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.

Die beliebtesten Beiträge

Wie man den ungültigen JSON-Fehler in WordPress behebt (Anleitung für Anfänger)

Versuchen Sie, den ungültigen JSON-Fehler in WordPress zu beheben? Dieser Fehler tritt auf, wenn Sie WordPress-Beiträge oder -Seiten auf Ihrer Website bearbeiten. Sie erhalten die Meldung "Die Antwort ist keine gültige JSON-Antwort" und die Aktualisierung der Seite schlägt fehl. In diesem Artikel zeigen wir Ihnen, wie Sie den ungültigen JSON-Fehler ...

So beheben Sie den Fehler „Verbindung ist nicht privat“ (Anleitung für Website-Besitzer)

Sehen Sie die Fehlermeldung "Ihre Verbindung ist nicht privat" auf Ihrer WordPress-Website? Dies ist die Fehlermeldung, die Sie in Google Chrome sehen. Der gleiche Fehler wird auf allen modernen Browsern mit leicht unterschiedlichen Meldungen angezeigt und kann für Anfänger bei der Fehlerbehebung etwas verwirrend sein. In dieser Anleitung für Website-Besitzer ...

Wie man eine Seite in voller Breite in WordPress erstellt (Anleitung für Anfänger)

Möchten Sie eine Seite in voller Breite in WordPress erstellen, so dass Sie Ihren Inhalt über den Bildschirm strecken können? Die meisten WordPress-Themes verfügen bereits über eine integrierte Vorlage für eine Seite in voller Breite, die Sie verwenden können. Wenn Ihr Theme jedoch keine hat, dann ist es einfach, sie ...
DSGVO Cookie-Einwilligung mit Real Cookie Banner