Optimiser et styler les catégories WordPress avec les CSS

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Optimiser et styler les catégories WordPress avec les CSS

Affichage catégorieSuite à 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 ;)

Catégorie courante

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 ;)

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



9 commentaires pour “Optimiser et styler les catégories WordPress avec les CSS”

  1. burningHat dit :

    Merci pour l’info, ça vient à l’instant de m’aider ça… ;)

    Par contre ça m’a aussi permis de relever une incohérence assez grossière dans les règles de nommage de WP : – pour les catégories, on a : .cat-item, .current-cat-parent et .current-cat – pour les pages, on a : .page_item, .current_page_parent et .current_page

    un coup le séparateur est un tiret, un coup c’est un underscore, super pratique pour la mémorisation ça ! :D

  2. Bruno Bichet dit :

    C’est vrai, tiens, j’avais jamais fait attention à ça. (quel oeil ;) )

  3. burningHat dit :

    Merci très cher :D

    Et pour compléter encore mon raisonnement, je dirais n’avoir vu aucun équivalent à la classe .children des catégories pour les pages. (j’ai remarqué tout ça en me battant (sans succès pour le moment) avec jQuery pour un menu personnalisé particulier et en stylant ledit menu)

  4. […] Comment optimiser et personnaliser vos catégories sous WordPress : Bruno fait le point sur la manière d’habiller ses catégories lorsque l’on a un blog qui tourne sous WordPress … […]

  5. Anonyme dit :

    Optimiser et styler les catgories WordPress avec les CSS…

    Apprendre mieux organiser les catgories sous WordPress et les styler avec les CSS pour faciliter la navigation sur un blog….

  6. Exatropic dit :

    oups c’est parti tout seul désolé. Il faudra faire un peu de ménage dans mes messages… je poursuis. j’ai un blog qui donne des infos pour une vile dans un département choisi par l’utilisateur. pour le moment, chaque département est raité séparément dans un dossier à part avec un wordpress attitré. Comment faire pour qu’en choisissant un département, seules les catégories (utilisées pour afficher les villes) n’apparraissent que pour ce département précis et ce jusqu’au changement de département?

  7. Bruno Bichet, intégrateur HTML & CSS dit :

    Question naïve : pourquoi ne pas utiliser les catégories pour les départements et les sous-catégories pour les villes sur une même installation wordpress ?

  8. exatropic dit :

    C’est ce que je me suis résolu à faire faute de mieux. le pb sera lorsqu’il y aura 90 départements et autant de villes dans chacun. Le site sera un rien chargé…

  9. androidilord dit :

    Super et merci pour votre article, c’est plus joli maintenant.



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site