Ajouter manuellement des icônes aux catégories d’un blog WordPress

Pour personnaliser un peu plus son blog WordPress, il est possible d’assigner un icône spécifique à chacune des différentes catégories. En intervenant directement dans le code CSS, ce tutoriel va vous présenter les différentes classes à utiliser et ce, sans installer un quelconque plugin additionnel.

Pré-requis

Avant d’aller plus loin, vous devez remplir les conditions suivantes :

  • Avoir un blog WordPress et toutes les autorisations ;
  • Installer le navigateur Firefox ;
  • Ajouter l’extension Firebug (facultatif mais vivement recommandé) dans Firefox ;
  • Avoir mis en ligne sur votre serveur FTP des icônes ;
  • Posséder quelques bases en HTML/CSS ;

Identification des classes de catégories

Pour commencer, il va nous falloir identifier les différentes classes CSS utilisées par WordPress pour chacune des catégories. Celles-ci ont la particularité de débuter par: cat-item cat-item-73 Ici, le numéro 73 correspond à l’ID de la catégorie. Pour ce faire, je vous conseille vivement d’utiliser l’extension Firebug pour Firefox. Sinon, vous pouvez tout aussi bien effectuer une recherche dans le code source. Cependant, une telle extension nous sera utile par la suite.

Firebug

Extension pour Mozilla Firefox indispensable pour les développeurs Web. Offre la possibilité d'être couplé à YSlow pour optimiser les performances d'un site.

Taille : 447,3 KiB  •  Date : 28 mars 2010 •  Hits : 1 485

Installez l’extension puis redémarrez le navigateur. Chargez ensuite la page d’accueil de votre blog. Faites un clic droit sur l’une des catégories puis Inspecter un élément. Vous devriez pouvoir visualiser le code suivant :

<ul>
<li>class="cat-item cat-item-73"</li>
<li>class="cat-item cat-item-10"</li>
<li>class="cat-item cat-item-8"</li>
<li>class="cat-item cat-item-74"</li>
<li>class="cat-item cat-item-56"</li>
<li>class="cat-item cat-item-7"</li>
</ul>
Capture d'écran - Modification du code CSS
Capture d’écran – Modification du code CSS

Comme vous pouvez le voir, une classe – class, en anglais, est définie pour chacune des catégories. Il nous faut donc l’ajouter dans la feuille de style du thème WordPress que vous utilisez.

Création des nouvelles classes CSS

Ouvrez donc l’Editeur de thème via le module Apparence puis descendez tout en bas de la feuille de style. Ensuite, copiez / collez l’intitulé de la classe mais uniquement la fin, soit cat-item-ID. Ajoutez un point devant, pour indiquer qu’il s’agit d’une classe et un une accolade ouverte à la fin. Voila ce à quoi cela devrait ressembler :

