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 :
- Créer des légendes dans la médiathèque de WordPress.
- 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.
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.
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.
En cliquant sur Modifier, vous ouvrez la fenêtre qui comprend le champ de légende de l’image :
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:
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.
- Cliquez sur le bouton Médiathèque.
- Sélectionnez ensuite l’image souhaitée.
L’image et sa légende sont ajoutées à votre mise en page.
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:
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.
Votre image et sa légende s’affichent à nouveau dans l’éditeur.
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 :
Ensuite, cliquez sur le bouton Téléverser.
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.
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:
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.
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.
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.
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.
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.
Ensuite, cliquez sur l’icône du crayon pour modifier les 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.
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 [+] :
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.
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.
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.
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.
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.
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.
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.
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.
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 :
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.
Vous pouvez ensuite saisir le code court dans le nouveau 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 :
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 :
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.
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.
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.
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.
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.
