Voulez-vous personnaliser le CSS pour des pages spécifiques ? L’ajout du nom de la page parente à body_class est un excellent moyen de cibler une page spécifique à l’aide de CSS. Vous pouvez ainsi 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 à votre 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;
}
Note : Si c’est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez vous référer à notre guide sur comment 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 comme : 62 meilleurs thèmes de blog WordPress gratuits ou 7 meilleurs plugins de formulaire de contact WordPress.
Works beautifully in WordPress 3.9.1, thank you!
Can this be adapted to add the top ancestor to the body class? So if I navigate to a grandchild page, I see not the parent slug, but the grandparent slug?
When I use this, I still get all of the BS default classes added by WP. Is there a way to filter those out?
Hi Jess, ill be posting a snippet monday that will provide a solution for this.
Thanks, exactly what I was looking for. One question – could this be adapted so that it outputs not only the parent page slug in the body classes, but also the current page slug as well? This would be useful for targeting sections in CSS, plus specific pages as well.
I write something so can post it in a new few days.
Thanks, looking forward to it 🙂