Les miniatures d'articles deviennent de plus en plus populaires chaque jour. De nombreux thèmes de magazines associent une image à un article spécifique qu'ils affichent ensuite sur la page d'accueil ou sur la page de l'article. Nous affichons une miniature avec nos articles sur la page de l'article et la page de catégorie. Dans les anciennes versions, cette fonctionnalité était obtenue à l'aide de la méthode des champs personnalisés, qui n'était pas très conviviale. Grâce aux développeurs principaux de WordPress, ainsi qu'à de nombreuses fonctionnalités notables dans WordPress 2.9, cette fonction a également été ajoutée au cœur du système.
Simply watch the video or read the tutorial below 
Vidéo
Guide pour débutants
Vous verrez une option comme celle-ci dans la barre latérale de votre panneau d'écriture d'articles dans le tableau de bord WordPress.
Cliquez sur le lien, et vous serez dirigé vers une page de téléchargement d'images. Téléchargez l'image, et vous verrez quelque chose comme ceci :
Cliquez simplement sur le lien qui dit « l'utiliser comme miniature ». Une fois que vous avez fait cela, vous verrez un écran comme celui-ci :
L'écran ci-dessus signifie que vous avez terminé. Cliquez simplement sur publier et l'image s'affichera sur votre site.
Guide du développeur
Bien que cette fonctionnalité soit ajoutée au cœur du système, tous les utilisateurs ne verront pas cette option dans la barre latérale de leur panneau d'écriture d'articles. C'est l'une de ces fonctions qui ne peuvent être activées que si le thème les prend en charge. Les anciens thèmes gratuits pourraient ne pas la prendre en charge, vous devrez donc demander au développeur de la mettre à jour, ou vous pouvez le faire vous-même en suivant ce tutoriel.
Vous devrez d'abord ouvrir votre fichier functions.php dans votre dossier de thèmes et coller le code suivant :
add_theme_support( 'post-thumbnails' );
Ce code activera la prise en charge des thèmes pour les articles et les pages. Vous verrez donc maintenant 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 au 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 l'article, vous devrez simplement ouvrir votre fichier functions.php et coller le code comme ceci :
add_theme_support( 'post-thumbnails' ); set_post_thumbnail_size( 50, 50, true );
Les dimensions sont définies dans cet ordre : 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 ensuite appeler les tailles de miniatures spécifiques dans la boucle de votre article comme ceci :
<?php the_post_thumbnail('single-post-thumbnail'); ?>
Ceci est une version simplifiée de la fonctionnalité complète de cette option. Nous avons essayé de la garder simple, pour que tout le monde puisse la suivre. Si vous souhaitez plus d'informations sur cette fonctionnalité, consultez :
Article de Mark Jaquith sur les miniatures de publication
Codex WordPress
Chrissy
Est-ce nécessaire avec les thèmes enfants Genesis ? Ils semblent déjà avoir une image mise en avant pour leurs articles. Merci
Personnel éditorial
Non, ce n'est pas nécessaire avec les thèmes Genesis.
Admin
Divya
Bonjour,
Dans mon thème, il n'y a pas de loop.php, alors où dois-je modifier ?
Merci d'avance
Personnel éditorial
La boucle peut se trouver dans votre index.php, single.php, archive.php et d'autres fichiers.
Admin
A. Suriel
J'ai essayé le widget et il fonctionne bien. Merci pour le tuyau.
Kathleen Smitheram
Alors… j'ai essayé ça et je pense que j'ai cassé mon site. J'ai maintenant cette erreur
Parse error: syntax error, unexpected ‘”‘ in /home/content/21/10729521/html/wp-content/themes/desk-mess-mirrored/functions.php on line 642
et je ne peux pas accéder à mon tableau de bord. Je suis nouveau dans l'auto-hébergement et je n'ai aucune idée de comment réparer ça. AU SECOURS !
Personnel éditorial
Veuillez lire cet article :
https://www.wpbeginner.com/beginners-guide/beginners-guide-to-pasting-snippets-from-the-web-into-wordpress/
Nous pensons que vous avez fait une erreur en copiant le code correctement.
Admin
Nik
Super tutoriel !
Petite question :
Vous avez dit que si vous ne voyez pas « utiliser comme miniature », vous devrez peut-être aller dans le PHP car le thème est un ancien thème.
Où devrais-je regarder dans la nouvelle disposition de WordPress pour voir si « utiliser comme miniature » est présent dans mon thème ?
Voici une image pour aider à expliquer ce que je veux dire par « nouvelle disposition de WordPress ».
http://thereselawlor303.files.wordpress.com/2012/12/newpost5.jpg?w=1024&h=621
J'espère que c'est clair.
Merci !
Personnel éditorial
Si vous pouvez voir l'image mise en avant à côté de votre titre sur votre site, alors votre thème prend en charge les miniatures.
Admin
Nik
Compris. Merci !
Drew
Bonjour,
Merci pour ce post, ça m'a vraiment aidé !
Question, comment puis-je aussi afficher l'image mise en avant (dans une taille différente) à l'intérieur de l'article lui-même (pas dans la boucle) ?
Thanks
Personnel éditorial
Vous pouvez simplement utiliser le bouton d'insertion d'article sur l'image.
Admin
Mimo
Oups, mon exemple ci-dessus a échoué.
par ex. i mg src=”<?p hp the_p ost_thumbnail (); />
Mimo
Ignorez mes commentaires. J'ai compris pourquoi vous ne voudriez pas les envelopper dans des balises img et anchor :D.
Merci pour le post
doudounes canada goose
Continuez à écrire, continuez à inspirer, à créer. J'aime l'idée et le site est assez facile à utiliser. J'aimerais qu'ils examinent plus de 20 sites web du secteur. Le web est un vaste endroit.
doudounes canada goose
Continuez à écrire, continuez à inspirer, à créer. J'aime l'idée et le site est assez facile à utiliser. J'aimerais qu'ils examinent plus de 20 sites web du secteur. Le web est un vaste endroit.
mbtshoesmbts
Merci pour ce post. Je voulais juste vous faire savoir que je viens de consulter votre site et je le trouve très intéressant et instructif. J'ai hâte de lire beaucoup de vos articles.
Speeltjezoeken
Merci, ce post m'a aidé à reprendre la route..
lakkolmahendra
Merci beaucoup pour ces merveilleuses informations. C'est une méthode simple pour ajouter une miniature sur votre page d'accueil. Je vais essayer pour mon site aujourd'hui.
LukeSwenson
Je travaille sur WordPress version 3.2.1. J'ai remarqué que le module dans l'administration indique "Image mise en avant" plutôt que "Miniature de l'article".
De plus, j'obtiens l'erreur suivante lorsque j'essaie d'ajouter une image dans l'administration :
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
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
birdhammer
Bonjour, j'ai essayé d'entrer le code ci-dessus en suivant les instructions de la vidéo, mais lorsque j'ai mis à jour, j'ai eu une erreur d'analyse. Je ne peux même pas me connecter à mon tableau de bord. Je me sens idiot !
J'utilise WordPress avec le thème modularity lite et mon site est birdhammer.com.
Pouvez-vous m'aider s'il vous plaît ?
wpbeginner
L'emplacement du code dans votre fichier functions.php est probablement la cause des erreurs. Utilisez-vous un framework de thème ? L'ajoutez-vous tout en bas ??
Casey Dennison
mes mines ne fonctionnent pas du tout, j'ai des erreurs en PHP et c'est écrit correctement. Je ne sais pas ce qui est cassé, ça continue d'afficher le code des fonctions tout en haut de mon tableau de bord WP ??? c'est bizarre
davede
@wpbeginner Ah merci, j'ai résolu le problème. détails ici : (bon, il semble que je ne puisse pas coller d'URL). C'est nul.
wpbeginner
@davede Vous devrez ajouter le code de la miniature dans votre fichier single.php également.
davede
Bon travail. Merci.
J'ai du mal à faire apparaître la miniature uniquement dans l'extrait, pas sur la page de l'article.
des idées ?
kevin.m.kwok
@wpbeginner Ça a parfaitement fonctionné, merci beaucoup !
wpbeginner
@kevin.m.kwok Oui, cela ressemble à un problème de CSS. Votre classe CSS d'image doit avoir la propriété float: left.
kevin.m.kwok
Bonjour, excellent tutoriel. Tout fonctionne, sauf que je n'arrive pas à faire en sorte que la miniature soit à gauche de mon article sur ma page d'accueil. Elle apparaît toujours en haut de mon article, même si je sélectionne gauche dans les options de miniature. Des idées ?
kevin.m.kwok
Bonjour,
Peter Wolff
Salut WP Beginner.
Excellent tutoriel WP ci-dessus par l'équipe éditoriale !
J'ai une petite question concernant la galerie de miniatures WP et les photos. J'ai essayé d'ajouter un simple code PHP de champ personnalisé à mon modèle Category.php afin d'ajouter un petit titre de légende texte sous chaque image miniature. Très frustré... bref, j'ai joint ci-dessous la boucle de miniatures de Category.php et je me demandais si vous pouviez m'aider à écrire le code PHP de champ personnalisé (champ appelé "thumb_tag") dans cette boucle. Voici le code :
ID, ‘main_image’, true); ?>
<a href="” ><img src="/resize.php?w=162&h=105&file=” alt=”” title=”” width='162' height='105' />
Merci beaucoup !
Pete
Personnel éditorial
Pourquoi utiliser un champ personnalisé pour cela ? WordPress a cela intégré par défaut.
https://www.wpbeginner.com/wp-tutorials/how-to-display-wordpress-post-thumbnails-with-captions/
Admin
Ankit
Merci pour ce super tutoriel. C'est la méthode la plus simple et unique pour ajouter une miniature sur votre page d'accueil. Ça fonctionne sur mon site.
shivam
Je suis nouveau sur WordPress, je ne connais pas trop la programmation... J'ai aimé votre article. Mais pouvez-vous me dire exactement à quelle position nous devons placer ce code... comme functions.php est un fichier, lequel devons-nous modifier, à quel endroit devons-nous ajouter ce code, y a-t-il une démo pour cela ?
Personnel éditorial
Différents thèmes ont des codes différents dans le fichier functions. Vous devez ajouter ce code à l'intérieur de la balise php.
Admin
James
Merci, je pense que j'ai réussi. Cependant, lors de l'ajout d'une miniature, elle est maintenant automatiquement ajoutée en haut de mon article, même si l'article a déjà une image.
mark
Super tutoriel – Cependant, et je ne trouve cette information nulle part – MAIS, je veux ajouter la miniature à l'écran de l'éditeur d'articles pour que mes rédacteurs puissent voir à quoi cela ressemblerait en ligne avec l'article avant de le publier. Où pourrais-je faire cela ? Merci d'avance.
Personnel éditorial
Vous voyez la miniature une fois que vous l'avez téléchargée, cependant il n'y a pas d'aperçu en direct sur l'écran d'administration. Votre auteur peut simplement cliquer sur Aperçu et voir l'article dans le nouvel onglet <<
Admin
elizabeth
Bonjour
Merci pour l'info. J'ai suivi les étapes dans mon thème, cependant mes images ne s'affichent toujours pas dans la boîte d'images... elles ressemblent à des fichiers corrompus sur ma page d'accueil. Lorsque je clique dessus, elles apparaissent. Comment puis-je les rendre visibles sur la page d'accueil ? Merci
Personnel éditorial
Tant que the_post_thumbnail(); est à l'intérieur de la boucle sur la page d'accueil, cela devrait fonctionner correctement.
Admin
jam
merci pour votre aide ! je déteste les plugins donc je préfère utiliser la fonction du template !
janine
Merci pour ce super article – spécifiquement concernant add_theme_support( ‘post-thumbnails’ ); – Cela a très bien fonctionné avec le wootheme que je modifie
saBEE
Merci pour cette excellente information.
Chacun de mes articles a une photo. J'essaie de faire en sorte que la photo de chaque article apparaisse en miniature dans le flux RSS. La méthode ci-dessus fonctionnera-t-elle pour cela ?
Personnel éditorial
Non, vous devrez utiliser cette méthode en conjonction avec cette méthode :
https://www.wpbeginner.com/wp-tutorials/how-to-add-post-thumbnail-to-your-wordpress-rss-feeds/
Admin
sabee
Merci pour votre réponse rapide.
Je suis un peu confus car le thème que j'utilise, AutoFocus+, nécessite également le thème Thematic. Quel fichier functions.php doit être modifié ? Ou les deux doivent-ils être modifiés ?
Je me demande aussi où mettre le code ?
Bernard
J'ai suivi les étapes de ce tutoriel, mais pour une raison quelconque, j'obtiens l'erreur suivante chaque fois que j'essaie de sélectionner une image dans l'option galerie :
Erreur fatale : appel à une fonction indéfinie : get_post_thumbnail_id() dans /wp-admin/includes/media.php à la ligne 1292
Quelqu'un peut-il m'aider à résoudre ce problème ?
Merci
Bernard
darren
Est-ce que cela rogne réellement l'image lors du téléchargement ? Ou affiche-t-il simplement la hauteur et la largeur appropriées lorsqu'il l'appelle sur la page ? Je demande car nous extrayons notre flux de notre blog vers un site non WP et y renvoyons, mais nous aimerions pouvoir référencer les miniatures. C'est un site ASP donc je n'ai pas le luxe de la manipulation d'images native de PHP
Personnel éditorial
Il redimensionne l'image, il ne la rogne pas.
Admin
Zara
Merci les gars, vous êtes incroyables !
Je vous aime <3
Helen
Bonjour
Nous avons ce code dans les fonctions du thème (il est venu avec le skin du thème) le thème a un curseur d'images qui utilise la fonction 'post thumbnail'. pourtant, il ne s'affiche pas dans l'administration, nous ne pouvons donc pas faire fonctionner le curseur ;
<?php
aide : ) merci
Personnel éditorial
Helen,
Nous ne voyons pas le code PHP. Pouvez-vous s'il vous plaît encoder votre code PHP avant de le coller dans les commentaires ? Ou vous pouvez nous envoyer un e-mail en utilisant notre formulaire de contact.
Admin
Ami
ça marche super !! juste une question.. comment puis-je ajouter un lien ou envelopper un lien autour
pour que lorsque quelqu'un clique sur le lien, une lightbox s'ouvre avec la taille d'origine.
Juste pour clarifier.
Pour le moment, dans functions.php, j'ai
add_image_size(‘my-custom-image’, 640,9999); donc l'image dans le post fait 640 de largeur, elle sera ensuite liée à l'image d'origine qui fait disons 1000px par 500px.
J'ai trouvé ceci : http://polymathworkshop.com/shoptalk/2010/03/19/get-the_post_thumbnail-direct-path-for-wordpress/ qui fonctionne dans une certaine mesure mais ouvre la miniature dans la lightbox.
Personnel éditorial
La seule façon d'y parvenir est de lier à la pièce jointe d'origine de la miniature.
Admin
Eduardo Antunes
Cool !
À retenir :
> ajouter dans functions.php
add_theme_support(‘post-thumbnails’); set_post_thumbnail_size(70, 70, true);
> ajouter dans la boucle :
php the_post_thumbnail();
Ricky@twitter apps
Eh bien, je cherchais la même chose. J'ai une question rapide pour toi. Y a-t-il un moyen d'avoir une image par défaut de la catégorie qui s'affiche comme miniatures ? Ou y a-t-il un moyen de récupérer la première image de l'article et de l'utiliser comme miniature pour les articles similaires. J'ai implémenté la technique ci-dessus sur mon blog, mais le problème majeur est que tous mes articles n'ont pas de miniature activée. Ce qui rend la situation horrible car je dois mettre à jour tous les articles avec une miniature. Y a-t-il un moyen d'utiliser la première image comme miniature par défaut en utilisant la technique ci-dessus ?
Personnel éditorial
Oui, vous pouvez récupérer la première image de l'article en utilisant le plugin Get Image de Justin Tadlock. Vous pouvez également ajouter une variable if then en vérifiant is_post_thumbnail.
Admin
Jal
Éditeurs,
Utilisez-vous l'éditeur d'articles de WordPress ou un logiciel de publication de blog hors ligne ? J'utilise Live Writer qui a des options décentes, mais parfois je pense à passer à l'éditeur d'articles de WP. Pouvez-vous partager quelques points de vue à ce sujet s'il vous plaît ?
Merci
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.
Bob
Comment ajouter une lightbox ou une thickbox (exemple rel="lightbox" ou class="thickbox") à la miniature ?
Personnel éditorial
Vous devez utiliser jQuery et ajouter la classe à la miniature. Pour ajouter la classe, vous ajouteriez : array(‘class’ => ‘lightbox’)
Admin
Trisha
Avez-vous une idée si cela fonctionne pour les miniatures de page ? J'essaie de lister les pages enfants en utilisant ce code. (le 2ème, dans 'post format'. J'ai remplacé toutes les occurrences de 'content' par 'excerpt' et utilisé Excerpt Editor d'Andrew Oz, qui est vraiment génial.
Quand j'essaie d'intégrer le code pour la miniature, il ne s'affiche pas.
Avez-vous une idée de ce que je pourrais faire de mal ?
Personnel éditorial
Ce code ne fonctionne qu'à l'intérieur de la boucle. Si vous souhaitez l'afficher en dehors de la boucle, vous devrez exécuter une fonction wp_query globale.
Admin
noonoob
Merci beaucoup, ça marche. parfait
Jeremy
Comment puis-je obtenir la miniature en dehors de la boucle ?
Personnel éditorial
Nous écrirons bientôt un autre article expliquant cela. Merci pour la suggestion. Si vous souhaitez vraiment commencer à y travailler, vous utiliserez la fonction query_post.
Admin
Chad
J'attends avec impatience votre article sur l'affichage des images de publication en dehors de la boucle. Je n'ai pas encore trouvé d'exemple fonctionnel utilisant WP 3.0
Personnel éditorial
Cela fonctionnerait de la même manière que ceci :
https://www.wpbeginner.com/wp-themes/how-to-display-custom-fields-outside-the-loop-in-wordpress/
Walt Ribeiro
C'est similaire à ce tutoriel qui n'est pas un exemple exact. Alors, avez-vous publié votre propre tutoriel pour les miniatures ? J'adorerais savoir comment !
Cosmin
Les gars, cela ne fonctionne-t-il qu'avec des images carrées ?
Comme 50px par 50px ?
J'ai entendu quelqu'un mentionner que cela ne prend que la valeur de hauteur lors de la spécification des dimensions...
(donc 50px par 30px ne fonctionnerait pas)
Personnel éditorial
Cela fonctionnera avec n'importe quelle taille. Parfois, la qualité de l'image sera perdue si le ratio n'est pas correct. Nous l'avons fait fonctionner sur le site Web d'un client et cela fonctionne parfaitement.
Admin
Luke
Je suis débutant et j'adore ce que vous faites. Ce serait bien d'avoir des instructions très spécifiques pour ce genre de choses. Quand je copie/colle dans les fonctions, ça ne marche pas.
Des idées sur ce que je pourrais faire de mal ? Peut-être un article sur les fonctions pour débutants ?
Merci et continuez votre excellent travail.
Personnel éditorial
Utilisez-vous WordPress 2.9 ? Si c'est le cas, il n'y a aucun moyen que cela ne fonctionne pas. C'est probablement la meilleure explication de ce code.
Bien que nous essayions de rendre tout aussi clair que possible, cela nécessite parfois des connaissances préalables pour accomplir certaines tâches.
Si vous souhaitez que l'un de nos employés examine cela et le fasse pour vous, nous pouvons le faire moyennant des frais minimes.
Admin
Chris Peterson
Super conseils ! Vous avez clairement expliqué chaque étape de l'installation des miniatures de publication.
Cosmin
Géniaaaal !
Merci les gars, timing parfait, car je travaille sur un thème WordPress pour un client et il a besoin de ça !
Now it will be sooo easy for the less-tech-savvy person that’ll write posts
Nimit kashyap
Je préférerais utiliser un plugin pour cela.
Personnel éditorial
Pourquoi cela ? Les plugins ralentissent votre site, et c'est probablement la façon la plus simple de faire cela.
Admin
jeprie
Très bons articles, je ne savais pas qu'on pouvait faire ça dans WordPress.
Alors, à quel point les plugins peuvent-ils ralentir notre site WP ? Est-ce significatif ?
Personnel éditorial
Plus votre site effectue de requêtes à la base de données, plus il se charge lentement, et chaque plugin ajoute des requêtes.