Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter des images mises en avant ou des miniatures de publication dans WordPress

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Vous cherchez un moyen d’ajouter des images mises en avant dans vos publications en avant de votre blog WordPress ?

Les images en vedette, également connues sous le nom de miniatures de publication, sont une fonctionnalité WordPress bien connue, supportée par la plupart des thèmes. Elles constituent l’image principale de vos publications de blog, et elles apparaissent souvent à côté du Titre sur votre page d’accueil et sur les réseaux sociaux.

Dans cet article, nous allons vous afficher comment ajouter facilement des images fonctionnalité en avant ou des miniatures de publication dans WordPress.

Adding featured images in WordPress

Guide du débutant pour les images mises en avant sur WordPress

Les images mises en avant sont une fonctionnalité des thèmes WordPress. Presque tous les thèmes WordPress sont dotés d’un support intégré pour les images mises en avant et les affichent magnifiquement dans les différentes parties de votre site WordPress.

Featured images preview on a typical WordPress blog

En tant qu’êtres humains, nous trouvons les éléments visuels plus attrayants que le texte brut. Les images mises en avant vous aident à rendre vos pages de blog plus attrayantes.

Elles vous aident également à susciter l’engagement des utilisateurs/utilisatrices et à augmenter le nombre de vues des pages. Les moteurs de recherche et les sites de réseaux sociaux peuvent également utiliser ces images et les afficher dans les résultats de recherche et les flux d’actualités des réseaux sociaux.

Outil de personnalisation, les images mises en avant sont utilisées pour les articles de blog, mais vous pouvez également définir des images mises en avant pour les pages et les types de publication personnalisés.

Note : Les images mises en avant ne sont pas les mêmes que les images de couverture. Voir la différence entre l’image de couverture et l’image mise en avant dans WordPress.

Ceci étant dit, voyons comment ajouter facilement des images mises en avant dans WordPress.

Tutoriel vidéo

Subscribe to WPBeginner

Si vous préférez les instructions écrites, continuez à lire.

Ajout d’une miniature de publication ou d’une fonctionnalité en avant dans WordPress

Pour ajouter une image mise en avant à un article WordPress, il suffit de modifier ou de créer un nouvel article de blog.

Dans l’éditeur de contenu, vous trouverez l’onglet image mise en avant dans la colonne de droite.

Set a featured image

Vous devez cliquer sur la zone  » Réglages de l’image avant « , ce qui fera apparaître la fenêtre surgissante de l’outil téléversement de WordPress.

À partir de là, vous pouvez téléverser une image depuis votre ordinateur ou utiliser une image existante de votre médiathèque. Une fois l’image sélectionnée, il vous suffit de cliquer sur le bouton « Définir l’image Sélectionné ».

Setting a featured image

WordPress affiche désormais une prévisualisation de l’image mise en avant dans la colonne de droite.

Cependant, l’image mise en avant réelle sera différente en fonction de votre thème WordPress.

Add featured images in wordpress

Vous pouvez maintenant enregistrer ou publier votre publication ou la Prévisualiser pour voir comment l’image mise en avant apparaîtra sur votre site direct.

En fonction des Réglages définis par le développeur/développeur de votre thème, votre mise image avant apparaîtra automatiquement avec vos publications.

Comment trouver et utiliser efficacement les images mises en avant ?

La prochaine grande question que se posent la plupart des débutants est de savoir où trouver des images à utiliser comme images mises en avant.

Vous ne pouvez pas vous contenter de rechercher des images dans Google et d’utiliser n’importe quelle image provenant de l’internet. Ces images sont protégées par des droits d’auteur et leur utilisation sans droit peut entraîner des problèmes juridiques.

Heureusement, il existe plusieurs ressources que vous pouvez utiliser pour trouver des images gratuites pour vos publications de blog.

Nos favoris sont les suivants :

  • Shutterstock – Ils ont quelques images gratuites, mais la vraie valeur vient de leurs offres payantes, qui vous donnent accès à des tonnes de photos de haute qualité, d’illustrations, de dessins, de vidéos, et plus encore.
  • Unsplash – Une ressource en ligne populaire publiant des images en haute résolution que vous pouvez utiliser sur votre site et pour d’autres projets.
  • Negative Space – Une collection bien organisée d’images libres de droits.
  • New Old Stock – Une collection de photographies anciennes provenant d’archives publiques.
