Une image vaut peut-être 1000 mots, mais une phrase ou deux de texte accompagnant une image en tant que légende peuvent souvent aider à faire passer un message. Des études de suivi des yeux ont montré que les utilisateurs de sites web se concentrent souvent sur des images convaincantes et pertinentes et poursuivent en lisant le texte correspondant dans les légendes adjacentes.

Mais si vous êtes chargé de disposer les images et les légendes sur une page web, il peut être difficile de faire en sorte que ces éléments apparaissent ensemble de manière cohérente. C’est pourquoi, dans ce guide, nous allons voir comment ajouter des légendes d’images WordPress.

Comment créer des légendes d’images WordPress

La relation entre une image et sa légende peut commencer dès que vous la téléversez sur WordPress. Il existe deux approches courantes pour réunir les images et les légendes :

  1. Créer des légendes dans la médiathèque de WordPress.
  2. Créer des légendes dans l’éditeur WordPress « à la volée ».

Nous allons examiner les deux.

Comment créer des légendes d’images à partir de la médiathèque

Les images que vous ajoutez à la médiathèque se retrouvent généralement dans des dossiers sur votre serveur web, tandis que les informations sur les images – y compris les légendes – sont stockées dans la base de données de WordPress.

Pour accéder à la médiathèque :

  • Sélectionnez Média > Médiathèque dans le tableau de bord de WordPress.
  • Cliquez sur le bouton Ajouter pour téléverser votre image cible.
Ajouter une nouvelle image à la médiathèque.
Ajouter une nouvelle image à la médiathèque.

En cliquant sur la miniature de l’image, la fenêtre Détails s’affiche, où vous pouvez ajouter la légende de votre image.

Texte de légende ajouté dans la fenêtre Détails.
Texte de légende ajouté dans la fenêtre Détails.

Ajoutez votre texte dans le champ « Légende » et, voilà, la légende de votre image est ajoutée. Vous serez peut-être heureux d’apprendre que, lorsque vous modifiez les détails de l’image ici, WordPress enregistre automatiquement votre travail au fur et à mesure de votre saisie.

Vous pouvez également passer directement à un téléversement de média en sélectionnant Média > Ajouter dans le tableau de bord de WordPress :

  • Sélectionnez (ou glissez-déposez) l’image à téléverser.
  • Cliquez ensuite sur le lien Modifier à côté de la miniature de l’image.
Ajout d'une image après avoir sélectionné <strong>Media > </strong><strong> Ajouter</strong>.
Ajout d’une image après avoir sélectionné Media > Ajouter.

En cliquant sur Modifier, vous ouvrez la fenêtre qui comprend le champ de légende de l’image :

Ajout d'une légende après avoir commencé un téléversement avec <strong>Média</strong> > <strong>Ajouter</strong>.
Ajout d’une légende après avoir commencé un téléversement avec Média > Ajouter.

C’est là que vous pourrez ajouter la légende de votre choix. Cette fois, cependant, vous devez enregistrer vos modifications en faisant défiler la page jusqu’à ce que vous puissiez cliquer sur le bouton Mettre à jour:

Enregistrez votre travail après avoir ajouté une légende à votre image.
Enregistrez votre travail après avoir ajouté une légende à votre image.

Maintenant que vous avez enregistré les légendes avec vos images dans la médiathèque, vous pouvez facilement les présenter sur une page web ou un article de blog.

Voyons comment le faire en utilisant l’éditeur de blocs et l’éditeur classique.

Comment ajouter une image avec une légende dans l’éditeur de blocs

Pour ajouter une image dans l’éditeur de blocs :

  • Cliquez sur l’icône [+] pour afficher le panneau des blocs.
  • Cliquez sur l’icône Image.
La modale des blocs disponibles.
La modale des blocs disponibles.
  • Cliquez sur le bouton Médiathèque.
Choisir la source d'une image.
Choisir la source d’une image.
  • Sélectionnez ensuite l’image souhaitée.
Naviguer dans la médiathèque.
Naviguer dans la médiathèque.

L’image et sa légende sont ajoutées à votre mise en page.

Un exemple de légende d'image affichée dans l'éditeur de bloc de WordPress.
Un exemple de légende d’image affichée dans l’éditeur de bloc de WordPress.

Comment ajouter une légende d’image dans l’éditeur classique

Dans l’éditeur classique, vous pouvez ajouter une image et sa légende en cliquant sur le bouton Ajouter un média:

Ajouter un média dans l'éditeur classique de WordPress.
Ajouter un média dans l’éditeur classique de WordPress.

Une fois là, vous verrez le champ de la légende sur la droite pour que vous puissiez le modifier. Lorsque vous êtes satisfait du texte, cliquez sur le bouton Insérer dans l’article.

Ce bouton sera intitulé Insérer dans la page si vous modifiez une page WordPress au lieu d’un article de blog.

