[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.

miniatures

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.

tutoriel miniatures

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.

tutoriel miniatures

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 ;)

Mots-clefs : ,

42 commentaires pour “[Wordpress] Afficher les miniatures des derniers articles”

  1. Ek0 |

    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.

    RépondreRépondre
  2. shyboy |

    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.

    @+

    RépondreRépondre
  3. Pierre |

    @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) ;)

    RépondreRépondre
  4. Loky5 |

    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…

    RépondreRépondre
  5. Martin |

    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.

    RépondreRépondre
  6. Pierre |

    @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 ;)

    RépondreRépondre
  7. Revue de Blog #7 |

    [...] 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 [...]

  8. jisee |

    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 ?

    RépondreRépondre
  9. Martin |

    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.

    RépondreRépondre
  10. Pierre |

    @jisee: Merci ;) Pour les commentaires, c’est un truc codé dans mon thème en fait, pas un plugin.

    RépondreRépondre
  11. jisee |

    au fait comment sélectionner une catégorie précise ?

    RépondreRépondre
  12. Martin |

    <a href=”" title=”">
    <img src=”ID; $values = get_post_custom_values(‘thumb’, $cid); echo $values[0]; ?>” alt=”" class=”thumb” />

    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

    RépondreRépondre
  13. jisee |

    merci de la réponse rapide. ça marche sans pb :) allez je twitte l’article ^^

    RépondreRépondre
  14. Pierre |

    Héhé, merci Martin c’est tout à fait ça ;)

    RépondreRépondre
  15. damonx |

    merci de faire partager ta trouvaille
    le rendu est super je vais voir si j’arrive à le mettre en place sur mon blog

    RépondreRépondre
  16. Martin |

    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.

    RépondreRépondre
  17. Pierre |

    @Martin: Rajoute “if(is_home()){” tout au début du code ci-dessus (après le “< ?php" ), et aussi "}" tout à la fin (avant le "?>“) ;)

    RépondreRépondre
  18. Martin |

    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?

    RépondreRépondre
  19. Pierre |

    Problème résolu par mail ;)

    RépondreRépondre
  20. Valentin |

    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 +

    RépondreRépondre
  21. Geekeries.fr - Actualités High-Tech | Astuces : Afficher une miniature pour les derniers articles… |

    [...] code PHP pour votre sidebar : Pierre nous partage son code source de base que nous pouvons bien sûr modifier. Il affichera les [...]

  22. AJC Interactive |

    Super, c’est exactement ce que je cherchais, c’est une bonne chose et mets ça en application dessuite.

    RépondreRépondre
  23. Atmet |

    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.

    RépondreRépondre
  24. Joce |

    Super ce tuto ! Mais je n’arrive pas à mettre deux miniatures sur la même ligne !

    RépondreRépondre
  25. Joce |

    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.

    RépondreRépondre
  26. Pierre |

    @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; }

    RépondreRépondre
  27. Joce |

    Merci pour cette réponse rapide !

    RépondreRépondre
  28. Joce |

    J’ai bien rentré cette ligne de code dans ma feuille de style mais ça ne réagit pas malheureusement… :-(

    RépondreRépondre
  29. Joce |

    Autant pour moi ça semble fonctionner !

    RépondreRépondre
  30. Philippe |

    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

    RépondreRépondre
  31. Pierre |

    @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 ?

    RépondreRépondre
  32. Eolune |

    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 :)

    RépondreRépondre
  33. Pierre |

    @Eolune: D’après la doc, c’est bien &category=-3 par exemple pour exclure la catégorie 3…

    RépondreRépondre
  34. guyom |

    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.

    RépondreRépondre
  35. Pierre |

    @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é. :)

    RépondreRépondre
  36. nathy452 |

    merci pour ce topic, si sueulement vous etiez un peeu plus claire :)

    RépondreRépondre
  37. Shyboy |

    Merci pour cet excellent tuto!
    @+

    RépondreRépondre
  38. kanel |

    serait -il possible de le transposé pour wordrpess Mu ? que le code affiche des miniatures mais pour tous les blog ?
    Merci :)

    RépondreRépondre
  39. Pierre |

    Oula, je n’y connais vraiment rien à Wordpress Mu…

    RépondreRépondre
  40. kanel |

    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.

    RépondreRépondre
  41. carrion crow |

    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"/>

    RépondreRépondre
  42. essai minitature « pétina & graphic art |

    [...] code PHP pour votre sidebar : Pierre nous partage son code source de base que nous pouvons bien sûr modifier. Il affichera les [...]

Envoyer un commentaire