Unsplash is a popular free image resource for bloggers

Note: Toutes ces sources fournissent des images en haute résolution, ce qui signifie qu’elles ont une taille de fichier et des dimensions importantes. Vous devrez optimiser les images pour le web avant de les utiliser comme images en avant.

Les images mises en avant sont gérées par votre thème WordPress. Afin de modifier la façon dont votre thème affiche les images avant, vous devez avoir quelques connaissances de base en CSS ou en codage WordPress.

Si vous êtes à l’aise avec le codage, continuez à lire pour plus d’astuces.

Guide du développeur/développeur de thème pour les images mises en avant et les miniatures de publication dans WordPress

L’image en avant est une fonctionnalité populaire supportée par presque tous les thèmes WordPress. Dans de rares situations, vous pouvez rencontrer un thème qui ne supporte pas les images mises en avant, ou vous pouvez ne pas aimer la façon dont ils gèrent les images mises en avant.

Dans ce cas, vous pouvez ajouter le support de l’image mise en avant à votre thème ou modifier la façon dont elle apparaît.

Si vous êtes à l’aise pour modifier les fichiers du thème WordPress et que vous connaissez un peu de CSS personnalisé, vous pouvez le faire vous-même.

Si votre thème ne prend pas en charge les éditeurs/éditrices, alors vous ne verrez pas la faculté d’ajouter une image mise en avant dans l’éditeur de contenu.

Pour ajouter le support des images mises en avant dans un thème WordPress, vous devez ajouter cette ligne de code dans le fichier functions.php de votre thème :

add_theme_support( 'post-thumbnails' );

Nous vous déconseillons de modifier directement le fichier functions.php de votre site si vous n’êtes pas développeur/développeuse. La moindre erreur peut casser le site et provoquer de nombreuses erreurs.

Un moyen plus facile d’ajouter du code personnalisé est d’utiliser WPCode. Il s’agit de la meilleure extension d’extraits de code pour WordPress. Vous pouvez facilement gérer tous les extraits de code personnalisés en utilisant l’extension et vous n’avez pas à vous soucier de perturber votre site.

Tout d’abord, vous devez installer et activer l’extension WPCode. Si vous avez besoin d’aide, veuillez consulter notre guide sur l ‘installation d’une extension WordPress.

Une fois activé, vous pouvez vous rendre sur  » Code Snippets  » + Add Snippet depuis votre Tableau de bord WordPress. De là, sélectionnez simplement l’option  » Ajouter votre code personnalisé (nouvel extrait) « .

Add new snippet

Vous pouvez ensuite saisir votre code personnalisé dans la zone de « Prévisualisation du code ».

N’oubliez pas de cliquer sur le menu déroulant « Type de code » et de sélectionner « PHP Sélectionné » comme type.

Enter your custom code

Une fois que vous avez terminé, vous pouvez défiler vers le bas et sélectionner la méthode d’insertion pour votre code.

WPCode utilisera l’option « Insertion automatique » par défaut et exécutera le code partout. Cependant, vous pouvez modifier l’emplacement et sélectionner d’exécuter le code à un endroit spécifique, comme l’en-tête, le pied de page, avant un paragraphe, et plus encore.

Il existe également une méthode par code court, dans laquelle vous pouvez saisir manuellement un code court pour exécuter le code.

Auto insert your code

Pour ce tutoriel, vous pouvez utiliser la méthode par défaut et insérer automatiquement le code partout.

Une fois que vous avez terminé, il vous suffit de cliquer sur le bouton en haut pour activer l’extrait, puis de cliquer sur le bouton « Enregistrer l’extrait ».

Ce code permet d’activer le support des images en avant pour les publications et les pages. Vous pouvez maintenant aller dans l’éditeur de blocs de l’article ou de la page, et vous verrez que l’option de l’image mise en avant est activée.

Cependant, lorsque vous définissez une image mise en avant, elle ne s’affichera pas automatiquement dans votre thème WordPress. Pour afficher les images en avant dans votre thème, vous devez modifier vos modèles et ajouter cette ligne de code à l’endroit où vous souhaitez afficher l’image en avant :

