thumbnail

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.

Crédits photo : Motorito

29 commentaires

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

  2. 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. 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. 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 ??

  3. 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. 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…

  4. 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. 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. 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 :
      http://wpchannel.com/recuperer-premiere-image-article-wordpress/#more-12993

      Merci beaucoup

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

  6. 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 !

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

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

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

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

Laisser un commentaire