Insertion d'une image avec une légende dans l'éditeur classique de WordPress.
Insertion d’une image avec une légende dans l’éditeur classique de WordPress.

Votre image et sa légende s’affichent à nouveau dans l’éditeur.

Image et légende affichées dans l'éditeur classique de WordPress.
Image et légende affichées dans l’éditeur classique de WordPress.

Comment créer des légendes directement à partir de l’éditeur WordPress

La beauté des logiciels est qu’il existe généralement plusieurs façons d’obtenir le même résultat. WordPress et les légendes d’images ne font pas exception.

Comment téléverser une image et ajouter une légende dans l’éditeur de blocs ?

Dans l’éditeur de bloc, cliquez sur l’icône [+] et choisissez l’option Bloc d’image :

Le panneau des blocs disponibles.
Le panneau des blocs disponibles.

Ensuite, cliquez sur le bouton Téléverser.

Téléversement d'une image depuis l'éditeur de blocs.
Téléversement d’une image depuis l’éditeur de blocs.

Une fois que vous aurez sélectionné (ou glissé et déposé) votre image, WordPress la placera dans l’éditeur. Vous verrez le texte « Ajouter une légende » en dessous.

Placer une image sans légende pré-existante.
Placer une image sans légende pré-existante.

Pour ajouter la légende de votre image, il suffit de remplacer « Ajouter une légende » par vos propres mots.

Notez que la légende que vous créez n’est pas enregistrée dans la médiathèque lorsque vous utilisez cette approche dans l’éditeur de blocs.

Comment téléverser une image et ajouter une légende dans l’éditeur classique

Si vous utilisez l’éditeur classique, téléversez votre image en cliquant sur le bouton Ajouter un média:

Début du téléversement d'une image dans l'éditeur classique de WordPress.
Début du téléversement d’une image dans l’éditeur classique de WordPress.

Ensuite, cliquez sur Téléverser des fichiers dans la fenêtre Ajouter un média pour sélectionner (ou glisser-déposer) votre image.

Choisir de téléverser une image dans la fenêtre Ajouter un média.
Choisir de téléverser une image dans la fenêtre Ajouter un média.

Votre nouvelle image sera téléversée dans la médiathèque et affichée comme sélectionnée avec une coche. Ajoutez la légende de votre image dans le champ Légende disponible dans le panneau Détails de la pièce jointe.

Ajout d'une légende dans le panneau Détails de la pièce jointe.
Ajout d’une légende dans le panneau Détails de la pièce jointe.

Après avoir rédigé votre légende, cliquez sur le bouton Insérer dans l’article (ou Insérer dans la page).

Votre légende sera enregistrée avec tous les autres détails dans la médiathèque et apparaîtra avec l’image dans l’éditeur classique.

Une légende affichée après le téléversement d'une image dans l'éditeur classique de WordPress.
Une légende affichée après le téléversement d’une image dans l’éditeur classique de WordPress.

Comment modifier une légende d’image WordPress existante

Que faire si vous devez modifier ou mettre à jour des légendes déjà ajoutées à une image ? Vous pouvez le faire en quelques étapes seulement. Voici comment.

Comment modifier une légende existante dans l’éditeur de bloc WordPress

L’éditeur de blocs traite une légende comme tout autre texte. Pour modifier une légende, il suffit de cliquer sur le texte et d’apporter vos modifications.

Modifier une légende existante dans l'éditeur de blocs de WordPress.
Modifier une légende existante dans l’éditeur de blocs de WordPress.

Sachez que les légendes modifiées de cette façon dans l’éditeur de blocs ne sont pas enregistrées avec les détails de l’image dans la médiathèque.

Comment modifier une légende existante dans l’éditeur classique de WordPress

Si vous utilisez plutôt l’éditeur classique, cliquez sur l’image pour afficher la barre d’outils des commandes d’image.

Barre d'outils des contrôles d'image affichée pour l'image sélectionnée.
Barre d’outils des contrôles d’image affichée pour l’image sélectionnée.

Ensuite, cliquez sur l’icône du crayon pour modifier les détails de l’image.

Modification d'une légende dans la boîte de dialogue Détails de l'image.
Modification d’une légende dans la boîte de dialogue Détails de l’image.

Saisissez votre nouveau texte dans le champ Légende, puis cliquez sur le bouton Mettre à jour. Cela enregistrera votre nouvelle légende d’image dans la médiathèque et vous ramènera à l’éditeur.

Modifier une légende existante comme du texte normal.
Modifier une légende existante comme du texte normal.

Conseil : l’éditeur classique vous permet également de modifier les légendes comme tout autre texte sur une page web. Rappelez-vous simplement que les légendes mises à jour de cette façon ne sont pas enregistrées avec les détails de l’image dans la médiathèque.

