Support WordPress Francophone / Sidebar : images à la place des titres

ppdy · 06-05-2008 16:16:56

Bonjour,

Ma configuration WP actuelle
- Version de WordPress :v2.3.3
- Thème utilisé :WordPress Default Fr 1.6
- Plugins en place :
- Nom de l'hebergeur : Free
- Adresse du site :http://www.laguerredesvaches.com/

Problème(s) rencontré(s) :

Comment puis-je faire pour mettre des images à la place des textes "Catégories d'articles", "Commentaires récents", "Nuage de tags" sur mon blog ?

Merci.

Difré · 06-05-2008 17:18:59

J'ai une première solution, je ne sais pas si elle te conviendra !

Quand tu utilise la fonction wp_list_categories, tu a moyen de modifier le titre qui va s'afficher.

Donc au lieu de marquer "Catégories d'articles", tu marque un truc du genre :
"<img src=\"wp-content/themes/montheme/images/image.png\" alt=\"categories d'articles\" id="img_titre"/>"

Dans la pratique cela donne :

Code:

<?php
   $param = 'title_li=<img src="wp-content/themes/montheme/images/image.png" alt="categories darticles" id="img_titre"/>';
   wp_list_categories($param);
?>

Voila, a toi d'en faire ce que tu en veux !

Je t'invite à regarder toutes les possibilités de wp_list_categories sur ce lien.

Comme une image · 06-05-2008 18:04:29

Tu peux y aller également en CSS avec un style qui fasse :
content:url(...) ;
en t'arrangeant avec ton thème pour que chaque titre ait un sélecteur CSS spécifique.

L'avantage, c'est que c'est très accessible au sens Web 2.0 : tes titres s'afficheront « en clair » pour ceux qui auront désactivé la feuille de style (penser au CSS Naked day !) et graphiquement sur les navigateurs modernes.

Difré · 07-05-2008 17:50:23

En parlant, d'accessibilité, si tu désactive le CSS, ton image sera encore là !!

Et puis pour être accessible avec une image, il ne faut pas oublier l'attribut 'alt' (résumé de ce qui se trouve dans l'image), qui sera affiché si l'image ne se charge pas !!

Comme une image · 07-05-2008 18:05:40

Difré a écrit:
En parlant, d'accessibilité, si tu désactive le CSS, ton image sera encore là !!

En l'occurrence, non, parce que je proposais de remplacer via CSS du texte par une image. Je ne sais pas si ça marche, d'ailleurs, mais ça devrait. Quelque chose comme :

Code: HTML

CSS :
#titre1 { content:url(URL de l'image de remplacement) }
(...)
 
HTML :
<h2 id="titre1">Titre du widget</h2>

Donc, si le CSS est désactivé, c'est bien « Titre du widget » qui s'affiche.
La seule difficulté, disais-je, c'est de trouver le bon sélecteur pour chaque titre (là, j'ai simplifié avec un Id).

Difré a écrit:
Et puis pour être accessible avec une image, il ne faut pas oublier l'attribut 'alt' (résumé de ce qui se trouve dans l'image), qui sera affiché si l'image ne se charge pas !!

Ça, il n'est jamais mauvais de marteler le message !

Comme une image · 10-05-2008 11:35:36

J'ai parlé un peu trop rapidement avec mon histoire de content qui ne s'applique en fait que sur les pseudos éléments :before et :after. siffle
Mon truc est néanmoins possible (ouf !)

Mettons que ton titre soit dans une <div id="titre1">bla bla</div>

Tu ajoutes dans ton CSS un truc du genre

#titre1:before { content:url(...) }
#titre1 { overflow:hidden; }

L'idée, c'est que l'image « décale » le titre vers la droite, lequel sera masqué par overflow:hidden.