Mit benutzerdefiniertem CSS haben Sie die Kontrolle über den Stil Ihrer WordPress-Website und können alles von Schriftarten über Farben bis hin zu Layouts anpassen. Hier finden Sie eine Anleitung, wie Sie mit verschiedenen Methoden benutzerdefiniertes CSS zu WordPress hinzufügen können, um Ihren Bedürfnissen gerecht zu werden.

Methode 1: Verwendung der in WordPress eingebauten Funktion Custom CSS

WordPress verfügt über eine integrierte Option zum Hinzufügen benutzerdefinierter CSS direkt im Dashboard. Das ist ideal für kleinere Änderungen und für Anfänger geeignet.

1. Zugriff auf den Customizer
   • Loggen Sie sich ein und gehen Sie zu Erscheinungsbild > Anpassen.

2. Wählen Sie "Zusätzliches CSS".
   • Klicken Sie in der linken Seitenleiste auf Zusätzliches CSS. Es wird ein Textfeld angezeigt, in das Sie Ihren CSS-Code eingeben können.

3. Ihr benutzerdefiniertes CSS hinzufügen
   • Geben Sie Ihren Code ein. Zum Beispiel:

4. Vorschau und Veröffentlichung
   • Sie sehen dann eine Live-Vorschau der Änderungen. Wenn Sie zufrieden sind, klicken Sie auf veröffentlichen.

Am besten für: Einfache Anpassungen, keine Änderungen an der Themendatei erforderlich.

Methode 2: Verwendung der Style.css-Datei des Child-Themes

Es ist besser, das Child-Theme von style.css Datei für umfangreichere Änderungen. Auf diese Weise bleiben Ihre Bearbeitungen auch nach Aktualisierungen des Themas sicher.

1. Aktivieren Sie ein Child Theme
   • Wenn Sie dennoch eines verwenden möchten, erstellen oder installieren Sie ein Child-Theme. Plugins wie Konfigurator für Child-Themen machen Sie es sich leicht.

2. Zugriff auf die Datei Style.css
   • Unter Erscheinungsbild > Editor für Themendateienwählen Sie die Option Ihres Child-Themes style.css Datei.

3. Ihr CSS hinzufügen
   • Fügen Sie Ihr benutzerdefiniertes CSS im Feld unten der Datei. Beispiel:

.custom-header { background-color: #2c3e50; color: #ffffff; }
.custom-button { background-color: #e74c3c; color: #ffffff; padding: 10px 20px; border-radius: 5px; }

4. Änderungen speichern
   • Klicken Sie auf Datei aktualisieren zu speichern.

Am besten für: Größere Stiländerungen, die auch nach den Updates bestehen bleiben sollten.

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

Wenn Sie die Bearbeitung von Dateien oder Child-Themes lieber vermeiden möchten, können Plugins benutzerdefinierte CSS verwalten. Dies ist ideal für die Verwaltung von CSS auf mehreren Seiten.

• Einfaches benutzerdefiniertes CSS und JS: Leichtgewichtig und einfach, um CSS und JavaScript hinzuzufügen.
• WPCode: Fügt CSS standortweit oder pro Seite hinzu.
• SiteOrigin CSS: Visueller Editor für Anfänger.

Beispiel mit WPCode:

1. WPCode installieren
   • Gehen Sie zu Plugins > Neu hinzufügen Plugin, suchen Sie nach WPCode, installieren und aktivieren.

2. Erstellen Sie eine Neues CSS Snippet
   • Kopf nach Code-Schnipsel > Schnipsel hinzufügen. Wählen Sie CSS-Schnipsel.

3. Platzierung wählen
   • Damit CSS site-weit funktioniert, wählen Sie Seitenübergreifende Kopfzeile.

Am besten für: Einfache CSS-Verwaltung ohne Berührung der Themendateien.

Methode 4: Hinzufügen von benutzerdefiniertem CSS über Page Builder (Elementor, Divi)

Page Builder wie Elementor und Divi verfügen in der Regel über integrierte CSS-Optionen, die die Verwaltung von Stilen vereinfachen.

In Elementor:

1. Element und Zugriff auswählen Fortgeschrittene Einstellungen
   • Wählen Sie in Elementor ein Element aus, gehen Sie zu Fortgeschrittene Einstellungen, und finden Sie Benutzerdefiniertes CSS (Elementor Pro).

2. CSS-Code eingeben
   • Verwenden Sie das Schlüsselwort selector, um das Element zu markieren. Beispiel:

selector { background-color: #333; color: #fff; }

In Divi:

1. Gehen Sie zu Theme-Optionen
   • Navigieren Sie zu Divi > Theme-Optionen > Benutzerdefiniertes CSS.

2. CSS-Code eingeben und speichern
   • Fügen Sie Ihr eigenes CSS hinzu und speichern Sie.

Am besten für Diejenigen, die bereits Page Builder mit einfachem Zugang zu benutzerdefiniertem CSS verwenden.

Methode 5: Direktes Hinzufügen von CSS über FTP oder Code-Editor

Wenn Sie mit FTP vertraut sind und die volle Kontrolle haben möchten, können Sie CSS-Dateien direkt auf dem Server bearbeiten.

Schritte:

1. Verbindung über FTP
   • Verwenden Sie einen FTP-Client (wie FileZilla), um eine Verbindung zu Ihrer Website herzustellen.
2. Navigieren Sie zum Themenordner
   • Gehen Sie zu wp-content/themes/your-child-theme/ und öffnen Sie die Datei style.css.

3. Bearbeiten und Hochladen
   • Fügen Sie Ihr eigenes CSS hinzu, speichern Sie es und laden Sie es hoch.

Am besten für: Fortgeschrittene Benutzer, die eine vollständige Kontrolle benötigen.

Häufig gestellte Fragen

1. Warum funktioniert mein benutzerdefiniertes CSS nicht?

Löschen Sie Ihren Browser Cache oder alle Caching-Plugins der Website, da das Caching möglicherweise Aktualisierungen blockiert.

2. Wie kann ich verhindern, dass CSS bei Aktualisierungen verloren geht?

Verwenden Sie eine Child-Theme oder ein Plugin, um CSS zu speichern, anstatt die Dateien des übergeordneten Themes zu ändern.