Comment Utiliser l’image Mise en avant de WordPress

Lorsqu’on débute avec WordPress, il n’est pas forcément naturel d’utiliser certaines fonctionnalités dont on ne retrouve pas d’équivalents ailleurs sur d’autres plateformes de Blogging. Et si une fonction est parfois méconnue et peu utilisée lors de l’utilisation de WordPress et plus précisément lors de la rédaction d’articles, il s’agit bien de la fonction Image à la Une. Qu’on voit désormais via l’éditeur comme : Image mise en avant.

L’image à la Une, également appelée Post Thumbnails ou encore Featured image, est une fonction de thème qui a été ajoutée à WP à l’occasion de sa version 2.9 (oui, cela ne nous rajeunit pas !). Elle sert notamment sur un site WP ou Blog WP, à représenter le sujet abordé dans la publication. Comme l’indique son nom, quand bien même une publication contient plusieurs photos, c’est la photo à la Une qui sera celle qui sera affichée en page d’accueil et qui sera mise en évidence.

Une Utilisation très simple de l’Image à la Une

Lors de l’ouverture d’une vue de rédaction d’article (ou de page), l’image en une est cet encart qui s’affiche à gauche et qui ressemble à ceci lors qu’aucune image n’aura été préalablement sélectionnée :

image-a-la-une-wordpress

Et dès lors où une photo ou image sera positionnée, ce bloc WordPress ressemblera alors sensiblement à la capture qui suit ci-dessous :

featured-images-wordpress-yesweblog

Si toutefois votre article ou future publication contient plusieurs images et/ou photo, il conviendra alors de positionner dans cet encart Image à la Une, celle qui sera la plus représentative de votre contenu. Celle qui symbolisera le mieux le sujet ou qui illustrera le mieux le propos.