Comment ajouter des légendes dans une galerie d’images WordPress

Vous pouvez utiliser des méthodes similaires pour ajouter des légendes aux images dans les galeries WordPress.

Ajout de légendes à une galerie WordPress à l’aide de l’éditeur de blocs

L’éditeur de blocs propose le bloc Galerie comme option après avoir cliqué sur l’icône [+] :

Création d'une nouvelle galerie d'images dans WordPress.
Création d’une nouvelle galerie d’images dans WordPress.

Dans ce scénario, nous supposons que ce site WordPress est rempli d’images et de légendes enregistrées, vous allez donc cliquer sur le bouton Médiathèque.

Sélectionner <strong>Téléverser</strong> et ajouter les légendes manuellement serait également une option.
Sélectionner Téléverser et ajouter les légendes manuellement serait également une option.

Dans la médiathèque, cliquez sur les miniatures des images que vous souhaitez voir figurer dans la galerie. Les coches indiquent vos sélections.

Sélection des images pour une nouvelle galerie de photos.
Sélection des images pour une nouvelle galerie de photos.

Cliquez sur le bouton Créer une nouvelle galerie pour continuer.

Comme étape finale avant de placer la galerie sur les articles/pages du blog, la boîte de dialogue Modifier la galerie vous permet de faire glisser et de déposer les images pour modifier l’ordre dans lequel elles apparaîtront et pour ajouter ou supprimer des images de votre sélection.

Réorganisation des images choisies pour la galerie.
Réorganisation des images choisies pour la galerie.

Lorsque vous êtes satisfait du résultat, cliquez sur le bouton Insérer la galerie.

Le thème WordPress Twenty Twenty utilisé pour cet exemple superpose le texte de la légende à l’image associée.

Un exemple d'une galerie d'images avec des légendes dans l'éditeur de bloc.
Un exemple d’une galerie d’images avec des légendes dans l’éditeur de bloc.

Ajout de légendes à une galerie WordPress à l’aide de l’éditeur classique

Voici comment ajouter une galerie d’images avec des légendes en utilisant l’éditeur classique de WordPress.

Vous avez des problèmes de temps d'indisponibilité et de WordPress ? Kinsta est la solution d'hébergement conçue pour vous faire gagner du temps ! Découvrez nos fonctionnalités

Placez votre curseur à l’endroit où vous souhaitez que votre galerie soit insérée, puis :

  • Cliquez sur Ajouter un média.
  • Choisissez Créer une galerie dans la colonne latérale de gauche.
Les images sélectionnées seront mises en évidence par des coches.
Les images sélectionnées seront mises en évidence par des coches.

Vous pouvez parcourir les images disponibles pour votre galerie sous l’onglet Médiathèque.

  • Sélectionnez les images que vous souhaitez utiliser dans votre galerie (indiquées par des coches).
  • Cliquez sur Créer une nouvelle galerie.

Vos images sélectionnées apparaîtront dans la fenêtre Modifier la galerie. Là, vous pouvez modifier le texte de la légende de chacune d’elles et, si nécessaire, vous pouvez changer l’ordre d’affichage des images.

Faites glisser et déposez les miniatures pour modifier l'ordre des images dans la galère.
Faites glisser et déposez les miniatures pour modifier l’ordre des images dans la galère.

Lorsque vous êtes satisfait du contenu de votre galerie et de vos légendes d’images, cliquez sur Insérer une galerie.

Vos images et vos légendes s’afficheront dans l’éditeur.

Vous devez à nouveau éditer la galerie pour modifier les légendes.
Vous devez à nouveau éditer la galerie pour modifier les légendes.

Notez que les légendes ne peuvent pas être modifiées dans cette vue. Pour le faire :

  • Cliquez n’importe où sur la galerie pour mettre le groupe en surbrillance.
  • Cliquez sur l’icône du crayon.

Vous retournerez à la boîte de dialogue Modifier la galerie vue à l’étape précédente, où vous pourrez à nouveau modifier les légendes.

Modification de l’apparence des légendes des galeries WordPress à l’aide d’un plugin

Par défaut, WordPress utilise uniquement le champ Légende stocké dans la médiathèque lorsqu’il applique automatiquement des légendes d’images. Cependant, l’extension Gallery Image Captions (GIC) fournit un crochet pour le code PHP personnalisé qui peut construire des légendes à partir de n’importe quel champ de détail de la médiathèque, y compris les champs personnalisés.

GIC s’appuie sur les codes courts WordPress – en particulier, le code court [gallery] – pour déclencher l’exécution du PHP personnalisé que vous écrivez. Ce code identifie les champs détaillés de la médiathèque qui feront partie d’une légende et peut même inclure du HTML pour aider à formater la mise en page de la légende.

