Un mur de texte sans images est le moyen le plus sûr de perdre vos lecteurs dans les cinq premières secondes. L’image mise en avant fait office de couverture de l’article: c’est ce que les gens voient dans le fil d’actualité, les widgets et les aperçus sur les réseaux sociaux. Elle vend le clic avant même que quiconque ait lu le titre.

Le problème, c’est que WordPress n’oblige pas les auteurs à définir une vignette. Un article se démarque avec une grande photo, un autre se réduit à un petit carré, un troisième n’a aucune image. La page d’accueil devient un chaos visuel, et Facebook ou Telegram récupèrent un logo aléatoire au lieu d’un aperçu pertinent.

Voici une analyse complète du mécanisme de l’image mise en avant: de l’ajout de votre première vignette jusqu’aux vérifications obligatoires avant publication. Avec du code fonctionnel, une extension spécifique et des instructions pas à pas.

💡 Aperçu rapide:

• Ajouter une image mise en avant via la barre latérale de l’éditeur
• Comprendre les tailles: ce que WordPress fait en coulisses et comment le reconfigurer
• Installer Simple Image Sizes et ajuster les dimensions pour votre thème
• Automatiser la configuration des vignettes avec du code dans functions.php
• Gérer les auteurs distraits: sans image, l’article passe en brouillon

Comment fonctionnent les images mises en avant

L’image mise en avant (ou vignette d’article) est un champ meta que le thème utilise pour l’affichage à trois endroits clés:

• Page d’accueil et archives. Un aperçu avec une image génère exponentiellement plus de clics qu’un simple lien texte.
• L’en-tête de l’article lui-même. Le thème affiche la vignette au-dessus ou juste en dessous du titre, souvent sur toute la largeur du contenu.
• Réseaux sociaux. Facebook, X et Telegram récupèrent l’image mise en avant via Open Graph. Sans image, le réseau substitue ce qu’il trouve.

Cette fonctionnalité est depuis longtemps un standard de WordPress. Aujourd’hui, il est impossible de trouver un thème correct sans prise en charge. Mais la qualité de l’implémentation varie encore d’un développeur à l’autre: un thème affiche la vignette comme une bannière soignée, un autre étire un petit carré sur toute la largeur.

Ajouter une image mise en avant: les mécanismes de base

Dans l’éditeur d’article (Gutenberg ou Classic), un panneau «Image mise en avant» se trouve à droite. Cliquez sur «Définir l’image mise en avant», téléversez un fichier ou choisissez dans la médiathèque, puis cliquez sur «Définir». C’est fait.

Nuance: WordPress n’exige pas que l’auteur définisse une image. S’il l’oublie, la publication arrive dans le fil d’actualité avec un emplacement vide. Nous aborderons la solution à ce problème dans la section sur les vérifications obligatoires.

Tailles d’image: ce que WordPress fait en coulisses

Chaque installation de WordPress propose quatre tailles par défaut:

• Taille originale, le fichier d’origine non modifié
• Miniature, un carré (par défaut 150×150 px selon les réglages des médias WordPress), recadré depuis le centre
• Moyenne, mise à l’échelle selon une largeur maximale donnée, sans recadrage
• Grande, identique mais avec une limite plus élevée

Ces réglages se trouvent dans «Réglages → Médias». Lors du téléversement d’une nouvelle image WordPress, WordPress génère les quatre versions plus les tailles supplémentaires enregistrées par le thème actif. Chaque version atterrit dans wp-content/uploads/ en tant que fichier distinct.

Pourquoi autant de copies? Sans elles, un designer devrait ajuster manuellement chaque taille pour un emplacement d’affichage spécifique. Avec elles, le thème demande simplement la variante nécessaire via the_post_thumbnail('medium') ou wp_get_attachment_image_src(). Plus d’informations sur l’architecture du sous-système média dans la documentation officielle de WordPress.

La miniature est la seule taille qui est recadrée de force. Les autres sont redimensionnées en conservant les proportions.

Modifier la taille de l’image mise en avant

Les thèmes utilisent des dimensions différentes. Lors d’un changement de thème ou pour un nouveau besoin, la taille de l’image mise en avant peut nécessiter un ajustement.

Vérifiez d’abord les réglages du thème: «Apparence → Personnaliser». Les thèmes modernes proposent souvent un curseur ou une liste déroulante pour la largeur et la hauteur de la vignette. Si vous le trouvez, modifiez-le en deux clics.

Si vous ne le trouvez pas, pas de problème. L’extension Simple Image Sizes résout la tâche sans une seule ligne de code.

