CSS im WordPress Child Theme optimal laden

Wenn du ein Child Theme in WordPress verwendest, solltest du sicherstellen, dass dein CSS optimal geladen wird. Falsch eingebundene Stylesheets können zu Performance-Problemen oder fehlenden Styles führen. Hier erfährst du, wie du dein CSS effizient ins Child Theme einbindest.

1. Die richtige Methode: CSS mit `wp_enqueue_style()` laden

Die empfohlene Methode zum Laden von CSS in einem WordPress Child Theme ist die Verwendung der Funktion wp_enqueue_style(). Diese sorgt dafür, dass Styles korrekt und in der richtigen Reihenfolge geladen werden.

Schritte zur optimalen Einbindung:

Öffne die functions.php-Datei deines Child Themes.
Füge folgenden Code hinzu:

function my_child_theme_styles() {
    // Parent-Theme-CSS laden
    wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');

    // Child-Theme-CSS laden
    wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
}
add_action('wp_enqueue_scripts', 'my_child_theme_styles');

Erklärung des Codes:

wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
→ Lädt die style.css des Parent-Themes.
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
→ Lädt die style.css des Child Themes und stellt sicher, dass sie nach dem Parent-Theme geladen wird.
wp_get_theme()->get('Version') sorgt dafür, dass immer die aktuelle Theme-Version verwendet wird, um Caching-Probleme zu vermeiden.

2. Alternative Methode: CSS mit @import vermeiden

Früher wurde CSS oft mit @import in der style.css des Child Themes eingebunden:

@import url("../parent-theme/style.css");

Warum ist das problematisch?

Es kann die Ladezeit der Seite verlangsamen.
WordPress empfiehlt diese Methode nicht mehr.

Die Verwendung von wp_enqueue_style() ist die bessere Lösung!

3. Zusätzliche Stylesheets laden (falls erforderlich)

Falls du weitere Stylesheets hinzufügen möchtest (z. B. für benutzerdefinierte Anpassungen oder externe Styles), kannst du sie einfach ergänzen:

function my_child_extra_styles() {
    wp_enqueue_style('extra-style', get_stylesheet_directory_uri() . '/extra-style.css', array('child-style'), '1.0.0');
}
add_action('wp_enqueue_scripts', 'my_child_extra_styles');

Hier wird die Datei extra-style.css zusätzlich nach der style.css des Child Themes geladen.

4. CSS nur auf bestimmten Seiten oder Bedingungen laden

Falls du CSS nur auf bestimmten Seiten oder unter bestimmten Bedingungen laden möchtest, kannst du WordPress-Funktionen nutzen:

function my_custom_page_styles() {
    if (is_page('kontakt')) { // Nur auf der Kontaktseite laden
        wp_enqueue_style('contact-style', get_stylesheet_directory_uri() . '/contact.css');
    }
}
add_action('wp_enqueue_scripts', 'my_custom_page_styles');

Weitere Bedingungen:

is_front_page() → Nur auf der Startseite
is_single() → Nur auf Beitragsseiten
is_category('news') → Nur in einer bestimmten Kategorie

5. CSS für den WordPress-Admin-Bereich laden (optional)

Falls du eigene Styles im Admin-Bereich hinzufügen möchtest:

function my_admin_styles() {
    wp_enqueue_style('admin-style', get_stylesheet_directory_uri() . '/admin.css');
}
add_action('admin_enqueue_scripts', 'my_admin_styles');

Fazit

Beste Methode: Verwende wp_enqueue_style(), um CSS korrekt und effizient zu laden.
@import vermeiden, da es die Performance negativ beeinflusst.
Zusätzliche Stylesheets können bei Bedarf mit wp_enqueue_style() geladen werden.
CSS gezielt laden, um nur die benötigten Styles für bestimmte Seiten einzubinden.

Durch diese Optimierungen sorgt dein Child Theme für eine schnelle Ladezeit und eine bessere Wartbarkeit!