Entre le 7 juin 2016 quand cet article a été publié et aujourd’hui le 23 novembre 2023, le widget de l’image en Une a été renommé (dans la version traduite en français de WordPress : Image mise en avant :

image mise en avant wordpress editeur

Les Affichages de l’Image à la Une WordPress

L’affichage de l’image à la une sur votre page d’accueil ou encore sur vos pages de catégories, dépendra d’abord de votre Thème WordPress.

Si la plupart des thèmes sortis ces dernières années, qu’ils soient premium/payants ou gratuits, utilisent cette fonctionnalité, d’autres thèmes plus anciens ou plus minimalistes, ne l’utilisent pas. Auquel cas, pour afficher une image en tête d’article, il faudra tout simplement commencer la rédaction du billet par l’ajout d’une image ou photo avant tout ajout de texte, comme suit :

image-photo-article-wp

En revanche, si votre thème WP utilise la fonctionnalité d’image à la une, alors l’affichage variera en fonction des paramètres positionnés par l’auteur du thème. Pour les thèmes de SoloPine par exemple, l’affichage est classique et permettra d’afficher l’image en une selon la mise en page du thème qui sera configurée. Voici un exemple avec la mise en page en grille/grid du thème WP Oleander :

grid-view-oleander

Cet affichage serait quasiment le même avec les thèmes Florence, Rosemary ou encore Redwood. Cependant l’affichage pourra être plus simple et courant comme suit :

full-post-layout

Ou encore en mode liste comme dans l’exemple qui suit ci-dessous :

liste-layout-wordpress-featured

Particularités de l’Image en Une selon le thème WP activé

La Majorité des comportements qu’aura une Image en Une dépendra donc du thème choisi et activé sur un blog ou site WP. Que ce soit le lien positionné derrière l’image ou encore la façon d’affichera l’image en une en page d’accueil ou l’affichage sur l’article lui-même.

Le lien de l’image mise en avant WordPress

– La majorité du temps, quand on clique sur une Image en Une sur la page d’accueil ou de catégorie d’un blog, on atterrit alors sur l’article lui même et son contenu. Ceci est le comportement le plus courant donné à l’image à la une par les auteurs de thèmes.
– Cependant, certains auteurs de thèmes prévoient l’affichage de l’image en une sans que pour autant on puisse trouver de lien vers l’article pour lequel l’image est utilisée.
– Autre cas moins courant et peu pertinent : L’image en Une dispose d’un lien, mais il s’agira d’un lien vers l’image elle-même. En somme cela vous amènera vers une page sur laquelle est hébergée l’image, sans rien avec. Pas d’articles… C’est par exemple le cas avec les images en une sur la partie Blog du thème Floyd. Pour changer ce comportement il faudra alors intervenir dans le code .php des fichiers du thèmes (avec le support de l’auteur du thème).

Dimensions de l’image mise en avant WordPress

La Taille ou la forme affichée de votre image en une dépendra là aussi de la configuration apportée par l’auteur de votre thème. Chez Solopine pour l’exemple, la plupart des thèmes comme Florence utilisé pour YesWeBlog, demandent une image ou photo en une avec une largeur d’environ 740 pixels. Il faut bien noter que certains thèmes redimensionneront les photos pour un affichage optimal, tandis que d’autres seront susceptibles de tasser l’image ou encore de n’en afficher qu’une partie. Voilà donc un point très important dans le choix d’un thème.

wordpress-org-yes-we-blog

L’image mise en avant WP avec l’éditeur de blocs

Avec l’arrivée de l’éditeur de Blocs dans WordPress, les habitudes ont changé pour les personnes qui ont décidé d’utiliser ces blocs à la place de l’éditeur classique (notez que vous avez le choix).

Pour trouver comment mettre une image mise en avant via les blocs, il vous faudra vous rendre sur la droite de votre écran et cliquer sur l’onglet Article comme suit :

image mise en avant editeur blocs wordpress article

Puis il vous faudra scoller/descendre sur la colonne jusqu’à voir un cadre rectangulaire sur fond gris dont le titre est : Image mise en avant. Dedans, il vous suffira de cliquer pour justement « Définir l’image mise en avant ». Une mécanique à prendre mais qui peut impliquer de chercher ce widget plusieurs secondes au début. Ensuite, dans le meilleur des cas, on s’habitue !

Associer une Featured image en masse aux articles

Si vous venez d’importer votre contenu depuis une autre plateforme de blog vers WordPress ou encore que vous passez d’un thème sans image en Une à un thème qui les utilise, et que vous avez des dizaines voire des centaines d’articles auxquels associer une image en Une, alors des plugins existent pour faire le job pour vous. J’avais d’ailleurs eu l’occasion de tester l’extension évoquée dans ce billet. cette extension permettre de mettre automatiquement en Une, la première photo ou image publiée sur un article. Pratique quand cela permet de faire le job pour vous, surtout quand il y a beaucoup de publications à retoucher.

Détails importants de la Featured Image WP

L’image en Une fait désormais partie intégrante des fonctionnalités WP avec lesquelles la plupart des propriétaires de site ou blog propulsés avec WordPress composent. Aussi, il convient de prêter attention à certains détails quand on associe une image en Une à un article. Parmi les détails à checker, il faudra :

Faire attention à la Taille de l’image ou Photo

Certains thèmes utilisent de magnifiques et massifs sliders. Et ces sliders sont très souvent alimentés automatiquement par les images en Une des articles. Aussi, pour que votre slider n’affiche pas des photos de basse qualité dont on verra tous les pixels et où les couleurs baveront, veillez à ajouter des photos qui soient de qualité suffisante tout en étant assez light pour ne pas gêner la navigation.

Faire attention aux dimensions de vos photos et au format

Si vous adorez les photos au format portrait, photos toute en hauteur et autres images Pinterest friendly, alors veillez à l’éventuel redimensionnement de celles-ci par votre thème. S’il ne retaille pas vos photos, tant mieux. Sinon, au pire, vous pourrez par exemple avoir un visage qui ne s’affichera que jusqu’au nez quand d’autres photos seront tout simplement coupées dans leur affichage. Dommage non ?

Si vous rencontrez ce cas, vous aurez toutefois l’occasion d’harmoniser le ratio de certaines de vos images avec des extensions recommandées comme Regenerate Thumbnails ou Force Regenerate Thumbnails.

La qualité

Si votre thème utilise des photos en une mais de très petite taille, méfiance quand il s’agira de publier votre billet sur les réseaux sociaux. Car si vous optez volontairement pour vous adapter à votre thème, pour une image ou photo de petite taille, comme par exemple de 250×300 pixels, cette image en Une sera fort probablement celle qui sera poussée vers Facebook ou encore Twitter. Or elle sera envoyée avec ses petites dimensions et par conséquent, lorsqu’elle s’affichera sur les réseaux sociaux, à une taille plus grande, elle aura l’air de mauvaise qualité.

WordPress

Afficher l’image mise en avant dans la liste des articles du tableau de bord WP

Notez que pour les médias web qui tournent via WordPress et qui contiennent beaucoup de contenu, une fonctionnalité via extension peut être très utile. Cette fonction permet d’afficher les images principales de vos articles et pages WordPress dans votre liste d’articles, comme suit :

featured admin thumb

Des extensions WordPress comme Featured Image Admin Thumb permettent d’obtenir cela. Ou encore des plugins tels que Wen Featured Images. Qui permettent d’associer, changer ou supprimer une image mise en avant d’article WP sans rentrer dans l’article. Ce qui évidemment peut faire gagner beaucoup de temps !

Comment avoir des images mise en avant après une migration ?

Si vous voulez récupérer des photos et images à distance parce que vous avez migré votre contenu de Blogger vers WordPress ou d’OverBlog vers WordPress, un plugin tel que Cache Images sera alors indispensable. L’outil scannera vos articles et interrogera le blog/site web d’origine (donc ne le supprimez surtout pas avant la fin du traitement de rapatriement de vos images).

Une fois vos images importées (vérifiez bien), vous pourrez alors les associer manuellement à vos articles et pages WP. Ou utiliser un plugin qui le fera pour vous.

Conclusion

WordPress propose avec l’image en Une, de mettre le contenu visuel en valeur, ce selon le thème choisi. La bonne nouvelle c’est que de nombreux thèmes gratuits, de qualité et très simples, exploitent très bien cette fonctionnalité aussi facile à utiliser qu’elle peut être chouette pour les visiteurs.

Cependant, il ne faut pas passer à côté de certains détails de fonctionnement des images en Une lorsqu’on choisit un thème. En effet, sauf intervention et modification du code .php des fichiers du thème, lorsqu’un comportement est associé à une image en une par l’auteur du thème, il ne sera que très rarement possible de le modifier. Alors n’hésitez pas quand vous êtes sur une version démo d’un thème de cliquer partout, notamment sur les images en une pour voir comment elles se comportent : Ont-elles un lien ou non ? Ou pointe ce lien si il y en a un ? Quelle semble être la taille à respecter au max et au minimum ? Le thème utilise cette fonction ?…

Comment Utiliser les Images à la Une de WordPress

Quoi qu’il en soit, si vous bloguez via WP, n’hésitez pas à profiter de cette fonctionnalité qui vous permettra d’associer une belle photo ou image à votre contenu textuel. Votre image en Une s’affichera alors (si votre thème le permet), sur votre page d’accueil et vos pages de catégories :)

