La hiérarchie des templates WordPress est très fournie. Souvent, on veut différencier ces templates visuellement, mais sans avoir à passer par des classes CSS spécifiques dans chaque template. On veut parfois aussi modifier des éléments communs à chaque page (comme le header, la sidebar, le footer…) selon la page où le visiteur se trouve.
Par exemple, dans la section Astuces de ce site (celle dans laquelle vous vous trouvez actuellement), les liens sont verts et non pas bleus. Pour différencier les liens selon le template affiché, j’utilise la classe appliquée au <body> :
<body class="single single-post postid-130 single-format-standard">
Ceci est possible grâce à la fonction WordPress body_class :
<body <?php body_class(); ?>>
Elle génère automatiquement plusieurs classes CSS spécifiques à la page actuellemet affichée :
- le template utilisé (single.php ici)
- le type de Post (single-post et pas single-page ou single-custom-post)
- l’identifiant (si vous voulez être vraiment spécifique)
- le format du Post
Cette fonction peut aussi renvoyer beaucoup d’autres informations, comme la hiérarchie d’une Page, le numéro de la pagination, ou bien le fait qu’on soit connecté ou pas.
La CSS avec body_class
Du coup, pour différencier vos template uniquement grâce à cette classe au body (qui est l’élément parent à tous les éléments de votre page HTML, et qui peut donc cibler tous ses descendants), il suffit d’écrire :
.menu-astuce{ border-left-color: #97cd76;}
body.blog .heading a:hover{ border-bottom-color: #97cd76;}
body.blog .menu-astuce .menu-section a,
body.category .menu-astuce .menu-section a,
body.single-post .menu-astuce .menu-section a{ background: #97cd76; color: white;}
body.blog .site-nav-astuce em{ color: #97cd76;}
Ici je définis la couleur verte à certains éléments de la page selon le template affiché : le Blog (la liste des astuces), une Catégorie, ou l’affichage d’un Single Post.
Attention aux conflits !
Étant donné que la possibilité des valeurs renvoyées par body_class est assez longue (et parfois imprévisible), faites attention de ne pas utiliser les mêmes noms de classe CSS autre part dans votre page. Il m’est arrivé de vouloir utiliser un élément <div class= »category »></div> dans ma page et de remarquer que ça cassait toute ma page vu que mon <body> avait aussi la classe « category ».