<?php the_post_thumbnail(); ?>

Les fichiers dans lesquels vous ajoutez le code ci-dessus varieront en fonction de votre thème. Vous voudrez ajouter le code à l’intérieur de la boucle de votre publication.

Similaire : Consultez l’aide-mémoire sur la hiérarchie des thèmes WordPress pour mieux comprendre le fonctionnement des thèmes.

Configurez la taille de vos images mises en avant

Le code ci-dessus est la fonction de base dont vous avez besoin pour ajouter le support des images mises en avant et afficher les images mises en avant dans votre thème. Pour définir la taille des images téléversées, vous devez ajouter cette ligne de code à votre fichier functions.php ou à votre extrait de code WPCode.

set_post_thumbnail_size( 50, 50);

Les paramètres de set_post_thumbnail_size sont dans ce ordre : largeur, hauteur.

Vous pouvez également définir des tailles d’image supplémentaires à utiliser avec la fonction_post_thumbnail(). Par exemple, vous pouvez définir des tailles d’image supplémentaires à utiliser avec la fonction

// Image size for single posts
add_image_size( 'single-post-thumbnail', 590, 180 );

Dans cet exemple, nous avons ajouté une nouvelle taille d’image appelée miniature unique de publication avec 590px de largeur et 180px de hauteur.

Pour utiliser cette taille d’image dans notre thème, nous devrons encore l’ajouter au fichier de thème approprié.

Pour en savoir plus, veuillez consulter notre guide sur l’ajout de tailles d’images supplémentaires dans WordPress pour plus de détails.

Si vous avez téléversé des images avant, mais qu’elles apparaissent toujours dans une autre taille, vous devez régénérer les miniatures et les tailles d’image pour les publications plus anciennes.

Vous trouverez ci-dessous un exemple de la fonctionnalité image mise en avant avec une taille d’image spécifique.

<?php the_post_thumbnail( 'single-post-thumbnail' ); ?>

Il s’agit d’une version simplifiée de la fonctionnalité complète. Il y a beaucoup d’autres choses que vous pouvez faire avec les images mises en avant.

FAQs sur les images mises en avant dans WordPress

En tant que débutant, vous pouvez rencontrer des questions ou des problèmes lors de l’utilisation des images mises en avant sur votre blog. Voici quelques-unes des questions les plus fréquemment posées sur les images mises en avant.

1. Pourquoi l’image mise en avant apparaît-elle deux fois dans mes publications ?

Parfois, les débutants ajoutent une image mise en avant, puis ajoutent la même image dans la partie contenu de l’éditeur de la publication.

Tout ce que vous avez à faire est de retirer l’image de la zone de contenu et d’utiliser uniquement la boîte méta de l’image mise en avant pour ajouter l’image mise en avant. Pour en savoir plus sur ce Sujet, consultez notre article sur comment corriger l’image mise en avant qui apparaît deux fois dans WordPress.

2. Quelle est la différence entre l’image mise en avant et l’image de couverture ?

Les images de couverture sont utilisées dans la zone de contenu de vos publications ou pages. Elles sont normalement utilisées pour séparer les différentes sections d’une longue page ou d’une publication.

L’image mise en avant est l’image représentative d’un article. Elle apparaît avant ou à côté du contenu, mais pas à l’intérieur de l’article proprement dit.

Pour en savoir plus sur ce Sujet, consultez notre guide sur la différence entre l’image de couverture et l’image mise en avant dans WordPress.

3. Comment afficher les images mises en avant à côté des publications suivantes du blog ?

L’éditeur de blocs de WordPress est livré avec un bloc « Derniers articles » qui vous permet d’afficher les publications récentes avec des miniatures de publications.

Vous pouvez également afficher les publications récentes avec des miniatures dans les widgets de la colonne latérale à l’aide du plugin Recent Posts Widget Extended. Pour plus de détails, consultez notre article sur l ‘affichage des publications récentes dans WordPress.

4. Comment rappeler aux auteurs/autrices d’ajouter des images mises en avant dans WordPress ?

Les images mises en avant sont affichées en bonne place sur votre page d’accueil, votre page de blog et d’autres pages d’archives.

