Une icône par catégorie
Si vous souhaitez pouvoir affecter une icône spécifique à chaque catégorie et la retrouver dans ses divers emplois : liste dans le sidebar, dans le bloc de présentation de la catégorie (fiche à venir), à côté du titre du billet ou que sais-je encore, voici comment procéder.
A côté du titre des billets
Pour qu'une icône identifiant la catégorie apparaisse à côté du titre du billet, vous devrez intervenir dans les fichiers list.php (pour la présentation en liste) et/ou post.php (pour la présentation en billet seul). (Directement inspiré de la fiche une feuille de style par catégorie (2)
1. Dans le fichier list.php, cherchez l'occurrence :
<h2 id="p<?php dcPostID(); ?>" class="post-title">
2. Remplacez-la par :
<h2 id="p<?php dcPostID(); ?>" class="post-title <?php print ('ico'.$news->f('cat_libelle_url')); ?>">
Ce qui donnera à titre d'exemple :
<h2 id="p7" class="post-title icoPremiers-pas">
pour un billet appartenant à la catégorie Premiers pas. (Pour plus d'explication de ce code, référez-vous à la fiche une feuille de style par catégorie (2).
3. Dans la feuille de style, placez la règle qui va bien ; pour notre exemple :
.post-title { /* règle générale à tous les titres de post */ padding-left : 16px; /* pour une image 12*12px */ /* le reste sans changement par rapport à votre feuille de style habituelle */ } .icoPremiers-pas { background : transparent url(images/ico-premier.jpg) no-repeat; }
Nota : J'ai donné l'exemple d'un placement à côté du titre du billet. Cet exemple peut être interprété à une autre balise en déplaçant class="<?php print ('ico'.$news->f('cat_libelle_url')); ?>"
à l'endroit qui vous siéra le mieux.
Dans le sidebar
Il y a plusieurs façons d'obtenir le résultat souhaité. Je présente celle qui est à mon sens la plus simple, refaire la liste « à la main » :
1. Dans template.php, chercher les lignes :
<div id="categories"> <h2>Catégories</h2> <?php dcCatList(); ?> </div>
2. Remplacer l'appel à la fonction de listage des catégories par la liste elle-même. Par exemple :
<div id="categories"> <h2>Catégories</h2> <ul> <li><a href="/pages/Chantier-suivi">Chantier : suivi du projet</a></li> <li><a href="/pages/Chantier-fiches">Chantier : fiches bricolage</a></li> <li><a href="/pages/Premiers-pas">Premiers Pas</a></li> <li><a href="/pages/Paillettes-et-fanfreluches">Paillettes et fanfreluches</a></li> <li><a href="/pages/Apprenti-sorcier">Apprenti sorcier</a></li> <li><a href="/pages/Jargon-des-blogueurs">Le jargon des blogueurs</a></li> </ul> </div>
3. Ajouter au <li> ou au <a> une classe différente pour chaque catégorie. Par exemple :
<li class="premiers"><a href="/pages/Premiers-pas">Premiers Pas</a></li> <li class="sorcier"><a href="/pages/Apprenti-sorcier">Apprenti sorcier</a></li>
et ainsi de suite pour tous les liens.
4. Dans la feuille de style, définir les règles de chaque classe. Par exemple :
#categories li { /* règles générales à tous les items de la liste */ padding-left : 16px; /* pour une image 12*12px */ margin-top : 6px; /* pour espacer les lignes */ } .premier { background : transparent url(images/ico-premier.jpg) no-repeat; } .sorcier { background : transparent url(images/ico-sorcier.jpg) no-repeat; }
et caetera. Bien entendu, on prendra soin de placer dans le répertoire images/
du thème lesdites icônes.
Nota : Il existe une autre méthode, que j'ai essayée hier, qui consiste à créer une nouvelle fonction en lieu et place de dcCatList() qui affecte automatiquement une classe du nom urlisé de la catégorie aux liens correspondants. On obtient un résultat de la forme :
<li><a class="Premiers-pas" href="/pages/Premiers-pas">Premiers Pas</a></li>
Si ce code vous intéresse, mentionnez-le dans les commentaires je le publierai. Mais il m'a semblé qu'il n'était pas utile de passer par une méthode si compliquée.
Important, faites des économies
Il va de soi (mais disons-le tout de même) que si vous comptez placer des icônes semblables dans le sidebar et à côté du titre, vous emploierez dans le code de la liste des catégories les mêmes noms de catégories que celles qui sont automatiquement injectées dans le titre. Vous éviterez d'avoir ainsi à « doublonner » les règles CSS.
Commentaires
1. Le vendredi 1 avril 2005 à 18:50, par ST
2. Le vendredi 1 avril 2005 à 19:44, par planeth
3. Le vendredi 1 avril 2005 à 19:58, par Kozlika
4. Le vendredi 1 avril 2005 à 20:42, par Kozlika
5. Le vendredi 1 avril 2005 à 20:52, par Kozlika
6. Le vendredi 1 avril 2005 à 21:14, par planeth
7. Le vendredi 1 avril 2005 à 21:35, par Kozlika
8. Le vendredi 1 avril 2005 à 22:03, par planeth
9. Le vendredi 1 avril 2005 à 23:18, par planeth
10. Le lundi 9 mai 2005 à 02:30, par Genesis
11. Le lundi 9 mai 2005 à 12:47, par Kozlika
12. Le mardi 10 mai 2005 à 20:12, par Genesis
13. Le mardi 10 mai 2005 à 21:48, par Kozlika
14. Le samedi 14 mai 2005 à 00:52, par Genesis
15. Le samedi 14 janvier 2006 à 15:48, par babas
16. Le samedi 14 janvier 2006 à 16:10, par Kozlika
17. Le dimanche 15 janvier 2006 à 18:10, par babas
18. Le mardi 17 janvier 2006 à 14:49, par babas
19. Le vendredi 17 mars 2006 à 17:18, par Urobore
20. Le dimanche 7 mai 2006 à 00:47, par Kaoru
21. Le dimanche 4 juin 2006 à 12:13, par HECHT Franck
22. Le dimanche 4 juin 2006 à 14:18, par Kozlika
23. Le samedi 23 septembre 2006 à 21:26, par Balbes
24. Le mardi 12 décembre 2006 à 18:26, par Rico
25. Le mardi 1 mai 2007 à 09:51, par Bene
26. Le mercredi 2 mai 2007 à 07:02, par Kozlika