Lorsque vous créez une galerie à l’aide de l’éditeur classique, le code court [gallery] est inséré en coulisse. Vous pouvez le voir en cliquant sur l’onglet Texte pour révéler le code :

Par défaut, l'éditeur classique génère un code court pour les galeries d'images.
Par défaut, l’éditeur classique génère un code court pour les galeries d’images.

Dans sa forme la plus simple, le code court [gallery] inclut les numéros d’identification des images sélectionnées pour l’affichage.

Par défaut, l’éditeur de blocs génère immédiatement le HTML pour une galerie lorsqu’il place un groupe d’images sur une page web, mais vous pouvez toujours choisir l’approche du code court :

  • Cliquez sur l’icône [+] dans l’éditeur.

Cela fera apparaître le panneau des blocs disponibles.

  • Commencez à saisir « code court » dans le champ de recherche.
  • Cliquez sur l’icône [/] (code court) lorsqu’elle apparaît.
Demande d'un bloc de code court.
Demande d’un bloc de code court.

Vous pouvez ensuite saisir le code court dans le nouveau bloc.

Ajout d'un code court dans l'éditeur de bloc.
Ajout d’un code court dans l’éditeur de bloc.

Vous devez modifier le code WordPress dans votre thème pour utiliser l’extension CPG. Vous pouvez ajouter votre code PHP personnalisé pour les légendes en modifiant le fichier functions.php de votre thème. Comme ce fichier peut être remplacé lorsqu’un thème est mis à jour, il est préférable de créer un thème enfant avant de modifier les fichiers clés de WordPress. Et, juste pour rester du côté sûr des choses, une sauvegarde rapide ne fait jamais de mal.

Une autre approche consiste à utiliser une extension comme Code Snippets, qui vous permet d’insérer du PHP dans le code de votre site sans modifier functions.php.

Que vous modifiiez directement le fichier functions.php ou que vous tiriez parti d’une extension comme Code Snippets, votre code ressemblera à quelque chose comme ceci :

Une fonction PHP qui peut être déclenchée par le code court pour les galeries d'images.
Une fonction PHP qui peut être déclenchée par le code court pour les galeries d’images.

La personnalisation clé se produit aux lignes 17 et 18 ci-dessus, où le contenu du titre et de la légende de la médiathèque est inséré dans un balisage HTML de base pour modifier l’apparence des légendes.

Dans la médiathèque, les images potentielles de la galerie devront contenir du texte dans ces champs :

Avec l’extension CPG installée ainsi que le code PHP personnalisé, les légendes des images de la galerie ressemblent maintenant à ceci :

Légendes étendues générées par l'extension CPG et le code PHP personnalisé.
Légendes étendues générées par l’extension CPG et le code PHP personnalisé.

Comment ajouter des légendes aux images mises en avant

Une image mise en avant n’aura, par défaut, aucune légende dans la plupart des thèmes WordPress.

Image mise en avant sur une page (backend et dans la médiathèque (frontend).
Image mise en avant sur une page (backend et dans la médiathèque (frontend).

Par exemple, l’image ci-dessus est affichée dans la médiathèque avec une légende, mais elle apparaît sans légende lorsqu’elle est utilisée comme image mise en avant.

Si vous voulez une légende à cet endroit, l’extension FSM Custom Featured Image Caption peut vous aider.

Une fois l’extension installée, ses réglages vous permettent de spécifier la classe de feuille de style que vous souhaitez attribuer à vos légendes, ou si vous allez ajouter une CSS personnalisée.

La boîte de dialogue des réglages de l'extension.
La boîte de dialogue des réglages de l’extension.

Par défaut, l’extension Custom Featured Image Caption affichera la légende stockée avec l’image dans la médiathèque, mais pas dans l’éditeur.

Image mise en avant affichée avec la légende stockée dans la médiathèque.
Image mise en avant affichée avec la légende stockée dans la médiathèque.

L’extension Custom Featured Image Caption modifie également la fenêtre Image mise en avant dans l’éditeur de blocs et l’éditeur classique afin qu’elle puisse accepter une autre légende, remplaçant toute légende stockée dans la médiathèque.

Contrôles d'image mise en avant ajoutés par l'extension, y compris une légende alternative.
Contrôles d’image mise en avant ajoutés par l’extension, y compris une légende alternative.

Vous pouvez masquer la légende et l’image mise en avant elle-même en utilisant les options de case à cocher en bas du panneau.

Résumé

WordPress offre beaucoup de flexibilité lorsqu’il s’agit d’ajouter et de modifier des légendes pour des images individuelles et des images dans des galeries. Et si les options intégrées ne sont pas suffisantes, vous pouvez utiliser des extensions tierces pour étendre ses fonctionnalités de base.

Et voici une astuce : si vos projets web comportent beaucoup d’images, assurez-vous de consulter notre guide sur la façon d’optimiser les images pour le web et les performances.


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 35 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.