Si vous ou un autre auteur/autrice de votre blog avez oublié d’en définir une et que vous avez publié l’article, celui-ci apparaîtra sans image mise en avant. Cela aura l’air mauvais et incohérent, ce qui n’est pas bon pour l’expérience utilisateur.

Vous pouvez installer et activer l’extension PublishPress Checklist, qui affichera une notification lorsque quelqu’un tentera de publier une publication sans image en avant.

Publish button disabled

Pour plus de détails, consultez notre article sur la façon d’exiger des images mises en avant dans WordPress.

5. Pourquoi mon image mise en avant ne s’affiche pas dans WordPress ?

Il y a plusieurs raisons pour lesquelles votre image mise en avant ne s’affiche pas sur votre site WordPress. Par exemple, vous essayez peut-être de téléverser un fichier image trop volumineux. Il se peut également qu’une extension ou un thème empêche l’image d’apparaître.

Pour résoudre ce problème, consultez notre guide sur la façon de corriger l’image mise en avant qui ne s’affiche pas dans WordPress.

Ressources supplémentaires pour l’optimisation des images mises en avant

Vous pouvez également consulter nos autres guides et tutoriels pour tirer le meilleur parti des images mises en avant sur votre site :

Nous espérons que cet article vous a aidé à apprendre comment ajouter des images mises en avant ou des miniatures de publication en WordPress. Vous pouvez également consulter notre guide du débutant sur le SEO image et nos choix d’experts pour les meilleures extensions de réseaux sociaux pour les sites WordPress.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

