Charger CSS de manière optimale dans le thème enfant WordPress

Si vous utilisez un thème enfant dans WordPress, vous voudrez vous assurer que votre CSS se charge de manière optimale. Des feuilles de style mal intégrées peuvent entraîner des problèmes de performances ou des styles manquants . Voici comment intégrer efficacement votre CSS dans le thème enfant.

1. La bonne méthode : Chargez CSS avec `wp_enqueue_style()`

La méthode recommandée pour charger du CSS dans un thème enfant WordPress est d’utiliser le wp_enqueue_style(). Cela permet de s’assurer que les styles sont chargés correctement et dans le bon ordre.

Étapes pour une intégration optimale :

Ouvrez le functions.phpfichier de votre thème enfant.
Ajoutez le code suivant :

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');

Explication du code :

wp_enqueue_style('parent-style', get_template_directory_uri() . '/style.css');
→ Charge les style.css du thème parent.
wp_enqueue_style('child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style'), wp_get_theme()->get('Version'));
→ Charge le style.css du thème enfant et s’assure qu’il se charge après le thème parent.
wp_get_theme()->get('Version') Garantit que la version actuelle du thème est toujours utilisée pour éviter les problèmes de mise en cache.

2. Méthode alternative : Évitez les CSS avec @import

Dans le passé, CSS était souvent inclus @import dans le thème enfant style.css :

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

Pourquoi est-ce problématique ?

Cela peut ralentir le temps de chargement de la page.
WordPress ne recommande plus cette méthode.

L’utilisation est wp_enqueue_style() la meilleure solution !

3. Chargez des feuilles de style supplémentaires (si nécessaire)

Si vous souhaitez ajouter d’autres feuilles de style (par exemple pour des personnalisations personnalisées ou des styles externes), vous pouvez facilement les ajouter :

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');

Ici, le fichier extra-style.css est également chargé après celui style.css du thème enfant.

4. CSS ne charger que sur certaines pages ou conditions

Si vous ne souhaitez charger du CSS que sur certaines pages ou sous certaines conditions, vous pouvez utiliser les fonctionnalités de WordPress :

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');

Autres conditions :

is_front_page() → Uniquement sur la page d’accueil
is_single() → Uniquement sur les sites de publication
is_category('news') → Uniquement dans une catégorie spécifique

Chargez 5. CSS pour la zone d’administration WordPress (facultatif)

Si vous souhaitez ajouter vos propres styles dans la zone d’administration :

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

Résultat

Meilleure méthode : Permet wp_enqueue_style()de charger CSS correctement et efficacement.
@import à éviter car cela affecte négativement les performances.
Des feuilles de style supplémentaires peuvent être chargées si nécessaire wp_enqueue_style() .
CSS afin d’inclure uniquement les styles requis pour certaines pages.

Avec ces optimisations, votre thème enfant vous assure un temps de chargement rapide et une meilleure maintenabilité !