Tout savoir sur la gestion des miniatures (thumbnails) avec WordPress

35 commentaires
Tout savoir sur la gestion des miniatures (thumbnails) avec WordPress
Depuis la version 2.9 de WordPress, les miniatures d'articles ont fait leur apparition sous la forme d'un module "Image à la une" dans l'éditeur.

Ces miniatures nécessitent que le thème prenne en charge une telle fonctionnalité ce qui est encore loin d’être le cas. Je vous propose donc de suivre ce tutoriel pour rendre compatible votre thème et de bénéficier ainsi d’une fonctionnalité au combien utile.

La plupart des blogs actuels affichent une miniature pour accrocher le lecteur à côté du titre et de la description d’un article. C’est le cas sur WordPress Channel et sur un nombre incalculable de blogs.

Activer la prise en charge des miniatures d’articles

Pour activer la prise en charge des miniatures, rendez-vous dans le module Apparence puis Éditeur. Vous pouvez également passer par votre client FTP favori pour éditer les fichiers du thèmes qui se trouvent dans le dossier /wp-content/themes/NOM_DU_THEME. Vous serez alors en mesure d’effectuer une sauvegarde au préalable.

Editez ensuite le fichier functions.php et rajoutez les lignes de code suivantes :

if (function_exists( 'add_theme_support' )) {
add_theme_support( 'post-thumbnails' );
}

Ce bout de code active le module Image à la une dans l’éditeur de WordPress.

Capture d'écran - Module Image à la une de WordPress
Choisissez un fichier image à définir comme une image à la une

Afficher les miniatures d’articles

Maintenant que vous disposez du module d’ajout de miniatures, il nous faut indiquer où nous souhaitons les voir apparaître sur le site. Typiquement, il nous faut intervenir dans la boucle de WordPress.

Pour rappel, la boucle ou loop affiche vos articles dans les différentes pages du site : accueil, catégorie, tags, etc.

Pour ne pas rentrer dans la technique, localisez tout d’abord la ligne qui appelle le contenu ou l’extrait de votre article dans le fichier index.php :

<?php the_content(); ?>

Ou

<?php the_excerpt(); ?>

Placez ensuite cette ligne de code avant l’une ou l’autre de ces 2 fonctions :

<?php
if ( has_post_thumbnail() ) { // Vérifies qu'une miniature est associée à l'article.
the_post_thumbnail();
}
?>

N’oubliez pas de sauvegarder le fichier en question puis réitérez l’opération pour l’ensemble des fichiers qui affichent la boucle (category.php, home.php si présent, etc.).

Utiliser différentes tailles de miniatures

Différentes tailles de miniatures existent. En réalité, il faut savoir que les miniatures d’articles peuvent servir à beaucoup de chose : pensez l’outil comme étant un module où l’utilisateur va indiquer une image.

La fonction d’affichage que nous venons de mettre dans le code peut donc être placée n’importe où, d’autant plus que des paramètres de taille existent.

the_post_thumbnail();                  // la miniature par défaut
the_post_thumbnail('thumbnail'); // Miniature (150px x 150px max)
the_post_thumbnail('medium'); // Taille moyenne (300px x 300px max)
the_post_thumbnail('large'); // Taille large (default 640px x 640px max)
the_post_thumbnail( array(100,100) ); // Autres tailles

Comme vous pouvez le constater, les tailles se basent sur les paramètres définis dans le back office de WordPress sous Réglages puis Médias. Prenez soin de les modifier à votre guise ou d’en définir une sur-mesure avec le dernier paramètre.

N.B : attention toutefois à ne pas créer des tailles à la chaine sans prendre soin de vérifier l’espace de stockage fourni par votre hébergeur. Chaque taille créé un fichier image de plus sur votre serveur.

Que faire pour récupérer les anciennes miniatures ?

Si comme moi vous avez utilisé pendant des années des champs personnalisés pour indiquer l’URL de vos miniatures d’articles – basé sur le script timthumb.php par exemple, il existe le plugin Get the Image de Justin Tadlock. Pour autant, je n’ai pas encore testé une telle extension. Il s’agit donc d’une piste que je vous donne pour creuser un peu plus sur le sujet.

Sans l’usage d’un plugin, vous perdrez tout vos paramètres préalablement définis.

Il est recommandé de toujours utiliser un thème WordPress basé sur la fonction de miniature fournie en natif. De cette manière, vous bénéficiez d’une plus grande stabilité pour les versions à venir et une meilleure compatibilité avec les plugins qui utilisent de plus en plus cette fonctionnalité. Vous pouvez également lire ce tutoriel sur la manière de récupérer la première image d’un article via PHP, évitant ainsi d’avoir recours aux miniatures.

Par Aurélien Denis

Consultant & Développeur WordPress / WooCommerce. Un site à créer, à maintenir ou à débuguer ? Contactez-moi.

