[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
![[Dossier] Le cinéma coréen sous la dictature de Park Chung-hee (1961-1979) – Partie 2](http://dooliblog.com/wp-content/uploads/2010/08/yeong-ja-s-heydays-2-60x60.jpg)
![[Dossier] Le cinéma coréen sous la dictature de Park Chung-hee (1961-1979) – Partie 1](http://dooliblog.com/wp-content/uploads/2010/08/Rice-60x60.jpg)
S'abonner aux articles
S'abonner aux commentaires
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 [...]
Super, c’est exactement ce que je cherchais, c’est une bonne chose et mets ça en application dessuite.
Nikel merci pour ton tuto, çà fonctionne parfaitement. Maintenant vais essayer d’ajouter le thumb à mes flux rss. Je sens que je vais y perdre des cheveux.
Super ce tuto ! Mais je n’arrive pas à mettre deux miniatures sur la même ligne !
Et saurait-tu comment virer les cadres bleus autour des images ? Je sais que c’est mon thème qui veut ça dès lors qu’une image est associée à un lien mais je ne sais comment changer cela… Merci en tout cas.
@Joce: Il ne tiennent pas sur la même ligne car les images sont à peine trop grosses par rapport à ta sidebar. Il faudrait soit réduire les images de quelques pixels soit augmenter la taille de la sidebar (sans tout casser
).
Pour le style des images, il faut ajouter la classe “thumb” dans ta feuille de style, par exemple ceci donnera une fine bordure noire (comme ici) :
img.thumb{ border:1px solid #555555; }
Merci pour cette réponse rapide !
J’ai bien rentré cette ligne de code dans ma feuille de style mais ça ne réagit pas malheureusement…
Autant pour moi ça semble fonctionner !
Bonjour, j’aurais besoin d’un coup de main : ce code est exactement ce que je cherchais désespérément, mais je suis novice avec wordpress et je n’arrive pas à le faire fonctionner! Je voudrais afficher dans la sidebar une image en fonction de la catégorie, j’ai donc copier le code, que j’ai modifié comme indiqué plus haut, mais j’ai deux colonnes dans mon thème et pas de fichier sidebar.php, j’ai donc choisi le fichier right.php (il y a aussi un fichier left.php), j’ai rempli les champs avec les adresses des miniatures pour les articles, et rien… Il fallait mettre le code dans un autre fichier?
Merci
@Philippe: C’est vraiment dépendant du thème, je ne peux pas vraiment t’en dire plus… Tu peux peut-être essayer de repérer d’autres éléments de ton blog dans le code pour localiser l’endroit où insérer le code PHP ?
Merci pour cette astuce très pratique
J’ai une petite question néanmoins, je cherche à exclure une catégorie, j’ai essayé &category=-# et &cat=-# et ça ne fonctionne pas. Auriez-vous une piste pour moi ? Merci d’avance
@Eolune: D’après la doc, c’est bien &category=-3 par exemple pour exclure la catégorie 3…
Salut Pierre
excellent ce script
par contre je voudrai faire une petite variante et je n’ai pas trouvé la solution malgré la piste “sizeof()” que tu as donnée.
moi je voudrai avoir SEULEMENT les 3 derniers articles que j’ai sélectionné, c-a-d à qui j’ai ajouté le champ “thumb”.
peut on faire cela ?
merci d’avance
G.
@guyom: je ne pense pas qu’il soit possible de récupérer uniquement les posts ayant un champ “thumb” (il y a bien les paramètres $meta_key et $meta_value mais apparemment les 2 doivent être renseignés pour que ça fonctionne). Essaye de tester $values.length pour voir si le champ a été trouvé.
merci pour ce topic, si sueulement vous etiez un peeu plus claire
Merci pour cet excellent tuto!
@+
serait -il possible de le transposé pour wordrpess Mu ? que le code affiche des miniatures mais pour tous les blog ?
Merci
Oula, je n’y connais vraiment rien à Wordpress Mu…
bah moi non plus
a mon avis il doit falloir allez cherchez ca dans la base mais ou.. si quelqu’un a une idée, je suis preneur
Merci.
Bonjour,
J’ai remarqué qu’il manque les php aux ouvertures de balises <?
Il faut écrire <?php sinon ça ne fonctionne pas (chez moi en tout cas)
Je me suit inspiré de ce script pour afficher les derniers post sur ma page d'accueil sauf le dernier (qui est affiché en gros):
<a href=""><img src="ID; $values = get_post_custom_values('thumb', $cid); echo $values[0]; ?>" alt="" class="thumb"/>
[...] code PHP pour votre sidebar : Pierre nous partage son code source de base que nous pouvons bien sûr modifier. Il affichera les [...]