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
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
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
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
Ping : www.fuzz.fr
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?
@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.
Mais est-ce qu’il vaut mieux un plugin simple que toutes ces manips ? (en fait, c’est une question plus générale).
Encore un superbe tuto .
Merci,
pépé
@Alex : merci à toi et j’espère qu’il te sera utile !
Ping : Blog radar » La HighTech et les Blogs » Kiosque des Blogs numéro 13
Ping : Revue de Web semaine 50 | Higherweb ::: Le BLOG
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
@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 !
Merci pour le petit tuto, c’est bien car je n’aurais jamais pensé à mettre des icônes à mes catégories. Ça rend mieux je trouve.
Thanks.
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
@Olivier : je viens d’aller sur ton blog mais je ne trouve pas la classe cat-item-16 dans ton code…
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.
@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.
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…
@Submarine : bienvenue à toi et merci de l’aide que tu proposes !
@Li-An : il existe bien un plugin intitulé Category Icons, mais personellement je ne suis jamais parvenu à le faire fonctionner avec mon thème et puis franchement pourquoi surcharger WordPress d’un plugin supplémentaire alors que c’est possible de réaliser une telle opération en bidouillant un peu.
Donc, oui un plugin serait intéressant mais simple comme tu dis…
Après, peut-être que d’autres l’ont essayé et qu’il fonctionne très bien chez eux – et d’ailleurs je l’espère…