35 commentaires
  1. Fatima Zahra

    Merci beaucoup
    J’ai importé prsq 41 000 article par des requêtes SQL via bd WordPress mais article il affiche seulement le contenu

    Si il y a une solution ou une requête pour importer les images mise en avant des articles pour s’affiche sur la page d’accueil
    Merci d’avance

      1. fatima zahra

        d’accord merci beaucoup de votre réponse

  2. vie dailes

    Bonjour, merci tout d’abord pour toutes ces précieuses informations, je me suis laissée tentée par le thème Jupiter et j’avoue qu’en tant que novice, je rencontre certaines difficultés, je n’aborde même pas la question de visuel composer ( mais peut être que je devrais???)
    voilà : mon principal problème est les images à la une de chaque article, sont beaucoup trop grandes et surtout trop larges et même en ajoutant des pluggins de redimensionnement d’images, je ne parviens toujours pas à réduire la taille
    voyez plutôt : http://viedailes.org/
    j’hésite franchement à changer de thème juste pour cette raison car je pense que le problème n’est peut être bien difficile à résoudre
    je vous remercie par avance de l’aide que vous pourrez m’apporter
    Bien cordialement

    1. Aurélien Denis auteur de l’article

      Bonjour, si le redimensionnement en masse ne donne aucun résultat c’est qu’elles sont à la bonne taille pour le thème. Voyez pour changer de thème si nécessaire, vous pouvez également poser votre question sur le forum WPFR.

  3. Sophie H

    Bonjour,

    Encore novice sur WordPress, j’aimerais savoir s’il existe une solution (ou un plugin) pour que la miniature du post (qui s’affiche en page home) soit différente de l’image à la une (qui apparaît en tête de l’article) ?

    Merci d’avance

  4. LG.

    Bonjour,
    Comment fait on pour désactiver le fait que la miniature s’insère automatiquement dans l’article même ?

    Merci,,

  5. Déb

    Bonjour, Que faire si on a ni “” ni “” Un grand merci

  6. aladin

    Bonjour Aurélien, merci pour votre tuto, bon je voudrais savoir si je peux affichés 3formes de thumbnails les uns prés de l’autre sachant que les tailles des thumbnails sont 150*125, 150*291,310*125. Merci

    1. Aurélien Denis auteur de l’article

      Désolé je n’ai pas compris la question…

  7. Pierre

    Bonjour Aurélien,
    Je viens d’installer le thème DIVI pour le blog de mon épouse, et ça commence à prendre forme.
    J’ai un soucis de doublon avec les thumbnails. Dans l’article je l’ai qui apparait aussi, avant l’image de l’article lui-même 🙁 y a t-il dans le epanel qq chose à décocher ?
    visible ici :
    http://www.kiwi-forme.net

    merci pour les lumières,
    Pierre

    1. Aurélien Denis auteur de l’article

      Sans doute une option ePanel, à voir avec le support (désolé de la réponse tardive).

  8. Nora

    Bonjour , je ne sais pas si mon post a avoir avec le sujet mais je suis très embêtée depuis que j’ai créé mon blog. En effet lorsque je crée un article pour montrer mes réalisations de flyer et je mets l’image à la une en 600*250 , l’article a une autre aspect: lorsque je fais une préview du poste en ligne , l’image s’affiche en rectangle et le flyer est complètement déformé. Y’a t-il un moyen pour mes articles soient affichés avec la taille réelle de l’image à la une? Je vous remercie pour votre réponse . Voici le lien de mon blog pour avoir une idée .http://thats-design.com/brazilian-flyer-template

    1. Aurélien Denis auteur de l’article

      Lors de l’import dans l’éditeur, veillez à choisir la taille réelle. Sinon, il faudra vérifier que le thème ne modifie pas certains aspects.

  9. R-win

    Bonjour. J’aurai une question par rapport à ça. Je voudrais insérer automatiquement sur mon blog wordpress qui est sous Mystique le bout de code suivant: ” itemprop=”image” ”
    juste avant src=”http://www.vbvhdbvhd.fr/monimage.jpg” dans la balise img et ce pour chacune des images rattaché à chacun de mes articles et ce dans le but d’avoir un plus jolie snippet avec une image à côté. A savoir que niveau gestion je n’ai jamais dis à wordpress de mettre telle ou telle image attaché à l’article. En fait c’est lui qui pris à chaque fois la première image.

    Merci beaucoup d’avance de votre aide

  10. Scarlett

    Merci beaucoup pour ce tuto, je cherchais désespérément la solution pour afficher mes images à la une sur mes pages tags et catégories ! 🙂

  11. belhaj

    Bonjour, une très bonne astuce que je vient d’appliquer sur mon site mais avant j’avais les miniatures son des lien vers l’articles et je veux conserver les lien
    comment puis-je rentre ce fragement de code un lien

    1. Veust80

      Bonjour

      Merci pour cette astuce vraiment pratique, mais par contre l’image sur mon site s’affiche avant le résumé de l’article, j’aurais souhaité avoir mon image sur la gauche avec le résumé qui s’affiche sur la droite (comme l’alignement dans les articles), enfin si c’est possible, cela améliorerais la présentation.
      Merci

  12. Coline

    Bonjour

    Mes thumbnails ne s’affichent pas…
    J’ai tout essayé… je comprend pas… Bon je suis plutot novice, je n’y comprend pas toujours grand chose en php…

    Voici le code que je voulais mettre dans un widget (j’ai ajouté des espace en espérant que ça s’affiche dans mon commentaire) :

    ’15’, ‘orderby’ => ‘rand’, ‘showposts’ => 1 ) ) ; ? >

    < a href=" ” >


    Le titre s’affiche bien mais pas l’image.
    J’ai aussi essayé en remplaçant the_post_thumbnail ( array ( 30, 30 ) ) par

    if ( has_post_thumbnail() ) { the_post_thumbnail ( ) ; }

    mais ça ne marche pas non plus…

    Je ne sais pas comment faire…

    Pouvez-vous m’aider?

    1. Coline

      Bon et bien l’affichage du code n’a pas fonctionné dans mon commentaire…

      Je voudrais afficher l’image d’un post de façon “random” 1 seul à la fois, bon ça, ça marche le titre s’affiche en random. Mais l’image ne s’affiche pas..

    2. Coline

      Bon dsl du dérangement :-/
      Il suffi que je demande de l’aide pour que tout de suite après je trouve la solution et je comprenne où étais mon erreur. lol
      Alors que j’y suis depuis tout l’après midi à cherche partout comment faire!

      Mais c’est quand même garce à ce blog que j’ai trouvé ma solution et que j’ai compris. Je ne savais pas que thumbnail concernait uniquement les image à la une lol.
      Donc j’ai trouvé ma solution ici :
      https://wpchannel.com/wordpress/tutoriels-wordpress/recuperer-premiere-image-article-wordpress/

      Merci beaucoup 🙂

  13. Thibaut Grevet

    Bonjour,
    Je me permet de vous contacter après multiples recherche…
    Je dispose d’un blog WordPress utilisant les thumbnails sur ma page d’accueil.
    Cependant je ne trouve pas le moyen de créer 2 sortes d’articles pour la page d’accueil permettant par exemple de poster une vidéo directement lisible sans passer par l’intérieur de l’article.
    Connaissez vous un moyen ?.
    Merci pour toute ces aides bien utiles..
    A bientôt.

    1. Aurélien Denis auteur de l’article

      En fait, il faut utiliser les metaboxes qui permettent d’ajouter des champs dans l’éditeur dont on pourra récupérer les valeurs dans le thème – et donc sur le site. Elles reposent directement sur les champs personnalisé. On peut donc imaginer créer un champ video avec pour valeur le code embed.

      Pour l’affichage dans le code, cette page du codex est essentielle car elle renvoie vers la documentation adéquate : http://codex.wordpress.org/Custom_Fields

      Des plugins doivent le faire aussi je pense…

  14. britain

    bonjour,
    comment modifier ce code
    <img src="ID, ‘nivoimage’, true); ?>" alt="" title="" /></
    pour que la fonction “image à la une” soit active avec,merci.
    j’ai cherché sur google mais pour l’instant,rien trouvé.

    1. Aurélien Denis auteur de l’article

      Désolé le code ne passe pas dans le commentaire car il faut le formater en HTML (facile en collant le code en mode Visuel puis en récupérant ce dernier dans l’onglet HTML de l’éditeur de WordPress).

      Sinon, il y a le forum francophone de WordPress ou le Questions / réponses de GeekPress. 😉

      1. britain

        j’ai avancé de tout façon,j’ai pourtant mis les balises codes pour poster ce code.j’ai fait avec la balise,que l’on voit dans les thèmes par défaut,à la hauteur des commentaires,à la ligne
        “Vous pouvez utiliser ces balises et attributs HTML :”
        Justement car j’ai pensé que c’est du HTML.
        je connais le forum wordpress-fr.net . Pour geekpress vous êtes sérieux ??

        1. Aurélien Denis auteur de l’article

          Oui sur GeekPress il y a un Q&A. 😉

          Et pour le code dans les commentaires, il faut utiliser la balise code mais aussi convertir les données en HTML.

  15. Yvan

    Salut,
    Je suis Nul en technique et je ne vois pas ou placer la ligne dans code dans le fichier PHP ??
    Quelqu’un peut m’aider ?
    Merci

    1. Aurélien Denis auteur de l’article

      Tu le places entre les balises PHP ouvrantes et fermantes. Cela dépend des fichiers fonctions.

      Le mieux est d’essayer en ayant fait une copie préalable.

      1. Déb

        Bonjour, merci pour toutes ces astuces formidables, je fais beaucoup de créa de contenu, je débute mon apprentissage en créa de blog et modifier les css me fait un peu peur, cependant je voudrais me lancer en intégrant le code que vous donnez en début d’article permettant l’accès au module image à la une mais je ne comprends pas où le rédiger ? N’importe où ? Un grand merci

  16. [email protected] Wordpress

    Oui c’est beaucoup mieux quand un thème a les miniatures en natif. J’ai essayé sur un thème normal sans succès…

    Merci pour l’astuce en tout cas

  17. Fabien

    Merci pour cet article très clair. Mon thème ne propose pas l’extrait et les miniatures. Voici mon problème résolu.

  18. Jonathan

    Merci pour l’astuce, wordpress avance bien!

Laisser un commentaire