.cat-item-8 {

Créons maintenant une nouvelle propriété background pour laquelle nous allons indiquer l’URL de l’icône plus une contrainte no-repeat pour éviter que l’image ne se répète indéfiniment.

.cat-item-8 {
background:url(http://www.protuts.net/icones/firefox.png) no-repeat;
}
Capture d'écran - Modification du code CSS
Capture d’écran – Modification du code CSS

Vous pouvez utiliser ce bout de code mais n’oublier pas de remplacer le numéro par l’ID de catégorie puis l’URL par celui correspondant au chemin où est localisé l’icône de catégorie. Répétez l’opération pour toutes les catégories et n’oubliez pas l’accolade de fin de classe. Pour valider l’opération, cliquez sur Mettre à jour le fichier.

Actualisez la page d’accueil de votre blog. Si tout a fonctionné, des icônes ont du faire leur apparition. Toutefois, tout n’est pas encore terminée. Dans la plupart des cas, les icônes seront mal positionnés, situés à l’arrière-plan, etc. Bref des modifications supplémentaires sont nécessaires. Vu que cela dépend du blog de chacun, je vous conseille à nouveau d’utiliser Firebug.

Ainsi, vous pourrez facilement éditer en temps réel les différentes classes pour parvenir à un résultat correct que vous n’aurez qu’à reporter dans le code CSS. Quoiqu’il en soit, vous pouvez toujours laisser un message sur le forum !

Bonne customisation et n’hésitez pas à partager vos créations !

Crédits photo : bioxid

18 commentaires

  1. Insky

    Bonsoir,
    Très utile, j’étais vraiment très intéresser pour savoir comment faire çà manuellement, bien que certains plugins le permette de façon beaucoup moins fastidieuse…

    En revanche, plusieurs questions me viennent :
    > Que se passe-il si l’ont supprime une rubrique ? Les classes attribués changent-elle (cela « foutrait » en l’air tout le boulot)? Ou s’il l’on change l’ordre des catégories ?!

    Ce système est il flexible en somme ou pas?

    > Pas de précision sur la version de wordpress à utiliser, c’est donc valable pour les plus récentes comme les plus anciennes?

  2. Aurélien Denis

    @Insky : tu fais bien de m’interroger sur la version de WordPress. A priori, cela fonctionne pour toutes les versions car je ne pense que cet intitulé diffère. De ce côté là, il ne devrait pas y avoir de souci.

    Concernant le degré de flexibilité, les catégories possèdent toutes un ID (identifiant) unique. Du coup, si tu supprimes une catégorie, la classe CSS devient obsolète et il conviendra alors de la supprimer. Elle ne va donc pas être utilisée par une autre catégorie.

    Idem pour l’ordre vu que tout dépend de l’ID.

  3. Insky

    Merci pour les précisions précitées. Concernant le plugin category icons, je l’ai installé pour test et il à parfaitement fonctionné (c’est rare!), simple, rapide, léger, et permettant même des choix de mise en forme, j’avais simplement rencontré plus tard un problème de conflit avec un autre plugin (qui permettait de faire des menus à onglets dans la sidebar…), mais j’avais surmonté le problème avec l’aide de l’auteur du plugin incriminé!

    En revanche, face à la multiplication des plugins, qui alourdisse toujours plus ou moins l’installation globale de WP, c’est toujours bon de savoir le faire de façon manuelle, tant que cela n’est pas trop fastidieux; ce qui est le cas.

    Merci encore

  4. Aurélien Denis

    @Insky : c’est vrai que de nombreux plugins WordPress sont indispensables mais je pense qu’il est toujours intéressant de parvenir à faire la même chose dans la limite d’un certain niveau de difficulté, bien entendu.

    Et merci de ton commentaire !

  5. Olivier

    salut

    ben, cela ne marche pas. Donc je m’y prend mal et pourtant, je vois pas ou. Alors, dans ma feuille style, j’ai mis :
    .cat-item-16{
    background:url(http://www.instantanesdumonde.com/blog/surf.png) no-repeat;
    }

    c’est pour changer l’icône de la catégorie Maroc. J’ai mis mon nouvel icône dans le même répertoire que les Images des articles. Je l’ai uploadé mais rien ne se passe. J’ai essayé de faire varier la taille de l’image… mais rien non plus.

    C’est quoi le problème ?

    Olivier

  6. Olivier

    salut

    alors, quand je fais clic droit inspecter un élément sur le mot Maroc dans les catégories, j’obtiens ca :

    li class= »cat-item cat-item-16″
    a title= »Voir tous les articles classés dans Maroc » href=http://www.instantanesdumonde.com/wordpress/?cat=16>Maroc/a
    a href=http://www.instantanesdumonde.com/wordpress?feed=rss2&cat=16>
    img alt= »Flux pour tous les articles classés dans Maroc » src=/wordpress/wp-content/themes/purity/images/category-rss.jpg/
    /a
    /li

    olivier

    EDIT : j’ai viré quelques ouvertures de balises et guillemets pour que ca s’affiche correctement et non en lien.

  7. Aurélien Denis

    @Olivier : en fait, pour être plus précis, c’est dans ta feuille de style CSS que je ne trouve pas les propriétés qui doivent définir l’emplacement de l’image. Par conséquent, c’est normal que cela ne marche pas… :?:

    Si malgré tout le code est bien présent alors tu peux la copier / coller sur le forum pour voir ce qui cloche.

  8. Submarine

    Bonjour,

    je suis l’auteur du plugin Category Icons. Si vous avez des soucis pour l’utiliser, je veux bien vous aider à résoudre les difficultés que vous pouvez rencontrer. Il est plus simple d’utilisation que vous ne le pensez…

  9. Alexandre

    Pour avoir pas mal cherché sur le net je trouve enfin un article sur le sujet donc merci. Dans mon cas j’ai la même image attribuées que ce soit pour mes articles, mes archives et mes catégories :

    .widget li a {

    color: #000000;

    display: block;

    padding: 10px 0;

    padding-left: 40px;

    background: url(images/bouton.png) no-repeat left 7px;

    Comme je souhaiterais garder cette image pour mes articles et mes archives mais pas pour mes catégories, comment faire pour que cette image ne s’affiche pas pour mes catégories, exclurent mes catégories dans ce code ? J’espère avoir été assez clair^^ merci.

Laisser un commentaire

Thèmes & Plugins
Premium By WP Channel

WP Alacarte propose des produits et services de qualité
made in France pour la plateforme WordPress.

Tout est prêt pour créer votre site à la carte !

  • Thèmes et extensions premium
  • Facilité d’utilisation garantie
  • Temps de chargement optimisé
  • Personnalisation avancée
Découvrir

Rejoignez la communauté WordPress !

Faites partie de l’aventure en devenant membre d’une association WordPress. Conférences, ateliers, BarCamp, WordCamp… Venez
partager votre passion pour WordPress !

Aurélien DENIS,
président des associations WordPress Francophone et WPMX