{"id":2792,"date":"2024-02-02T21:20:23","date_gmt":"2024-02-02T21:20:23","guid":{"rendered":"https:\/\/wpconsults.com\/?p=2792"},"modified":"2024-02-02T15:20:23","modified_gmt":"2024-02-02T21:20:23","slug":"comment-modifier-la-taille-de-limage-vedette-dans-wordpress","status":"publish","type":"post","link":"https:\/\/www.wpconsults.com\/fr\/how-to-change-featured-image-size-in-wordpress\/","title":{"rendered":"Comment modifier la taille de l'image mise en avant dans WordPress"},"content":{"rendered":"<p class=\"wp-block-paragraph\">Modifier la taille de l'image mise en avant dans WordPress pose souvent probl\u00e8me aux utilisateurs, car l'endroit o\u00f9 l'on s'attendrait naturellement \u00e0 trouver ce param\u00e8tre (Param\u00e8tres, puis M\u00e9dias) ne permet en r\u00e9alit\u00e9 pas de contr\u00f4ler cette image. La taille de l'image mise en avant est d\u00e9finie par votre th\u00e8me ; pour la modifier r\u00e9ellement, il faut donc enregistrer une nouvelle taille dans le code, puis indiquer \u00e0 votre th\u00e8me de l'utiliser.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Je vais vous expliquer comment proc\u00e9der correctement avec <code>add_image_size()<\/code>, alors qu'un plugin serait la solution la plus simple, et l'\u00e9tape que presque tout le monde oublie : r\u00e9g\u00e9n\u00e9rer les vignettes pour que vos images existantes soient bien mises \u00e0 jour.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-takeaways is-layout-flow wp-block-group-is-layout-flow\">\n<h3 class=\"wp-block-heading\">Principaux enseignements<\/h3>\n<ul class=\"wp-block-list\"><li><strong>La rubrique \u00ab Param\u00e8tres &gt; M\u00e9dias \u00bb ne modifie pas l'image mise en avant<\/strong>; il ne g\u00e8re que les tailles \u00ab vignette \u00bb, \u00ab moyenne \u00bb et \u00ab grande \u00bb.<\/li><li><strong>Enregistrer une taille personnalis\u00e9e avec <code>add_image_size()<\/code><\/strong> dans le fichier functions.php de votre th\u00e8me, puis affichez-le avec <code>the_post_thumbnail()<\/code>.<\/li><li>Le <strong>param\u00e8tre de recadrage<\/strong> d\u00e9cide de tout : <code>vrai<\/code> d\u00e9couper les mat\u00e9riaux rigides aux dimensions exactes, <code>faux<\/code> conserve le rapport d'origine.<\/li><li><strong>Recr\u00e9er les vignettes apr\u00e8s toute modification<\/strong>, ou seules les images r\u00e9cemment mises en ligne utiliseront la nouvelle taille.<\/li><li>Dans un th\u00e8me de type \u00ab bloc \u00bb (\u00e9dition sur l'ensemble du site), il n'y a pas de fichier single.php ; vous d\u00e9finissez plut\u00f4t la taille de l'image mise en avant dans le mod\u00e8le de l'\u00e9diteur de site.<\/li><li>Si vous pr\u00e9f\u00e9rez ne pas toucher au code, un plugin peut enregistrer et appliquer les tailles \u00e0 votre place.<\/li><\/ul>\n<\/div>\n\n\n<style>.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap{padding-top:var(--global-kb-spacing-sm, 1.5rem);padding-right:var(--global-kb-spacing-sm, 1.5rem);padding-bottom:var(--global-kb-spacing-sm, 1.5rem);padding-left:var(--global-kb-spacing-sm, 1.5rem);border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);border-top-left-radius:5px;border-top-right-radius:5px;border-bottom-right-radius:5px;border-bottom-left-radius:5px;box-shadow:15px 15px 0px 0px rgba(160, 152, 255, 0.31);}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-contents-title-wrap{padding-top:0px;padding-right:0px;padding-bottom:0px;padding-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-contents-title{font-weight:600;font-style:normal;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list{color:var(--global-palette4, #2D3748);font-weight:regular;font-style:normal;margin-top:var(--global-kb-spacing-sm, 1.5rem);margin-right:0px;margin-bottom:0px;margin-left:0px;}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list .kb-table-of-contents__entry:hover{color:var(--global-palette1, #3182CE);}.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap .kb-table-of-content-list .active > .kb-table-of-contents__entry{color:var(--global-palette1, #3182CE);}@media all and (max-width: 1024px){.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}@media all and (max-width: 767px){.kb-table-of-content-nav.kb-table-of-content-id3268_6ddb5a-74 .kb-table-of-content-wrap{border-top:1px solid var(--global-palette10, #3182CE);border-right:1px solid var(--global-palette10, #3182CE);border-bottom:1px solid var(--global-palette10, #3182CE);border-left:1px solid var(--global-palette10, #3182CE);}}<\/style>\n\n\n<h2 class=\"wp-block-heading\">Tout d'abord, il faut savoir ce que chaque param\u00e8tre contr\u00f4le r\u00e9ellement<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si cela peut pr\u00eater \u00e0 confusion, c\u2019est parce qu\u2019il existe deux notions diff\u00e9rentes appel\u00e9es \u201c taille d\u2019image \u201d dans WordPress. La rubrique Param\u00e8tres, puis M\u00e9dias, permet de g\u00e9rer les trois tailles par d\u00e9faut g\u00e9n\u00e9r\u00e9es par WordPress (vignette, moyenne, grande), qui sont utilis\u00e9es pour les images de votre contenu. L\u2019image mise en avant, en revanche, est affich\u00e9e par votre th\u00e8me \u00e0 la taille d\u00e9finie par celui-ci ; par cons\u00e9quent, modifier les param\u00e8tres de la section \u00ab M\u00e9dias \u00bb n\u2019a souvent aucun effet visible sur vos images mises en avant.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Si vous souhaitez simplement savoir quelles dimensions privil\u00e9gier dans un premier temps, j'ai abord\u00e9 ce sujet dans le guide d'accompagnement disponible sur le <a href=\"https:\/\/www.wpconsults.com\/fr\/taille-de-limage-vedette-dans-wordpress-2\/\">Taille de l'image mise en avant dans WordPress<\/a>. Cet article explique comment proc\u00e9der concr\u00e8tement pour le modifier.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><thead><tr><th>M\u00e9thode<\/th><th>Ce que cela change<\/th><th>Id\u00e9al pour<\/th><\/tr><\/thead><tbody><tr><td>R\u00e9glages &gt; M\u00e9dias<\/td><td>Vignette par d\u00e9faut, taille moyenne, grande taille<\/td><td>Images du contenu, modifications rapides<\/td><\/tr><tr><td>add_image_size() dans le fichier functions.php<\/td><td>Une nouvelle taille personnalis\u00e9e pour l'image mise en avant<\/td><td>Une taille de mise en avant pr\u00e9cise, valable pour l'ensemble du th\u00e8me<\/td><\/tr><tr><td>Param\u00e8tres du th\u00e8me ou de l'\u00e9diteur de site<\/td><td>Comment le th\u00e8me actif affiche la vignette<\/td><td>Th\u00e8mes \u00e0 blocs et \u00e9diteurs de pages<\/td><\/tr><tr><td>Un plugin d\u00e9di\u00e9<\/td><td>Enregistre et applique les tailles \u00e0 votre place<\/td><td>\u00c9viter compl\u00e8tement le code<\/td><\/tr><\/tbody><\/table><figcaption>Les quatre fa\u00e7ons d'ajuster la taille de l'image mise en avant et ce sur quoi chacune d'entre elles a r\u00e9ellement une incidence, afin que vous puissiez choisir le bon param\u00e8tre.<\/figcaption><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c9tape 1 : D\u00e9finir une taille personnalis\u00e9e dans le fichier functions.php<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Ajoutez un nouveau format d'image dans le fichier functions.php de votre th\u00e8me (utilisez un th\u00e8me enfant pour \u00e9viter qu'une mise \u00e0 jour ne l'efface). Cela indique \u00e0 WordPress de g\u00e9n\u00e9rer ce format pour chaque nouveau fichier t\u00e9l\u00e9charg\u00e9. La fonction est document\u00e9e dans le <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/add_image_size\/\" rel=\"nofollow noopener\" target=\"_blank\">Guide de r\u00e9f\u00e9rence pour les d\u00e9veloppeurs WordPress<\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>add_image_size( 'featured-large', 1200, 675, true );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">C'est ce dernier param\u00e8tre qui importe le plus. Avec <code>vrai<\/code>, WordPress recadre l'image de mani\u00e8re rigide \u00e0 une taille exacte de 1 200 \u00d7 675, de sorte qu'elle occupe toujours tout le cadre, mais que les bords peuvent \u00eatre rogn\u00e9s. Avec <code>faux<\/code>, il redimensionne l'image pour qu'elle s'adapte \u00e0 ces limites tout en conservant le rapport hauteur\/largeur d'origine ; ainsi, rien n'est rogn\u00e9, mais les dimensions ne sont pas garanties.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c9tape 2 : Afficher la nouvelle taille dans votre mod\u00e8le<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Enregistrer le format ne repr\u00e9sente que la moiti\u00e9 du travail ; il faut \u00e9galement indiquer au th\u00e8me de l'utiliser. Dans un th\u00e8me classique, rep\u00e9rez l'endroit o\u00f9 l'image mise en avant est affich\u00e9e (souvent dans le fichier single.php) et transmettez le nom de votre nouveau format \u00e0 <a href=\"https:\/\/developer.wordpress.org\/reference\/functions\/the_post_thumbnail\/\" rel=\"nofollow noopener\" target=\"_blank\"><code>the_post_thumbnail()<\/code><\/a>.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>the_post_thumbnail( 'featured-large' );<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">Dans un th\u00e8me moderne bas\u00e9 sur les blocs, il n'y a pas de fichier single.php \u00e0 modifier. \u00c0 la place, ouvrez \u00ab Apparence \u00bb, puis \u00ab \u00c9diteur \u00bb, modifiez le mod\u00e8le d'article unique, s\u00e9lectionnez le bloc \u00ab Image mise en avant \u00bb et d\u00e9finissez-y ses dimensions. Le principe est le m\u00eame, mais l'op\u00e9ration s'effectue de mani\u00e8re visuelle plut\u00f4t qu'en PHP.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">\u00c9tape 3 : R\u00e9g\u00e9n\u00e9rer vos vignettes existantes<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Voici l'\u00e9tape que beaucoup de gens oublient. Une nouvelle taille enregistr\u00e9e ne s'applique qu'aux images mises en ligne apr\u00e8s son ajout ; vos images mises en avant existantes conserveront donc leurs anciennes dimensions. Pour appliquer la nouvelle taille \u00e0 tous les fichiers d\u00e9j\u00e0 pr\u00e9sents dans votre biblioth\u00e8que multim\u00e9dia, r\u00e9g\u00e9n\u00e9rez les vignettes.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">La solution la plus simple est la version gratuite <a href=\"https:\/\/wordpress.org\/plugins\/regenerate-thumbnails\/\" rel=\"nofollow noopener\" target=\"_blank\">R\u00e9g\u00e9n\u00e9rer les vignettes<\/a> plugin, qui g\u00e9n\u00e8re \u00e0 nouveau toutes les tailles en quelques clics. Si vous pr\u00e9f\u00e9rez la ligne de commande, <code>R\u00e9g\u00e9n\u00e9ration des m\u00e9dias WordPress<\/code> WP-CLI permet d'obtenir le m\u00eame r\u00e9sultat sans plugin, ce qui est id\u00e9al si vous souhaitez conserver une installation all\u00e9g\u00e9e.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Vous pr\u00e9f\u00e9rez ne pas toucher au code ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La m\u00e9thode par code vous offre le contr\u00f4le le plus pr\u00e9cis, et c'est celle que je privil\u00e9gie pour les sites de mes clients. Cela dit, si vous n'\u00eates pas \u00e0 l'aise avec la modification du fichier functions.php, un plugin d\u00e9di\u00e9 aux images mises en avant ou \u00e0 la taille des images peut vous permettre d'enregistrer et d'appliquer une taille personnalis\u00e9e depuis un \u00e9cran de param\u00e8tres ; pour une modification ponctuelle, c'est un compromis tout \u00e0 fait raisonnable. N'oubliez pas qu'il s'agit d'un plugin de plus \u00e0 maintenir \u00e0 jour ; je n'y ai donc recours que lorsque le code est v\u00e9ritablement hors de question.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Alors, quelle est la meilleure fa\u00e7on de le modifier ?<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Si c'\u00e9tait mon site, j'enregistrerais la taille avec <code>add_image_size()<\/code>, appelez-la dans le mod\u00e8le, puis r\u00e9g\u00e9n\u00e9rez les vignettes, car cela permet d'obtenir une taille de vignette uniforme pour tous les articles, sans qu'aucun plugin suppl\u00e9mentaire ne s'ex\u00e9cute en arri\u00e8re-plan. Cela fait trois \u00e9tapes, mais ce sont celles qui s'imposent vraiment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">N'optez pour un plugin que si vous ne souhaitez absolument pas modifier le code ; quel que soit le choix que vous ferez, ne n\u00e9gligez pas l'\u00e9tape de r\u00e9g\u00e9n\u00e9ration, car c'est elle qui permet que la modification s'affiche sur les articles que vous avez d\u00e9j\u00e0 publi\u00e9s.<\/p>\n\n\n\n<div class=\"wp-block-group wpc-changelog is-layout-flow wp-block-group-is-layout-flow\" id=\"article-update-logs\">\n<h2 class=\"wp-block-heading\">Journal des mises \u00e0 jour<\/h2>\n<p class=\"wp-block-paragraph\"><strong>1er juillet 2026<\/strong><\/p>\n<ul class=\"wp-block-list\"><li>Refonte sous la forme d'une m\u00e9thode claire en trois \u00e9tapes (enregistrement, affichage, r\u00e9g\u00e9n\u00e9ration) ; ajout de la section \u00ab Param\u00e8tres &gt; M\u00e9dias \u00bb consacr\u00e9e aux id\u00e9es re\u00e7ues, des instructions relatives \u00e0 l'\u00e9diteur de site pour les th\u00e8mes de blocs, ainsi qu'une alternative au plugin via WP-CLI.<\/li><\/ul>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Pour modifier la taille de l'image mise en avant dans WordPress, d\u00e9finissez une nouvelle taille \u00e0 l'aide de la fonction `add_image_size` dans le fichier `functions.php`, appelez-la dans votre mod\u00e8le, puis r\u00e9g\u00e9n\u00e9rez les vignettes des anciennes images.<\/p>","protected":false},"author":1,"featured_media":7384,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kb_optimizer_status":0,"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","rank_math_title":"How to Change Featured Image Size in WordPress","rank_math_description":"How to change featured image size in WordPress: register a custom size with add_image_size, call it in your template, and regenerate existing thumbnails.","rank_math_focus_keyword":"how to change featured image size in wordpress","_colophon_preset":"regular","_colophon_fc_on":"","_colophon_edited_on":"","_colophon_editor_on":"","_colophon_editor_id":0,"_colophon_editor_name":"","_wpc_translation_mode":"keep","_wpc_translation_visited":"2026-07-22 03:33 UTC (backfill)","_wpc_keep_translation":false,"_wpc_lastmod":"","footnotes":""},"categories":[7],"tags":[64],"class_list":["post-2792","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress-tips-tutorials","tag-without-plugin-series"],"_links":{"self":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/2792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/comments?post=2792"}],"version-history":[{"count":0,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/posts\/2792\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media\/7384"}],"wp:attachment":[{"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/media?parent=2792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/categories?post=2792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.wpconsults.com\/fr\/wp-json\/wp\/v2\/tags?post=2792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}