Simple Image Sizes: l’outil adapté pour les dimensions

Extension gratuite de Nicolas Juen, activement maintenue (version actuelle 3.2.5, nécessite PHP 8.0+). Après installation, allez dans «Réglages → Médias» et vous verrez toutes les tailles enregistrées, y compris celles que le thème a ajoutées mais masquées.

Pour chaque taille, définissez la largeur et la hauteur. Pour l’image mise en avant, basez-vous sur la manière dont le thème l’affiche. Pour une bannière pleine largeur, utilisez 1200×630 px (optimal pour les réseaux sociaux selon les recommandations Facebook Open Graph). Pour une vignette carrée dans une grille, 400×400 ou 600×600 px.

Avantages:

• Voit toutes les tailles, y compris celles masquées par le thème
• Permet d’activer ou de désactiver l’affichage des tailles dans la liste déroulante d’insertion de média
• Génère un code PHP add_image_size() prêt à l’emploi pour le transférer dans le thème

Inconvénients:

• Nécessite PHP 8.0+, ne fonctionnera pas sur des hébergements franchement obsolètes
• Interface minimaliste, sans repères visuels

Prix: gratuit, pas de version Pro.

🔗 Simple Image Sizes sur WordPress.org

Que faire des anciennes images

WordPress n’applique les nouvelles tailles qu’aux nouveaux téléversements. Tout ce que vous avez mis en ligne auparavant conserve ses anciennes dimensions.

Simple Image Sizes couvre aussi ce besoin. Sur la page «Réglages → Médias», descendez jusqu’au bloc de régénération. Sélectionnez la taille souhaitée, précisez le type de publication et lancez la reconstruction. L’extension parcourt toutes les images existantes et crée de nouvelles copies aux dimensions mises à jour.

Attention: sur les sites comportant des dizaines de milliers de fichiers, la régénération consomme de l’espace serveur. WordPress ne supprime pas les anciennes vignettes, elles restent dans le dossier comme poids mort. Avant une régénération massive, assurez-vous d’avoir de la place sur le disque.

Attribution automatique de l’image à la une

Quand une publication contient des images mais que l’image à la une est vide, WordPress peut prendre la première image du contenu et l’attribuer comme vignette. Pratique pour les auteurs qui oublient régulièrement cette étape, et pour les blogs avec une publication en flux.

Le mécanisme est simple: si l’image à la une n’est pas définie manuellement, la fonction trouve la première image attachée via get_children et la définit avec set_post_thumbnail().

Le code s’ajoute dans le functions.php du thème actif. Je vous recommande vivement de passer par l’extension WPCode: une faute de frappe dans functions.php sans cela casse complètement le site:

1
function autoset_featured() {
2
    global $post;
3
    $already_has_thumb = has_post_thumbnail( $post->ID );
4
    if ( ! $already_has_thumb ) {
5
        $attached_image = get_children( array(
6
            'post_parent'    => $post->ID,
7
            'post_type'      => 'attachment',
8
            'post_mime_type' => 'image',
9
            'numberposts'    => 1,
10
        ) );
11
        if ( $attached_image ) {
12
            foreach ( $attached_image as $attachment_id => $attachment ) {
13
                set_post_thumbnail( $post->ID, $attachment_id );
14
            }
15
        }
16
    }
17
}
18
 
19
add_action( 'the_post', 'autoset_featured' );
20
add_action( 'save_post', 'autoset_featured' );
21
add_action( 'draft_to_publish', 'autoset_featured' );
22
add_action( 'new_to_publish', 'autoset_featured' );
23
add_action( 'pending_to_publish', 'autoset_featured' );
24
add_action( 'future_to_publish', 'autoset_featured' );

La fonction se déclenche sur six hooks: the_post, save_post et toutes les transitions de statut *_to_publish. Après l’attribution, la vignette reste même si vous retirez l’image du corps de la publication.

Inconvénient: si l’auteur n’a inséré aucune image dans le texte, il n’y aura pas de vignette. Pour ce scénario, voyez la section suivante.

Contrôle obligatoire: pas de vignette, pas de publication

Méthode simple et stricte: l’auteur clique sur «Publier», et WordPress enregistre la publication comme brouillon et affiche un avertissement. Sans image à la une, la publication ne passe pas.

Deux extraits de code dans functions.php:

Partie 1, vérification à l’enregistrement (uniquement pour le type post):

1
add_action( 'save_post', 'pu_validate_thumbnail' );
2
 
