[Wordpress] Afficher les miniatures des derniers articles Ecrit par Pierre le 04.05.08
Voici un petit tutoriel pour partager ce que je me suis amusé à faire et que vous pouvez voir dans la sidebar de ce blog : afficher des miniatures correspondant aux derniers articles du blog. Un moyen intéressant d’attirer l’oeil (puis le click 
) des personnes arrivant sur le blog depuis un moteur de recherche, et de diminuer le taux de rebond.
J’ai d’abord testé quelques plugins, mais ceux-ci m’ont semblé trop lourds et peu flexibles pour la simplicité de la tâche, alors voici ma méthode :
1) Dans Réglages > Divers > Taille des miniatures, choisissez la taille (en fonction de la taille de votre sidebar, du nombre de miniatures que vous voulez par ligne, etc… j’ai mis 60px pour ma part). Veillez à cocher la case “Rogner les images pour parvenir aux dimensions exactes” si vous souhaitez toujours avoir des miniatures de la même taille.
2) A présent, dès que vous uploaderez une image, une miniature à ces dimensions sera créée. Dans le gestionnaire de media, vous devrez cliquer droit sur la miniature et copier l’adresse de l’image.
3) Dans la page d’édition de l’article associé (en bas), ajoutez un champ personnalisé avec la clé “thumb” et pour valeur l’adresse de la miniature précédemment copiée.
4) Maintenant, l’affichage. Le code suivant inséré dans le fichier “sidebar.php” permet d’afficher les images des 9 derniers articles :
<?php
global $post;
$myposts = get_posts('numberposts=9&orderby=post_date&order=DESC');
foreach($myposts as $post) :
?>
<a href="<? the_permalink(); ?>" title="<? the_title(); ?>">
<img src="<? $cid = $post->ID; $values = get_post_custom_values('thumb', $cid); echo $values[0]; ?>" alt="<? the_title(); ?>" class="thumb" />
</a>
<?php endforeach; ?>
Attention, ce code sous-entend que chacun des 9 derniers articles possède l’adresse d’une miniature dans un champ personnalisé. Il ne serait pas bien difficile de modifier le code pour mettre une miniature par défaut dans le cas inverse.
Vous pouvez bien sûr le changer et l’adapter à votre guise, pour afficher plus d’articles par exemple, ou encore sélectionner une catégorie uniquement. Vous pouvez aussi ajouter le style “thumb” dans votre feuille de style pour personnaliser l’affichage des images
S'abonner aux articles
S'abonner aux commentaires
S'abonner au format PDF
Très intéressant, je me demandais comment le faire sans m’embêter ! Merci.
Est-il possible de tester si l’attribut “thumb” existe et agir selon les cas ? ça permettrait de ne pas avoir de thumb pour tous les articles.
très Bon tout ça!
je sens que je vais l’adopter sur Mon blog/forum/ annuaire Wordpress sur lequel je vous invite à vous inscrire Pierre & Hyewon.
@+
@Ek0: De manière très simple avec le code donné, tu peux regarder la taille de “values” (sizeof()) : si c’est 0, il n’a pas trouvé l’attribut “thumb”, donc tu peux par exemple mettre une image par défaut (ou encore une image aléatoire)
Tu es génial Pierre !
Je cherchais comment extirper et adapter mon script (quasiment le même le page d’accueil) afin de le mettre en single.php pour avoir un bloc visible sur chaque article. Et je peux faire un include de categorie plus facilement que sur mon code.
PS: Du coups tu as du virer ton script spécial ToA…
Monsieur,
C’est avec grand intérêt que j’ai lu votre post et je souhaiterai volontier inclure cette fonction sur leblogdesmontres.fr
J’ai créé des miniatures que j’ai inséré dans la partie champ personnalisé. J’ai inséré le code dans le fichier sidebar.php mais il ne se passe rien.
Pouvez-vous me conseiller?
Merci et à bientôt.
@Martin: C’est étrange, quand je regarde le code source de ton blog, je ne vois aucune référence au code donné. Tu es sûr de l’avoir inséré au bon endroit ? (et dans le fichier sidebar.php du bon thème ?)
EDIT: problème résolu par mail
[...] vos posts ? Vous aimeriez montrer vos dernier posts avec des images dans la sidebar ? Pierre nous a pondu un petit tuto pour mettre les miniatures de vos derniers posts dans la sidebar. C’est pas bien compliqué, il y a un peu de code, mais [...]
merci pour ce sript vraiment très bon, facilement personnalisable. pratique le .thumb a mettre dans le css.
ça faisait longtemps que je cherchais quelque chose comme ça.
ps: qu’est-ce que tu utilise pour l’éditeur wysiwyg des commentaires ?
Merci encore pour ce code.
J’ai préféré faire figurer les miniatures sur ma page d’accueil… ( http://leblogdesmontres.fr )
Grâce à ce système, les blogs peuvent réellement évoluer vers de nouvelles formes.
@jisee: Merci
Pour les commentaires, c’est un truc codé dans mon thème en fait, pas un plugin.
au fait comment sélectionner une catégorie précise ?
Dans la partie (’numberposts=9&orderby=post_date&category=23&order=DESC’)
il faut remplacer le numéro 23 par l’ID de votre catégorie
merci de la réponse rapide. ça marche sans pb
allez je twitte l’article ^^
Héhé, merci Martin c’est tout à fait ça
merci de faire partager ta trouvaille
le rendu est super je vais voir si j’arrive à le mettre en place sur mon blog
je voudrais encore améliorer ce système: je voudrais en effet n’afficher les miniatures que sur ma page d’accueil et l’exclure ainsi des pages de teags, catégories et résultats de recherche. Avec l’expression if (is_home) ça devrait être possible mais je ne sais pas où la placer pour que ça marche. Quelqu’un peu m’aider?
Merci et à bientôt.
@Martin: Rajoute “if(is_home()){” tout au début du code ci-dessus (après le “< ?php" ), et aussi "}" tout à la fin (avant le "?>“)
j’ai bien inséré les codes <?php if(is_home()){ et , mais ça ne fonctionne pas.
A la fin c’est bien: qu’il faut mettre?
Problème résolu par mail
Merci encore pour l’astuce =), j’ai fait un tuto complet avec les façons de le modifier, s’il y a une erreur ou un problème merci de m’en faire part
A +
[...] code PHP pour votre sidebar : Pierre nous partage son code source de base que nous pouvons bien sûr modifier. Il affichera les [...]