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 miniatures de publication dans WordPress

Les miniatures de publication sont de plus en plus populaires. De nombreux thèmes de magazines associent une image à une publication spécifique qu’ils affichent ultérieurement sur la page d’accueil ou sur la page de la publication. Nous affichons une miniature de nos publications à la fois sur la page des articles et sur la page des catégories. Dans les versions antérieures, cette fonctionnalité était obtenue par l’utilisation de la méthode des champs personnalisés, ce qui n’était pas très simple/simple d’utilisation. Ajouté aux nombreuses fonctionnalités de WordPress 2.9, cette fonction a été ajoutée au cœur de WordPress par les développeurs/développeuses du noyau.

Regardez simplement la vidéo ou lisez le tutoriel ci-dessous :)

Vidéo

Guide du débutant

Vous verrez une option comme celle-ci dans la colonne latérale de votre Tableau de bord WordPress.

Post Thumbnails in WordPress

Cliquez sur le lien, et vous serez amené à une page de téléversement d’image. Téléversez l’image, et vous verrez quelque chose comme ceci :

Post Thumbnails in WordPress

Cliquez sur le lien « Utiliser comme miniature ». Une fois que vous avez fait cela, vous verrez un écran comme celui-ci :

Post Thumbnails in WordPress

L’écran ci-dessus signifie que vous avez terminé. Cliquez simplement sur publier et l’image s’affichera sur votre site.

Guide développeurs/développeuses

Même si cette fonctionnalité est ajoutée au cœur, tous les utilisateurs ne verront pas cette option dans la colonne latérale de leur panneau de publication. Il s’agit d’une fonction qui peut être activée uniquement si le thème la supporte. Les thèmes gratuits plus anciens peuvent ne pas la supporter, vous devrez donc demander au développeur/développeuse de faire une mise à jour, ou vous pouvez le faire vous-même en suivant ce tutoriel.

Tout d’abord, vous devrez ouvrir votre fichier functions.php dans votre dossier thèmes et coller le code suivant :

add_theme_support( 'post-thumbnails' );

Ce code activera le support du thème à la fois pour les publications et les pages. Donc maintenant, vous serez en mesure de voir une option dans votre tableau de bord. Mais elle ne s’affichera pas dans vos thèmes car nous n’avons pas encore ajouté le code dans le thème.

Vous pouvez afficher la miniature n’importe où dans la boucle en utilisant ce code :

<?php the_post_thumbnail(); ?>

C’était la fonction de base, mais si vous voulez aller plus loin, comme spécifier la taille de la miniature de publication, il vous suffira d’ouvrir votre fichier functions.PHP et de coller le code comme ceci :

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 50, 50, true );

Les dimensions sont définies afin de commander : largeur x hauteur et ce sont des pixels.

Vous pouvez également ajouter des tailles d’image supplémentaires pour votre image mise en avant en ajoutant cette ligne :

add_image_size( 'single-post-thumbnail', 590, 180 ); // Permalink thumbnail size

Vous pouvez ultérieurement appeler les tailles de miniature spécifiques dans votre boucle de publication comme ceci :

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

Ceci est une version simplifiée de la fonctionnalité complète de cette fonction. Nous avons essayé de faire simple, pour que tout le monde puisse s’y abonner. En savoir plus sur cette fonctionnalité :

L’article de Mark Jaquith sur les miniatures de publication.
Le Codex de WordPress

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

