Custom CSS gives you control over your WordPress site’s style, letting you adjust everything from fonts and colors to layouts. Here’s a guide on how to add custom CSS to WordPress using different methods to fit your needs.
Method 1: Using WordPress’ Built-in Custom CSS Feature
WordPress has a built-in option for adding custom CSS right in the dashboard. It’s ideal for minor tweaks and beginner-friendly.
- Zugriff auf den Customizer
- Loggen Sie sich ein und gehen Sie zu Erscheinungsbild > Anpassen.
- Select “Additional 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.
- Ihr benutzerdefiniertes CSS hinzufügen
- Geben Sie Ihren Code ein. Zum Beispiel:
- Vorschau und Veröffentlichung
- You’ll see a live preview of changes. Once you’re happy, click veröffentlichen.
Am besten für: Einfache Anpassungen, keine Änderungen an der Themendatei erforderlich.
Method 2: Using the Child Theme’s Style.css File
It’s better to use a child theme’s style.css Datei für umfangreichere Änderungen. Auf diese Weise bleiben Ihre Bearbeitungen auch nach Aktualisierungen des Themas sicher.
- 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.
- Zugriff auf die Datei Style.css
- Unter Appearance > Theme File Editor, select your child theme’s style.css Datei.
- 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; }- Ä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
If you’d rather avoid editing files or child themes, plugins can handle custom CSS. This is great for managing CSS across multiple pages.
- 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:
- WPCode installieren
- Gehen Sie zu Plugins > Neu hinzufügen Plugin, suchen Sie nach WPCode, installieren und aktivieren.
- Erstellen Sie eine Neues CSS Snippet
- Kopf nach Code Snippets > Add Snippet. Wählen Sie CSS-Schnipsel.
- 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:
- 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).
- CSS-Code eingeben
- Verwenden Sie das Schlüsselwort selector, um das Element zu markieren. Beispiel:
selector { background-color: #333; color: #fff; }In Divi:
- Gehen Sie zu Theme-Optionen
- Navigieren Sie zu Divi > Theme Options > Custom CSS.
- 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
If you’re familiar with FTP and want complete control, you can edit CSS files directly on the server.
Schritte:
- Verbindung über FTP
- Verwenden Sie einen FTP-Client (wie FileZilla), um eine Verbindung zu Ihrer Website herzustellen.
- Navigieren Sie zum Themenordner
- Gehen Sie zu wp-content/themes/your-child-theme/ und öffnen Sie die Datei style.css.
- 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. Why isn’t my custom CSS working?
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 or plugin to store CSS rather than modifying the parent theme’s files.