Faire des templates de theme wordpress avec un style css qui s’adapte à la catégorie
by Jean-Marc Amiaud on Nov.10, 2011, under WordPress
WordPress est initialement prévu pour faire tourner un theme selon un unique style défini par ce dernier.
Je vous propose ici une façon d’améliorer l’esthétique globale de votre blog en s’appuyant sur les catégories de WordPress pour définir des styles particuliers aux différentes sections de votre blog.
1 – L’approche
Il existe deux fonctions de l’API WordPress, body_class et post_class qui écrivent un attribut de balise class, listant des styles relatifs au contexte de la page demandée.
Pour plus de renseignement sur la fonction body_class : http://codex.wordpress.org/Function_Reference/body_class
Pour plus de renseignement sur le fonction post_class : http://codex.wordpress.org/Function_Reference/post_class
L’idée est d’ajouter à cette liste de classes css, les classes des catégories associées au contexte de la requête ainsi que celles de leurs parents en utilisant tout simplement le nom de la categorie.
Ainsi, si une catégorie n’a pas été spécialement designée dans le fichier de style, il héritera le style de la catégorie parente et ainsi de suite, jusqu’au style par défaut…
Par exemple, ma page de catégorie WordPress, ainsi que tous les articles de la catégorie héritent du style de la catégorie mère, la catégorie Programmation, qui elle même hérite du style de la catégorie Informatique.
2 – Code
function category_id_class($myClasses) {
if(is_single())
{
global $post;
foreach((get_the_category($post->ID)) as $myCategory)
{
// On récupère toutes les catégories de l'article
$myCategories = array_filter(explode(' ',get_category_parents($myCategory->cat_ID, FALSE, ' ', TRUE)));
// On récupère les doublons à supprimer par rapport à l'existant pour deux raisons :
// 1 - Par ce que ça fait un code html plus propre en supprimant les doublons inutiles
// 2 - Pour assurer la cohérence hiérarchique si la suppression des doublons se fait sur le tableau existant.
// En effet, wordpress ajoute déjà une classe au nom de la catégorie de l'article, or il faut que le style de la catégorie s'applique après le style d'une de ses catégories parentes.
$myCatToRemove = array_intersect($myClasses, $myCategories);
// On effectue donc bien la suppression des doublons sur le tableau existant
$myClasses = array_diff($myClasses, $myCatToRemove);
// On retourne les tableaux associés, les nouvelles classes définies à la suite des existantes définies par wordpress.
// Attention, j'insiste sur l'ordre !
$myClasses = array_merge($myClasses, $myCategories);
}
}
else if(is_category())
{
// De même si c'est une page de catégorie
// Seule la récupération de l'ID de la catégorie de départ est différente.
global $wp_query;
$myCategoryID = get_query_var('cat');
// On rajoute le prefix 'category-' aux classes de categorie, pour indiquer qu'on se trouve dans un contexte de page de categorie.
$myCategories = array_prefix_values('category-', array_filter(explode(' ',get_category_parents($myCategoryID, FALSE, ' ', TRUE))));
$myCatToRemove = array_intersect($myClasses, $myCategories);
$myClasses = array_diff($myClasses, $myCatToRemove);
$myClasses = array_merge($myClasses, $myCategories);
}
return $myClasses;
}
add_filter('post_class', 'category_id_class');
add_filter('body_class', 'category_id_class');
function array_prefix_values($prefix, $array)
{
$callback = create_function('$str','return "'.$prefix.'".$str;');
return array_map($callback,$array);
}
3 – Usage
Il suffit de faire votre appel dans votre template à la balise body de la manière suivante :
<body <?php body_class(); ?>>
…
</body>
Le code généré sera alors de la forme :
<body class= »single single-post postid-367 single-format-standard logged-in informatique programmation wordpress »>
…
</body>
Il ne reste plus qu’a définir les styles css correspondants dans votre feuille de style (style.css)