79 commentairesLaisser une réponse

  1. Chrissy

    Is this necessary with Genesis Child Themes. They seem to have a featured image for their posts already. Thanks

  2. Divya

    Hi,

    In my theme there is no loop.php, then where i need to edit?

    Thanks in advance

  3. A. Suriel

    I tried the widget and it is working fine. Thanks for the tip.

  4. Kathleen Smitheram

    So… I tried this and I think I broke my site. I now get this error

    Parse error: syntax error, unexpected ‘ »‘ in /home/content/21/10729521/html/wp-content/themes/desk-mess-mirrored/functions.php on line 642

    and can’t get into my dashboard. I’m new to self-hosting and I have no idea how to fix this. HELP!

  5. Nik

    Great tutorial!

    Quick question:

    You said If you don’t see « use as thumbnail » you may have to go inside the PHP because the theme is an older theme.

    Where would I look in the new WordPress layout to see if « use as thumbnail » is featured in my theme?

    Here’s an image to help explain what I mean by « new WordPress layout ».

    http://thereselawlor303.files.wordpress.com/2012/12/newpost5.jpg?w=1024&h=621

    Hope that makes sense.

    Thanks!

    • Editorial Staff

      If you can see the featured image being shown next to your title on your site, then your theme has support for the thumbnails.

      Administrateur

  6. Drew

    Hi,

    Thanks for this post it totally helped me out!

    Question, now how would I also show the featured image (in a different size) within the actual post only (not in the loop)?

    Thanks :)

  7. Mimo

    Oops, my example above failed.

    e.g i mg src= »<?p hp the_p ost_thumbnail (); />

    • Mimo

      Ignore my comments. I figured out why you wouldnt want to wrap them in img and anchor tags :D.

      Thanks for the post

  8. canada goose jackets

    Keep writing, continue to inspire, to keep creating I like the idea and the website is fairly easy to use. I do wish that they would review more than the top 20 or so websites in the field. The web is a big place.

  9. canada goose jackets

    Keep writing, continue to inspire, to keep creating I like the idea and the website is fairly easy to use. I do wish that they would review more than the top 20 or so websites in the field. The web is a big place.

  10. mbtshoesmbts

    Thanks for posting this info. I just want to let you know that I just check out your site and I find it very interesting and informative. I can’t wait to read lots of your posts.

  11. Speeltjezoeken

    Thanks, this post helped me to get on the road again..

  12. lakkolmahendra

    Thank you very much for the wonderful information. It’s simple method to add thumnail in your homepage. I’ll try for my site today.

  13. LukeSwenson

    I’m working on WorPress Version 3.2.1. I noticed that the module in the admin reads « Featured Image » rather than « Post Thumbnail. »

    Also, I get the following error when I try to add an image in the admin:

    Warning: Cannot modify header information – headers already sent by (output started at /——–/—-/——/——-/wp-content/themes/html5/functions.php:58) in /Applications/MAMP/htdocs/justine/wp-admin/async-upload.php on line 2648

  14. SagivHaalush

    @wpbeginner Hey :) VERY(!) helpful post, However I got to the exact same problem after adding the 2 lines(at the bottom…). When I put them at the beginning, nothing happens…

    Can you please be more specific as for the placement in the loop(Which/where)? Thanks :)

  15. birdhammer

    Hi there, I just tried to enter the code above by following instructions in the video, but when I updated it I got a parse error. I cannot even log into my dashboard. I feel like an idiot!

    I use wordpress with modularity lite theme and my site is birdhammer.com.

    Can you please help me?

  16. wpbeginner

    The placement of the code in your functions.php file is probably causing the errors. Are you using a theme framework? Are you adding it way at the bottom??

  17. CaseyDennison

    mines not working at all i keep gettin errors in the php and it is written up correctly. i dunno is screwed it keeps showing the functions code at the very top of my wp dashboard ??? thats weired

  18. davede

    @wpbeginner Ah thanks, I resolved the problem. details here: (well seems i can’t paste a url in). that sucks.

  19. wpbeginner

    @davede You would need to add the thumbnail code in your single.php file as well.

  20. davede

    Good stuff.Thank you.

    I’m having a hard time having the thumbnail appear only in the excerpt not on the post page.

    any ideas?

  21. kevin.m.kwok

    @wpbeginner Worked Perfectly thank you so much!

  22. wpbeginner

    @kevin.m.kwok Yes, this sounds like a CSS issue. Your image css class needs to have float: left property.

  23. kevin.m.kwok

    Hello, great tutorial. Everything works, except I can’t get the thumbnail to post « left » of my post on my homepage. It always goes on top of my post, even if I select left in the thumbnail options. Any Ideas?

  24. Peter Wolff

    Hi WP Beginner.

    Great WP tutorial above from the Editorial Staff!

    I have a quick WP thunmbnail gallery page photo question. I’ve been trying to add some simple Custom Field php code to my Catefory.php template in order to add a small text caption title below each thumnail image. Very frustrated…anyway, I have attached below the Category.php thumbnail loop and was wondering if you can help me write the a Custom Field php code (field called « thumb_tag ») within this loop. Here’s the code:

    ID, ‘main_image’, true); ?>

    <a href=" » ><img src="/resize.php?w=162&h=105&file= » alt= » » title= » » width=’162′ height=’105′ />

    Thank you very much!

    Pete

  25. Ankit

    Thanks for awesome tutorial .it’s the simplest and unique method to add thumnail in your homepage.It works on my site.

  26. shivam

    i am new to wordpress,not knowing too much programming..i liked ur article.but can u tell me exact at which position we have to place this code..like fuctions.php is a file,which we have to edit,at what place we have to add that code,is there any demo for that?

    • Editorial Staff

      Different themes have different codes in the functions file. You need to add this code within the php tag.

      Administrateur

      • James

        Thanks, I think I’ve gotten it to work. However, when adding a thumbnail, it is now automatically added to the top of my post, even though the post already has an image.

  27. mark

    Great tutorial – However, and I cant find this information anywhere – BUT, I want to add the thumbnail to the post-editor screen so that my writers can see what it would look like inline with the post before they publish. Where could I do that? Thanks in advance.

    • Editorial Staff

      You see the thumbnail once you upload it, however there is no live preview on the admin screen. Your author can simply click Preview and see the post in the new tab <<

      Administrateur

  28. elizabeth

    Hi
    Thank you for the info. i followed the steps in my theme, however my pictures still do not show in the image box…they look like broken files on my Home page. When I click on them, then they appear. How can i make them visible on the home page? Thanks

    • Editorial Staff

      As long as the_post_thumbnail(); is inside the loop on the homepage, it should work fine.

      Administrateur

  29. jam

    thanks for your help ! i hate plugin so i rather like using template funtion !

  30. janine

    Thanks for the great post – specifically about add_theme_support( ‘post-thumbnails’ ); – It worked great with the wootheme I am modifying

  31. saBEE

    Thank you for the great information.

    Each of my posts has a photo. I am trying to get each post’s photo to show up as a thumbnail in the RSS feed. Will the above method work to do this?

  32. Bernard

    I’ve gone through the steps in this tut, but for some reason I get the following error whenever I try to select an image from the gallery option:

    Fatal error: Call to undefined function: get_post_thumbnail_id() in /wp-admin/includes/media.php on line 1292

    Can anyone help me in sorting this out?

    thanks
    Bernard

  33. darren

    is this actually cropping the image on upload? Or does it just display it at the appropriate height and width when it calls it on the page? I ask b/c we pull our feed from our blog onto a non wp site and link back to it but would like to be able to reference the thumbnails. It is a asp site so I don’t have the luxury of php’s native image manipulation

  34. Zara

    Thankyou gyus you’re inredible!
    Iloveyou <3

  35. Helen

    Hello
    We have this code in theme functions (it came with theme skin) the theme has a image slider that uses the ‘post thumbnail’ function. yet it doest show in admin so we cant get slider to work;

    <?php

    help : ) thank you

    • Editorial Staff

      Helen,

      We do not see the php code. Can you please encode your PHP code before pasting it in the comments? Or you can send us an email using our contact form.

      Administrateur

  36. Ami

    works great!! just one query.. how can i add a link or wrap a link around

    so that when someone click the link a lightbox opens with the original size.

    Just to clarify.

    At the moment in functions.php I have

    add_image_size(‘my-custom-image’, 640,9999); so the image in the post is 640 in width, this will then be linked to the original image which is say 1000px by 500px.

    I did find this: http://polymathworkshop.com/shoptalk/2010/03/19/get-the_post_thumbnail-direct-path-for-wordpress/ which works to a degree but opens the thumbnail in the lightbox.

    • Editorial Staff

      The only way to get it to work is to link to the original attachment of the thumbnail..

      Administrateur

  37. Eduardo Antunes

    Cool!

    To remember:

    > add in functions.php

    add_theme_support(‘post-thumbnails’);
    set_post_thumbnail_size(70, 70, true);

    > add in the loop:

    php the_post_thumbnail();

  38. Ricky@twitter apps

    Weel I was looking for the same thing. I have a quick question for ya. Is there any way to have default image of the category to show as a thumbnails? Or is there anyway to fetch first image of the post and use it as thumbnail as related post.
    I implemented the above technique on my blog but the major problem is my all the posts doesn’t have thumbnail enabled. Which makes the situation horrible as I have to update all the post with thumbnail.
    Is there anyway to use first image as default thumbnail using above technique?

    • Editorial Staff

      Yes you can fetch the first image of the post by using Justin Tadlock’s Get Image Plugin. You can also add a if then variable by checking for is_post_thumbnail.

      Administrateur

  39. Jal

    Editors,

    Do you use the wordpress’s post editor or some offline blog publishing software? I use Live Writer which has some decent options but sometimes I think of a switch-over to Wp’s post editor. Can you share some views on this please?

    Thank you

  40. Antonio

    Wow thanks I’ve always wondered how to do this but never really had the patience to look for a solution. I didn’t know it was this simple. WOOOOT! Thanks. :)

  41. Bob

    How do you add lightbox or thickbox (example rel= »lightbox » or class « thickbox ») to the thumbnail?

    • Editorial Staff

      You have to use jQuery and add the class to the thumbnail. To add the class you would add : array(‘class’ => ‘lightbox’)

      Administrateur

  42. Trisha

    Any idea if this works for Page thumbnails? I’m trying to list child pages using this code. (the 2nd one, in ‘post format’. Switched out all instances of ‘content’ with ‘excerpt’ and used Andrew Oz’s Excerpt Editor which is seriously cool.

    When I try to plug in the code for the thumbnail, it doesnt show.

    Any idea what I might be doing wrong?

    • Editorial Staff

      This code only works inside the loop. If you want to display it outside the loop then you would have to run a global wp_query function.

      Administrateur

  43. Jeremy

    How can I get the thumb from outside of the loop?

  44. Cosmin

    Guys, does this only work with square images?

    As in 50px by 50px?

    I heard someone mention it only takes the height value when specifying dimensions…
    (so 50px by 30px wouldn’t work)

    • Editorial Staff

      It will work with any size. Sometimes the image quality will be lost if it is not the right ratio. We have it working on a client’s website and it works perfectly fine.

      Administrateur

  45. Luke

    I’m a beginner and love what you’re doing. Would be nice to get very specific instructions for stuff like this. When I copy/paste to functions it doesn’t work.

    Thoughts on what I could be doing wrong? Maybe a functions for beginners post?

    Thank you and keep up the great work.

    • Editorial Staff

      Are you using WordPress 2.9? If so then there is no way that it would not work. This is probably the best break down of this code.

      While we try to make everything as clear as possible, sometimes it requires prior knowledge to complete some tasks.

      If you want one of our staff to take a look and do this for you we can do it for a small fee.

      Administrateur

  46. Chris Peterson

    Great hints! You’ve clearly explained each and every steps installing post thumbnails.

  47. Cosmin

    Sweeeeeet!

    Thanks guys, perfect timing, as I’m working on a WordPress theme for a client and it requires just this!

    Now it will be sooo easy for the less-tech-savvy person that’ll write posts :)

    • Editorial Staff

      Why is that? Plugins slow your site down, and It is probably the easiest way to do this.

      Administrateur

      • jeprie

        very nice articles never know you can do this in wordpress.

        so, how slow can plugins do to our wp site? is it significant?

        • Editorial Staff

          The more database query your site make, the slower it loads and each plugin adds on to the queries.

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.