3
function pu_validate_thumbnail( $post_id ) {
4
    if ( get_post_type( $post_id ) != 'post' ) {
5
        return;
6
    }
7
 
8
    if ( ! has_post_thumbnail( $post_id ) ) {
9
        set_transient( 'pu_validate_thumbnail_failed', 'true' );
10
        remove_action( 'save_post', 'pu_validate_thumbnail' );
11
        wp_update_post( array( 'ID' => $post_id, 'post_status' => 'draft' ) );
12
        add_action( 'save_post', 'pu_validate_thumbnail' );
13
    } else {
14
        delete_transient( 'pu_validate_thumbnail_failed' );
15
    }
16
}

Partie 2, message d’erreur dans l’administration:

1
add_action( 'admin_notices', 'pu_validate_thumbnail_error' );
2
 
3
function pu_validate_thumbnail_error() {
4
    if ( get_transient( 'pu_validate_thumbnail_failed' ) == 'true' ) {
5
        echo '<div class="notice notice-error"><p><strong>You must set a featured image before publishing.</strong></p></div>';
6
        delete_transient( 'pu_validate_thumbnail_failed' );
7
    }
8
}

Le texte du message est entièrement personnalisable, remplacez la chaîne à l’intérieur de <p><strong>...</strong></p> par la vôtre.

Aperçu de la vignette dans la liste des publications

Le tableau standard «Publications → Toutes les publications» affiche le titre, l’auteur, les catégories, les étiquettes et la date. L’image à la une n’y figure pas. Pour vérifier quelles publications n’ont pas de vignette, vous devez les ouvrir une par une. Avec plus de 50 publications, c’est agaçant.

Le code ci-dessous ajoute une colonne Thumbs au tableau des publications et des pages:

1
add_filter( 'manage_posts_columns', 'posts_columns', 5 );
2
add_action( 'manage_posts_custom_column', 'posts_custom_columns', 5, 2 );
3
 
4
add_filter( 'manage_post-type_posts_columns', 'posts_columns', 5 );
5
add_action( 'manage_post-type_posts_custom_column', 'posts_custom_columns', 5, 2 );
6
 
7
function posts_columns( $defaults ) {
8
    $defaults['riv_post_thumbs'] = __( 'Thumbs' );
9
    return $defaults;
10
}
11
 
12
function posts_custom_columns( $column_name, $id ) {
13
    if ( $column_name === 'riv_post_thumbs' ) {
14
        if ( has_post_thumbnail() ) {
15
            echo the_post_thumbnail( array( 100, 100 ) );
16
        } else {
17
            _e( 'No Thumbnail For Post' );
18
        }
19
        echo '<style>.column-riv_post_thumbs img{max-height:100px;max-width:100px;}</style>';
20
    }
21
}

La taille de l’aperçu est réglée sur 100×100 px, ce qui suffit pour un contrôle visuel rapide. Si vous avez besoin de plus grand, remplacez array(100, 100) par array(200, 200). Plus d’informations sur les paramètres dans la documentation de the_post_thumbnail.

Pour les pages, ajoutez ces deux lignes au début de l’extrait:

1
add_filter( 'manage_pages_columns', 'posts_columns', 5 );
2
add_action( 'manage_pages_custom_column', 'posts_custom_columns', 5, 2 );

Désormais, dans la section «Pages → Toutes les pages», vous pouvez aussi voir où il y a une vignette et où il n’y en a pas.

Rendre la miniature cliquable

Un bon thème enveloppe automatiquement l’image mise en avant dans un lien vers l’article. Un mauvais thème affiche une image statique qui ne mène nulle part. Le visiteur clique sur l’aperçu en page d’accueil, et rien ne se passe.

Problème réglé avec un filtre dans functions.php:

1
function wcs_auto_link_post_thumbnails( $html, $post_id, $post_image_id ) {
2
    $html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_the_title( $post_id ) ) . '">' . $html . '</a>';
3
    return $html;
4
}
5
add_filter( 'post_thumbnail_html', 'wcs_auto_link_post_thumbnails', 10, 3 );

Le filtre post_thumbnail_html intercepte le code HTML de la miniature et l’enveloppe dans un lien avec get_permalink(). Le titre de l’article est placé dans l’attribut title via esc_attr(), ce qui est à la fois sûr et informatif.

Modifier le texte «Définir l’image mise en avant»

Quand le site configure automatiquement les miniatures à partir du contenu, le libellé standard «Définir l’image mise en avant» induit les auteurs en erreur. Il donne l’impression que l’image doit être définie manuellement, alors que le système va le faire tout seul.

