X

Comment personnaliser le CSS pour des pages spécifiques

Extraits par IsItWP

Vous souhaitez personnaliser le CSS pour des pages spécifiques ? L'ajout du slug de la page parente à la classe du corps (body_class) est un excellent moyen de cibler une page spécifique avec du CSS. De cette façon, vous pouvez facilement identifier la classe de l'élément que vous souhaitez modifier.

Instructions :

Tout ce que vous avez à faire est d'ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site :

add_filter('body_class','body_class_section');

function body_class_section($classes) {
    global $wpdb, $post;
    if (is_page()) {
        if ($post->post_parent) {
            $parent  = end(get_post_ancestors($current_page_id));
        } else {
            $parent = $post->ID;
        }
        $post_data = get_post($parent, ARRAY_A);
        $classes[] = 'parent-' . $post_data['post_name'];
    }
    return $classes;
}

Remarque : Si c'est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur la manière de copier / coller correctement des extraits de code dans WordPress, afin de ne pas casser accidentellement votre site.

Si vous avez aimé cet extrait de code, n'hésitez pas à consulter nos autres articles sur le site tels que : 62 meilleurs thèmes de blog WordPress gratuits ou 7 meilleurs plugins de formulaire de contact WordPress.

Commentaires   Laisser une réponse

  1. Fonctionne à merveille dans WordPress 3.9.1, merci !

  2. Peut-on adapter cela pour ajouter l'ancêtre supérieur à la classe du corps ? Ainsi, si je navigue vers une page petite-fille, je vois le slug du grand-parent et non celui du parent ?

  3. Lorsque j'utilise ceci, j'obtiens toujours toutes les classes par défaut de WP. Y a-t-il un moyen de les filtrer ?

    1. Salut Jess, je publierai un extrait lundi qui fournira une solution pour cela. 

  4. Merci, c'est exactement ce que je cherchais. Une question : serait-il possible de l'adapter pour qu'il affiche non seulement le slug de la page parente dans les classes du corps, mais aussi le slug de la page actuelle ? Ce serait utile pour cibler des sections en CSS, ainsi que des pages spécifiques.

    1. J'écris quelque chose pour pouvoir le publier dans quelques jours.

      1. Merci, j'ai hâte 🙂

Ajouter un commentaire

Nous sommes heureux que vous ayez choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de confidentialité, et tous les liens sont nofollow. N'utilisez PAS de mots-clés dans le champ nom. Ayons une conversation personnelle et significative.

Liste de contrôle de lancement WordPress

La checklist ultime pour lancer un WordPress

Nous avons compilé tous les éléments essentiels de la liste de contrôle pour le lancement de votre prochain site Web WordPress dans un ebook pratique.
Oui, envoyez-moi l'eBook gratuit !