124 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    For if anyone want to add default featured image to blog post so that newly posted posts will be assigned that default images as thumbnail pending the time to use the actual image intending for the post.

    Hope you have a post on this ??

  3. Mrteesurez says

    Featured images are very important for blog posts, it bring a sense of visual appealing to the site.

    If one set WPcode to add featured image support but not specifying either footer or header and set to run through out entire site, will it not slowing or have any speed effect to the site.

    • WPBeginner Support says

      It should not affect your site’s speed you would need to edit your templates for the featured image to display as well.

      Administrateur

  4. Patricia says

    The thumbnail pictures are turning up bottom of the page with ‘Related Articles’ — just black boxes. What am i doing wrong or missing? We had them at one point but after the last WordPress upgrade, the pictures turned into black boxes.

    • WPBeginner Support says

      You would want to check with the support for the tool that you are using for your related posts, either your theme or a plugin as it sounds like it is not grabbing your featured images correctly.

      Administrateur

  5. E says

    How can I change the size of my featured image? It always so large on my blog post. I’ve looked to see in Settings>Media to change it as suggested but that does not show up.

    • WPBeginner Support says

      For changing the size of your featured image, you would want to reach out to the support for your specific theme and they should be able to assist.

      Administrateur

  6. Josh says

    Quick question, is it possible to add featured image support to a theme without WordPress generating extra thumbnail sizes?

    • WPBeginner Support says

      Yes, you would use the add_theme_support and the_post_thumbnail only from this article to do that. You may want to set a size for the featured images so they are all the same size.

      Administrateur

  7. Nwankwo ekene says

    My site is not showing featured image on Google search and when shared to WhatsApp
    What should I do to fix this

  8. R Taylor says

    How can I set the « recent blogs » on the right of screen so they stay in order by date? They keep moving around everytime I open blog. Thanks

    • WPBeginner Support says

      You would want to ensure your theme or a plugin isn’t modifying the order. By default, the recent posts widget would display by date

      Administrateur

  9. Neshadkhan says

    Hi wpbegginers i am following you from last 2 year please tell me how to add our post title on thumbnail image like a lot of blogs are doing that

    • WPBeginner Support says

      Depending on what you’re looking at, some of those are added using image editors such as GIMP or Photoshop

      Administrateur

    • WPBeginner Support says

      That would be determined by your theme, if you reach out to your theme’s support they may have a recommended method to remove the featured image in the post itself.

      Administrateur

  10. Nick Sim says

    great explanation! But I’m having issues adding the mutliple post thumbnails into a custom post type. How do you solve this?

  11. kar says

    Hi, my featured image overrides my main banner image. Everytime I set a featured image for a post, it overrides the main site’s banner image. How do I stop it from happening?

  12. Maj says

    Hi all, actually am using WordPress 4.9.1 to upload home page video from YouTube for our website, but after I uploaded the video and access the website from the laptop I noticed that the poster image that it supposed to be displayed only when access via Phone it’s appearing in the home page for 3 seconds and this causes the first 3 seconds of the uploaded video not to be seen then can watch the video.
    Please I need your help and suggestion to solve this issue. Thank you so much

  13. carlos ballin says

    i need 2 or 3 feature image, i install DFI plugin but does not work. Exist other proccess for todo that ?

  14. Joao Cerca says

    Hi,

    I have a problem with featured image. Everytime I upload a new picture for a profile, the picture does not turn into a thumbnail in the list of profiles. Is it a problem of the theme or the definition of the wordpress?

    Here you can check my problem
    Best Regards,

  15. Emily says

    MOST of the time when I share links to my posts on Facebook, the featured image appears as the thumbnail but sometimes it just doesn’t for no reason. I’m not doing anything fancy (or even differently) from week to week. What’s up?

    • Saransh Sagar says

      hey, it takes some times to load your post,page image or feature image and loading time may vary from different types of social media ! in linkedin it fetch very fast and it fb it takes some time !

  16. Nsereko Eriab says

    hi, i want to put 5 post excerpts on my homepage but i want the most new one (the first post) to have a bigger thumbnail image than the other 4. help, thx

  17. Liz Johnson says

    Hey Thanks for posting this! I’d just left you a question about it. My theme has a featured image option. Plus I found a setting in my general settings for the thumbnail, but it still isn’t showing up when I post on Twitter. Not sure if I need to go to the CSS coding option?!?? Thanks

  18. Amanda says

    Hello. I’ve been trying to find help with my blog, but I can’t seem to find the answers I’m looking for. I am using WordPress’ theme Hemingway, and I can’t figure out how to get the picture that is at the top of my post to show up in my home page next to the post summary. I’ve tried setting a featured image, but it still doesn’t show up on the home page, and when I do that it puts the image in the header when I go to the post. When I was looking at the Hemingway sample on the WordPress site it showed pictures next to posts in the homepage. I don’t understand why I can’t do that on my blog.

  19. Rul says

    i’m using zerif pro theme but now my portfolio featured image is not arranged correctly (2 rows x 4 columns) like how it supposed to be. any idea what causes this issue and how to fix it?

  20. Kim says

    Hi. I have the featured image turned on my blog. It was working just fine until today. With our latest blog post it isn’t displaying correctly on our homepage when viewed from a cell phone. All of the post below it on the homepage show up correctly, but I can’t figure out where I went wrong with this one. It shows with a huge gap in between some of the words. Any suggestions on how to fix this?

  21. Dennis says

    Hi,

    Any suggestions for plugins to generate post-thumbnails // featured images for Facebook videos? Already tried ‘Featured Video Plus’ but that one is not working for Facebook-videos

  22. Asen says

    I want my featured images to appear on my posts and for some reason they don’t appear when I click the particular category in my main menu.

    Let me explain this better- if you visit my site and if you click on “Action Heroes” in the menu tab, the posts appear with the excerpt but there are no images displayed. I want the title of the post to appear with the excerpt, as well as the associated featured image before the reader clicks on “”Continue reading. The same is for the News and Facts section.

    How can I change that and why the image don’t appear?

    • WPBeginner Support says

      Hi Asen,

      Most likely your WordPress theme does not display featured images correctly. Try switching to a default WordPress theme like Twenty Seventeen, if it displays your featured images then you can contact your theme developer for support.

      Administrateur

  23. pawan kumar mandawariya says

    Dear wpbeginner team,

    can you guide me how to display post images on homepage. I am unable to to this. At while, images are showing on the post/ articles, but not showing on the homepage. You can see this problem here

  24. hristiqn says

    Hello , I use WordPress witn Fashionistas theme intsalled, but I understand the featured image is not showing the full image uploaded. I would like to have the full image appear instead of the default theme sizing of the featured image. What settings I should do in the Admin panel ?
    Thanks in advance.
    And really I hope you can help me.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.