Remplacez ce texte par quelque chose de plus explicite:

1
function change_featured_image_text( $content ) {
2
    return $content = str_replace(
3
        __( 'Set featured image' ),
4
        __( 'Thumbnail will be set automatically from the first image in the post' ),
5
        $content
6
    );
7
}
8
add_filter( 'admin_post_thumbnail_html', 'change_featured_image_text' );

Le filtre admin_post_thumbnail_html gère le bloc HTML de l’image mise en avant dans la barre latérale de l’éditeur. Vous pouvez substituer n’importe quel texte à l’intérieur de __( ... ) dans le deuxième argument de str_replace.

Vidéo: comment tout cela fonctionne en pratique

Si vous préférez une démonstration visuelle, voici une présentation complète par WPBeginner: de l’ajout de votre première miniature jusqu’au réglage fin des tailles et de l’automatisation.

⁉️🤔 Foire aux questions

Pourquoi l’image mise en avant ne s’affiche-t-elle pas sur le site?

Le plus souvent, le thème ne prend pas en charge la fonction post-thumbnails. Vérifiez functions.php: la ligne add_theme_support( 'post-thumbnails' ) doit y figurer. Si elle est absente, ajoutez-la. Deuxième raison: dans les réglages du thème, l’affichage de l’image mise en avant est désactivé pour un type de publication spécifique. Troisième raison: un plugin de cache conserve une ancienne version de la page, videz le cache.

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

L’image mise en avant est un champ meta de l’article que le thème utilise pour les aperçus dans les flux, les archives et les balises Open Graph. L’image de couverture est un bloc à l’intérieur du contenu (apparu avec Gutenberg) qui s’affiche uniquement dans le corps de l’article et n’a aucun impact sur les réseaux sociaux. Vous pouvez utiliser les deux simultanément: la couverture pour une entrée visuelle dans l’article, l’image mise en avant pour tout le reste.

Quelle taille dois-je utiliser pour les images mises en avant?

Pour les réseaux sociaux, le format optimal est 1200×630 px (ratio 1,91:1) selon la documentation développeur de Facebook. Pour la grille d’articles en page d’accueil, basez-vous sur ce qui est défini dans les réglages du thème. Si le thème utilise des miniatures carrées, visez 600×600 ou 800×800 px. Avant de téléverser, compressez l’image à 100-150 Ko via TinyPNG ou ShortPixel.

Est-il obligatoire de définir une image mise en avant pour chaque article?

Techniquement, non. Mais sans elle, la page d’accueil et les réseaux sociaux paraissent négligés, et le taux de clics chute de 2 à 3 fois. Si vous craignez d’oublier, utilisez le code de vérification obligatoire de la section précédente ou le plugin Quick Featured Images, qui substitue une miniature par défaut aux articles sans image.

Comment supprimer ou remplacer une image mise en avant?

Dans l’éditeur d’article, cliquez sur l’image mise en avant actuelle dans la barre latérale. La médiathèque s’ouvre, cliquez sur «Supprimer l’image mise en avant». Ensuite, le bouton redevient «Définir l’image mise en avant». Téléversez-en une nouvelle.

Puis-je utiliser une même image comme image mise en avant pour plusieurs articles?

Oui, WordPress n’impose aucune restriction. Sélectionnez le même fichier dans la médiathèque pour différents articles. Mais si l’image se répète dans le flux, cela ressemble à un bug ou à un oubli. Pour une variété visuelle, mieux vaut choisir des miniatures uniques.

Que faire avec les images mises en avant dès maintenant

L’image mise en avant n’est pas un élément «optionnel», mais une partie obligatoire de chaque article. Sans elle, les réseaux sociaux affichent un contenu aléatoire, la page d’accueil perd sa structure visuelle et le taux de clics chute de manière exponentielle.

Parcourez cette liste de contrôle en dix minutes:

• Ouvrez n’importe quel article et assurez-vous que l’image mise en avant est définie.
• Vérifiez son rendu sur la page d’accueil et sur les réseaux sociaux (l’outil Facebook Sharing Debugger peut vous y aider).
• Si les tailles ne correspondent pas à vos attentes, installez Simple Image Sizes et ajustez les dimensions.
• Si vous travaillez avec une équipe d’auteurs, ajoutez le code de vérification obligatoire pour que toute publication sans miniature passe en brouillon.

Ces dix minutes vous feront gagner des heures de retouches manuelles et des dizaines de lecteurs perdus. Faites-le maintenant.