Optimiser et styler les catégories WordPress avec les CSS

Suite à la migration de mon blog, j’en ai profité pour réorganiser les catégories en utilisant les sous-catégories qui me semblent un excellent moyen pour structurer l’information sur un blog. Curieusement, j’ai remarqué que les catégories sont souvent traitées par-dessus la jambe : soit il s’agit d’une longue liste tellement exhaustive qu’on ne sait plus de quoi parle le blog, soit les catégories sont placées à un endroit peu visible. Le pire étant évidemment le cumul des deux, ce qui n’est pas si rare…

Optimiser les catégories

La première chose à considérer, c’est de limiter le nombre de rubriques principales : une dizaine me semble un maximum pour permettre au visiteur de se faire rapidement une idée sur le contenu du blog. Maintenant, voyons concrètement comment afficher ces catégories et sous-catégories avec les CSS et les classes mises à notre disposition dans WordPress.

Pour commencer, j’ai créé la catégorie Développement web qui servira de catégorie parente pour les sous-catégories design-graphisme, ergonomie-accessibilité, javascript-php et bien sûr xhtml-css.

Pour afficher ces catégories, je me suis contenté d’utiliser le widget catégorie qui permet de modifier le nom de la rubrique, d’afficher la liste avec un menu déroulant, d’afficher la hiérarchie et enfin de préciser le nombre de billets présents dans une catégorie ou une sous-catégorie.

Les options disponibles dans le widget catégorie de WordPress devraient suffir à la majorité des utilisateurs !

Styler les catégories avec les CSS

Reste à styler ce menu avec les CSS. Pour celà, WordPress met à notre disposition une classe .current-cat lorsqu’une catégorie est sélectionnée et .current-cat-parent lorsqu’ils s’agit d’une catégorie parente. Notez q’une classe .children est associée aux sous-catégories, ce qui est bien utile 😉

Pour l’instant, je me suis contenté de mettre en gras les éléments sélectionnés par l’utilisateur en attendant mieux. Dans ce cas, il faut prendre garde à la cascade, car la règle :

.current-cat-parent {
    font-weight: bold;
}

agit également sur tous les items qui suivent, y compris ceux dont la classe est .current-cat. Pour y remédier, il ne faut pas oublier de remettre les éléments .children à leur valeur par défaut avec la règle :

.children {
    font-weight: normal;
}

et ensuite de spécifier pour .current-cat la règle :

.children .current-cat {
    font-weight: bold;
}

de manière à obtenir, lorsqu’on clique sur une sous-catégorie, du bold pour la catégorie mère et/ou la sous-catégorie en question uniquement.

N’oublions pas non plus de préciser comment doivent se comporter les catégories cliquées qui ne sont pas des catégories parentes :

.current-cat {
    font-weight: bold;
}

En l’occurrence, j’ai mis le même style partout, mais rien ne vous empêche de faire une distinction.

Voici l’exemple des catégories avec ci-contre, la sortie dans Firefox et plus bas, le code html vu par Firebug. Admirez donc les différentes classes disponibles pour vos CSS 😉

Quelques notes au sujet des catégories pour conclure

Le plus fastidieux quand on se lance dans la réorganisation des catégories est de déterminer le degré de granularité des informations qui doivent apparaitre. J’ai choisi des intitulés de rubriques parentes relativement génériques pour offrir une certaine souplesse à l’usage.

En revanche, pour les sous-catégories, j’ai essayé d’être le plus précis possible sans pour autant multiplier le nombre d’éléments. Si dans mon cas, je peux facilement regrouper Javascript et php, il en ira autrement pour un blog spécialisé dans la programmation : il sera sans doute judicieux de faire une distinction entre les langages côtés serveur et ceux côté client 😉