L’image mise en avant sur WordPress est l’image principale de l’article

Et si vous décidez de mettre en image mise en avant de WordPress pour un article une photo dont la largeur est de 1200 px ou plus, alors cela pourra peut-être contribuer à faire apparaître votre article dans Google Discover. Et par extension, vous amener du trafic supplémentaire. De quoi ne pas négliger cette image qui est la première que l’internaute verra !

 



Partager ce contenu :
Griselidis
Griselidis

Heureuse maman d'un petit garçon né en 2018, je tiens aujourd'hui quatre blogs. Après 17 années passées dans une grande entreprise de téléphonie, je travaille désormais en tant que webmaster freelance à mon compte depuis 2015.

Newsletter

Saisissez votre adresse e-mail ci-dessous et abonnez-vous à la newsletter

12 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *

  1. J’avoue que je recoupe mes photos sur photoshop et que je les insere directement dans l’article, avec l’option « lire plus ». Je n’ai jamais encore utilisé l’option « image à la une », mais peut-etre devrais-je m’y mettre ?
    Merci pour ce tutoriel en tout cas !

  2. Bonjour GG,
    J’ai une petite question ! En fait j’aimerai, pour un article uniquement, mettre une image à la une afin qu’elle s’affiche sur la page d’accueil de mon blog mais je ne veux pas qu’elle apparaisse en haut de mon article lorsqu’on clique dessus ! En gros je veux un article sans image à la une, mais avec une miniature que j’aurai moi-même choisi (je ne sais pas trop comment l’expliquer, désolée). C’est possible ? Si oui, comment ?
    Merci beaucoup !

    • Je pose ici la même question de Sarah… J’ai cherché et pas encore trouvé de solution. Quelqu’un·e aurait une idée ? Merci !

      • Bonjour Nathalie, cela dépend du thème que tu utilises car certains thèmes permettent de configurer ce genre de souhait mais beaucoup hélas sont construits beaucoup + basiquement sans permettre cela. Ceci est une option qu’on trouve par exemple chez certains thèmes de chez solopine

        • Merci pour ta réponse, GG !
          J’ai finalement trouvé où je devais faire une modification dans la personnalisation de mon thème (TOTAL).
          Encore merci pour la réactivité :-)

  3. Bonjour

    J’ai une question

    Suite à un changement de thème récent, je souhaite activer l’image à la une sur l’ensemble de mes anciens articles mais pour l’instant je n’ai pas trouvé d’autre solution que celle d’aller dans chaque article et de charger l’image une par une. Ce qui va me prendre 100 ans. Merci pour votre aide.

  4. Bonjour :)
    Merci pour cet article. Pour ma part, j’ai un petit soucis avec mes images à la une. Elles dégradent la qualité de mes photos et j’ai beau les redimensionner ; rien n’y fait !
    J’ai l’habillage WP qui s’appelle OLSEN LIGHT. Et ça ne me le faisait pas avant lorsque j’avais un autre habillage sur un autre blog…
    Tu aurais une solution ? J’aimerais ne pas à avoir à changer d’habillage ahah ^^

    Merci ! Bisous

  5. Bonjour,
    L’image a la une de mon theme est de tres mauvaise qualite et je n’arrive pas a l’ameliorer. Pourriez-vous m’aider ? Merci d’avance.

  6. Bonjour,
    Lorsque je copie l’adresse de mon site sur facebook, une image associée apparaît. J’aimerai la modifier mais je ne me souviens plus comment on fait. Le savez vous?
    Merci