Lorsque nous avons lancé WPBeginner, nous avons rapidement constaté à quel point la barre latérale pouvait être précieuse pour interagir avec nos visiteurs.
Nous avons commencé à utiliser des images dans notre barre latérale pour la rendre plus attrayante visuellement, et les résultats ont été impressionnants.
Les images nous ont aidés à promouvoir nos cours gratuits, à mettre en avant des offres de coupons, à présenter des articles populaires et à guider les lecteurs vers différents types d'articles et de kits d'outils.
Avec quelques touches visuelles, la barre latérale est devenue l'une des parties les plus efficaces de notre site pour générer de l'engagement et des clics.
Dans ce guide, nous vous montrerons comment ajouter facilement des images aux widgets de la barre latérale de votre site WordPress, quel que soit le thème que vous utilisez ou votre expérience technique.
💡 Réponse rapide : Comment ajouter une image à la barre latérale de WordPress
Pour la plupart des utilisateurs, le moyen le plus rapide d'ajouter une image dans la barre latérale est d'utiliser le bloc WordPress par défaut :
- Allez dans Apparence » Widgets dans votre tableau de bord.
- Localisez votre zone de barre latérale et cliquez sur le bouton Ajouter un bloc (+).
- Recherchez et sélectionnez le bloc Image.
- Téléchargez votre photo et cliquez sur Mettre à jour pour enregistrer les modifications.
Pourquoi ajouter des images à votre barre latérale WordPress ?
L'ajout d'images à votre barre latérale WordPress peut améliorer considérablement l'attrait visuel et la fonctionnalité de votre site web.
Les images attirent l'attention plus rapidement que le texte brut. Cela vous aide à mettre en évidence efficacement les guides, les promotions ou les ressources importants.
Une barre latérale bien conçue améliore également l'expérience utilisateur. Cela peut se traduire par des visites plus longues sur le site et une réduction des taux de rebond.
Cela dit, regardons comment ajouter facilement des images à votre barre latérale WordPress.
Cliquez simplement sur les liens ci-dessous pour accéder à votre section préférée :
- Option 1 : Utiliser le bloc Widget Image de WordPress
- Option 2 : Utiliser un plugin Widget Image
- Option 3 : Utiliser le Widget Galerie d'Images
- Option 4 : Ajouter une image dans une zone de widget classique
- Option 5 : Utiliser le bloc Widget HTML personnalisé
- Questions fréquemment posées sur les images et les barres latérales dans WordPress
Option 1 : Utiliser le bloc Widget Image de WordPress
Remarque : Ce tutoriel s'applique aux thèmes classiques qui utilisent l'écran standard Apparence » Widgets. Si vous utilisez un thème basé sur des blocs (comme Twenty Twenty-Four), vous devez aller dans Apparence » Éditeur pour modifier votre barre latérale.
Vous pouvez utiliser le bloc Image par défaut pour ajouter des photos à la barre latérale de votre site.
La zone des widgets utilise désormais le même éditeur basé sur des blocs que celui trouvé dans les articles et les pages. Vous pouvez utiliser des blocs pour ajouter facilement des formulaires, des articles similaires, des images et d'autres éléments.
Pour commencer, vous devrez visiter la page Apparence » Widgets depuis votre tableau de bord WordPress. Ensuite, cliquez simplement sur le bouton '+' et ajoutez un bloc d'image.
Ensuite, vous pouvez ajouter une image dans le bloc widget de 3 manières.
Par exemple, vous téléchargez une image, choisissez une image existante dans votre médiathèque WordPress ou insérez l'image à partir d'une URL.
Dans les paramètres du bloc, vous verrez des options pour changer le style et la taille de l'image.
Vous devriez également ajouter du texte alternatif ici. Cela aide les lecteurs d'écran à comprendre l'image et améliore votre classement SEO.
Lorsque vous avez terminé, n'oubliez pas de cliquer sur le bouton « Mettre à jour ».
Ensuite, vous pouvez visiter votre site web et voir l'image dans la barre latérale.
🔎 Vous voulez rendre vos images plus interactives ? Essayez d'ajouter des points d'intérêt à vos images pour mettre en évidence des caractéristiques spécifiques de vos visuels !
Option 2 : Utiliser un plugin Widget Image
Une autre façon d'ajouter des images est d'utiliser un plugin.
Vous pourriez préférer cette méthode si vous souhaitez une interface héritée spécifique ou si vous n'êtes pas à l'aise avec l'éditeur de blocs par défaut.
Tout d'abord, vous devez installer et activer le plugin Image Widget. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.
Après activation, allez simplement sur la page Apparence » Widgets et ajoutez le bloc « Image Widget ».
Ensuite, cliquez sur le bouton « Sélectionner une image » pour télécharger une image ou en sélectionner une dans la médiathèque.
Après cela, vous devez cliquer sur le bouton « Insérer dans le widget », et vous verrez un aperçu de l’image sous les paramètres du widget.
Vous pouvez ajouter un titre ou un texte alternatif, ainsi qu’un lien et une légende pour l’image.
Vous pouvez également choisir une taille d’image dans la liste des options disponibles, modifier l’alignement, et plus encore.
Une fois que vous êtes satisfait, cliquez simplement sur le bouton Mettre à jour pour enregistrer le widget d’image. C’est tout. Vous pouvez maintenant aller sur votre site Web et voir l’image affichée dans votre barre latérale.
Option 3 : Utiliser le Widget Galerie d'Images
Si vous souhaitez afficher plusieurs images, vous pouvez utiliser le widget Galerie au lieu du widget Image.
Encore une fois, allez simplement sur la page Apparence » Widgets, puis cliquez sur l’option « Galerie ».
À partir d’ici, vous pouvez personnaliser les images de votre galerie. Par exemple, vous pouvez arrondir les coins des images.
Une fois que vous êtes satisfait de l’apparence de la galerie, cliquez simplement sur « Mettre à jour ».
Si vous souhaitez plus d’options de personnalisation, nous vous recommandons d’utiliser un plugin de galerie d’images comme Envira Gallery.
Il offre une réactivité mobile, une fonctionnalité de lightbox et une vitesse optimisée que le widget par défaut n'a pas. Vous pouvez également ajouter un filigrane à vos images pour protéger votre travail.
Pour plus d’informations, consultez notre guide sur comment créer une galerie d’images WordPress réactive.
Une fois que vous avez installé le plugin et configuré quelques galeries, vous verrez le widget « Envira Gallery » dans votre éditeur de widgets basé sur des blocs.
Tout ce que vous avez à faire ensuite est de choisir la galerie que vous souhaitez afficher.
Allez-y et cliquez sur le menu déroulant pour ce faire.
Une fois terminé, vous pouvez personnaliser davantage la galerie. Par exemple, vous pouvez modifier la disposition des colonnes et activer le mode Lightbox lorsque vous cliquez sur une image.
Lorsque vous êtes satisfait, cliquez simplement sur « Mettre à jour ».
Option 4 : Ajouter une image dans une zone de widget classique
Si vous utilisez une ancienne version de WordPress ou si vous avez désactivé les blocs de widgets, vous pouvez également ajouter facilement une image à la barre latérale.
Allez simplement à la page Apparence » Widgets depuis votre panneau d'administration WordPress et ajoutez le widget « Image » à votre barre latérale. Si vous n'avez jamais utilisé de widgets auparavant, consultez notre guide sur comment ajouter et utiliser des widgets dans WordPress.
Le widget se développera et vous pourrez voir ses paramètres.
La première option consiste à ajouter un titre au widget image. Après cela, cliquez sur le bouton « Ajouter une image » pour continuer.
Cela ouvrira le téléchargeur de médias WordPress, où vous pourrez cliquer sur le bouton « Télécharger des fichiers » pour télécharger votre image ou sélectionner une image que vous avez déjà téléchargée.
Après avoir téléchargé l'image, vous verrez les paramètres de l'image dans la colonne de droite. À partir de là, vous pouvez fournir un titre ou texte alternatif pour l'image, ajouter une description, sélectionner une taille, ou même ajouter un lien.
Une fois que vous avez terminé, vous pouvez cliquer sur le bouton « Ajouter au widget » pour enregistrer vos modifications. Vous verrez maintenant un aperçu de l'image dans la zone des paramètres du widget.
N'oubliez pas de cliquer sur le bouton « Enregistrer » pour enregistrer votre widget d'image.
Vous pouvez maintenant visiter votre site Web pour voir l'image affichée dans la barre latérale de votre blog WordPress.
Option 5 : Utiliser le bloc Widget HTML personnalisé
Dans certains cas, vous devrez peut-être ajouter des classes de suivi spécifiques ou des attributs avancés que le bloc Image standard ne prend pas en charge. Dans ce cas, vous devrez ajouter manuellement une image à la barre latérale de votre blog.
Tout d'abord, téléchargez l'image sur votre site WordPress via Média » Ajouter.
Après avoir téléchargé l'image, vous devez cliquer sur le lien Modifier à côté de l'image.
WordPress vous amènera maintenant à la page « Modifier le média », où vous verrez l'URL du fichier image sur le côté droit de l'écran.
Vous devez copier cette URL et la coller dans un éditeur de texte comme le Bloc-notes.
Ensuite, vous devez accéder à l'écran Apparence » Widgets depuis votre tableau de bord WordPress.
Après cela, vous pouvez ajouter le bloc de widget « HTML personnalisé » à votre barre latérale où vous souhaitez afficher l'image.
Dans la zone de texte du widget, vous devez ajouter votre image en utilisant ce code :
<img src="Paste The File URL Here" alt="Strawberries" />
La balise img est utilisée en HTML pour afficher des images. Elle nécessite deux attributs. Le premier est src, qui définit l'emplacement du fichier image. C'est là que vous collerez l'URL que vous avez copiée précédemment.
Le second est alt, qui est utilisé pour fournir un texte alternatif pour l'image. Votre balise d'image finale ressemblera à ceci :
<img src="https://www.example.com/wp-content/uploads/2014/09/strawberries.jpg" alt="Strawberries" />Vous devez cliquer sur le bouton « Mettre à jour » pour enregistrer les paramètres de votre widget, puis prévisualiser votre site web.
Questions fréquemment posées sur les images et les barres latérales dans WordPress
Voici quelques questions que nos lecteurs nous ont fréquemment posées concernant l'ajout d'images et la personnalisation de leurs barres latérales dans WordPress :
Comment ajouter des images côte à côte dans WordPress ?
Vous pouvez ajouter des images côte à côte en utilisant le bloc Galerie par défaut. Ajoutez simplement le bloc à votre contenu, sélectionnez plusieurs photos de votre médiathèque, et WordPress les organisera automatiquement dans une grille les unes à côté des autres.
Pour plus d'informations, consultez notre tutoriel sur comment mettre facilement des images côte à côte dans WordPress.
Comment modifier les widgets de la barre latérale dans WordPress ?
Pour modifier les widgets de la barre latérale, accédez à Apparence » Widgets dans votre tableau de bord WordPress. À partir de là, vous pouvez cliquer sur n'importe quel bloc existant pour modifier ses paramètres, le déplacer ou le supprimer entièrement à l'aide de l'éditeur visuel.
Comment ajouter une image à la barre de menu dans WordPress ?
La façon la plus simple d'ajouter des images à votre menu est d'utiliser un plugin tel que Menu Image. Une fois installé, allez dans Apparence » Menus, où vous verrez un nouveau bouton pour télécharger une icône ou une photo pour chaque élément de menu.
Pour commencer, vous pouvez consulter notre guide sur l'ajout d'icônes d'image au menu de navigation WordPress.
Comment concevoir une barre latérale dans WordPress ?
Vous pouvez concevoir une barre latérale personnalisée à l'aide d'un constructeur de pages par glisser-déposer comme SeedProd pour créer des mises en page sans codage. Alternativement, vous pouvez utiliser l'éditeur de blocs dans Apparence » Widgets pour regrouper des blocs, ajouter des couleurs d'arrière-plan et styliser visuellement les titres.
Pouvez-vous personnaliser un widget ?
Oui, la plupart des widgets WordPress modernes sont des blocs qui peuvent être entièrement personnalisés. Cliquez simplement sur le widget dans l'éditeur et utilisez le panneau des paramètres de droite pour ajuster les couleurs, la typographie, l'alignement et les options de visibilité.
Nous espérons que cet article vous a aidé à ajouter une image au widget de la barre latérale WordPress. Vous voudrez peut-être aussi consulter notre sélection d'experts des meilleurs constructeurs de pages glisser-déposer dans WordPress et comment changer le côté de la barre latérale dans WordPress.
Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.
Holly
Bonjour,
J'ai juste soumis une question concernant mon image qui n'apparaît que sur la page d'accueil et pas sur les autres pages du site. J'ai résolu mon problème et je voulais partager la solution au cas où elle aiderait quelqu'un d'autre. J'essayais d'utiliser le widget HTML personnalisé pour afficher quelques images dans ma barre latérale de contenu et lorsque j'ai spécifiquement configuré l'ajout des pages sur lesquelles je voulais les afficher (en laissant « Correspondre à tout » décoché), les images n'apparaissaient que sur la page d'accueil.
The solution was to reverse it and tell the widget to HIDE if the page was 404 (or whatever you want). Now the images show up on the sidebar of all my pages.
Merci,
Holly
Support WPBeginner
Thanks for sharing your resolution
Admin
Holly
Bonjour,
Le widget HTML personnalisé fonctionne sur la page d'accueil, mais les images n'apparaissent pas sur les autres pages statiques. J'ai configuré les paramètres sur « Afficher si » mes pages souhaitées sont sélectionnées, mais l'image n'apparaît que sur la page d'accueil. J'ai essayé de supprimer et de réajouter le widget et de supprimer et de réajouter des pages. Des idées ?
Merci !
Holly
Support WPBeginner
Depending on your theme, the widget area you are placing it at may only display on your home page. You would want to check with the theme’s support for where those widgets should show
Admin
Alice
Bonjour, j'essaie d'ajouter l'image et de la faire apparaître dans le coin supérieur gauche de l'article. Lorsque je l'ajoute et que j'aperçois, tout est là, mais lorsque je publie, elle n'y est pas. Des idées ?
Support WPBeginner
Vous voudrez peut-être essayer de vider votre cache pour vous assurer que cela n'en est pas la cause : https://014.leahstevensyj.workers.dev/beginners-guide/how-to-clear-your-cache-in-wordpress/
De plus, si vous contactez le support de votre thème, il se peut qu'un paramètre spécifique au thème doive être modifié.
Admin
Kathy Turner
J'ai ajouté une image à mon pied de page et sous Chrome sur un ordinateur de bureau, elle apparaît puis disparaît immédiatement. J'ai réduit la taille, j'ai essayé de l'ajouter comme une image en HTML, mais rien ne résout le problème. Sous Chrome sur mon mobile, tout va bien. Je n'ai pas d'adblock sur mon ordinateur de bureau. Le problème se produit également avec Firefox, mais Microsoft Edge fonctionne parfaitement. Des idées ?
harika
salut, j'ai créé un blog sur WordPress, mais la langue du contenu des publications est le telugu. Je veux changer le style de police des publications en telugu, comment ?
Micky
Bonjour,
J'ai essayé les deux méthodes indiquées dans cette vidéo, et l'image de la barre latérale ne s'affiche toujours pas du tout.
Avez-vous des idées sur la façon dont je pourrais résoudre ce problème ?
Merci !
Doma
Merci, c'était rapide et pertinent... très utile.
MS Rahman
Je veux afficher une image par défaut lorsqu'il n'y a rien dans le widget. Comment faire ?
Merci
Krishna
Y a-t-il un moyen de définir l'image de sorte qu'elle ne s'affiche que sur la page de démarrage / d'accueil ?
Sara william
Merci. J'essaie de télécharger ma photo de profil depuis un moment et maintenant cela peut être fait facilement.
Anette
Merci d'avoir expliqué cela en étapes simples !
Rebecca Claxton
Merci d'être toujours au top des recherches aléatoires que je fais pour des trucs WordPress – et merci pour les informations utiles adaptées aux gens ordinaires utilisant WP !
Support WPBeginner
Salut Rebecca,
We are glad you find WPBeginner helpful
Don’t forget to join us on Twitter for more WordPress tips and tutorials.
Admin
Karthik Marripoodi
Merci d'avoir écrit à ce sujet en détail. Je veux mettre mes publicités dans la section widget. Cette méthode conviendra parfaitement à mon besoin. Mais j'ai juste un problème. Comment ajouter une image différente pour chaque article de blog ? Y a-t-il un moyen de le faire ?
Minhaz
excellent article, j'adore wpbeginner
Mark
Je crois que la vidéo disait « Alt tag ». Ce ne serait pas la terminologie correcte – ce serait l'attribut Alt de la balise.
Victoria
J'adore ce tutoriel, cependant je suis sceptique quant au téléchargement du widget d'image car il est indiqué qu'il n'a pas été testé avec ma version de Wordpress. Y aura-t-il des mises à jour bientôt ou comment est-il testé avec ma version de Wordpress ?
Support WPBeginner
Bonjour Victoria,
Veuillez consulter notre article sur faut-il installer des plugins non testés avec votre version de WordPress.
Admin
melessa
Bonjour, j'espère que je ne l'ai pas manqué quelque part dans les commentaires, mais comment puis-je mettre une image circulaire ou ovale au lieu d'une image carrée pour la section "À propos de moi" dans la barre latérale ? J'utilise Divi d'Elegant Themes.
Support WPBeginner
Consultez notre guide sur comment ajouter des images gravatar rondes dans WordPress. L'article parle de gravatar mais vous pouvez utiliser le CSS avec n'importe quelle image.
Admin
Rod
Bonjour,
Avez-vous une idée pourquoi les puces n'apparaîtraient pas dans les widgets de la barre latérale malgré avoir retiré "list-style-type: none" du fichier CSS et l'avoir remplacé par le code suivant, et cela ne fonctionne toujours pas :
.widget ul li { list-style: circle }
Sam
Comment puis-je rendre l'image un lien cliquable.
Merci
David
Wow ! Exactement. Le texte visuel demande trop de travail pour une simple image. Je cherchais un plugin qui fait exactement cela. Merci beaucoup.
Molly
Merci, c'est exactement ce dont j'avais besoin, et vous avez rendu cela si facile !
Support WPBeginner
Salut Molly,
Glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Admin
Sandra Wiese
Merci beaucoup – ça fonctionne parfaitement !
Support WPBeginner
Salut Sandra,
We are glad you found it useful
You may also want to subscribe to our YouTube Channel for WordPress video tutorials.
Admin
Jana
Bonjour,
J'ai quelques questions. Premièrement, j'ai du mal à installer le plugin Widget Image pour une raison quelconque. J'ai déjà installé des plugins auparavant, mais je n'arrive pas à faire celui-ci. Certes, je suis débutant et je les ai ajoutés il y a presque un an, donc peut-être que j'ai oublié quelque chose. Pouvez-vous me donner quelques conseils ?
Aussi, croyez-le ou non, j'ai réussi à afficher une image sur mon widget en utilisant le codage HTML ! (Surpris que je puisse coder, mais vous avez rendu cela très facile et compréhensible) Le seul problème que j'ai est qu'elle est en taille réelle et j'espérais avoir des miniatures. Y a-t-il un code pour cela ? Si oui, je n'ai pas besoin d'installer le plugin.
Merci !
Support WPBeginner
Vous pouvez créer une image plus petite sur votre ordinateur en utilisant n'importe quel outil d'édition d'images, puis télécharger cette image.
Admin
James McAllister
J'ai lu ceci pour essayer de mettre à jour l'image que j'ai sur un widget sur mon blog.
Êtes-vous sur la même planète que le reste d'entre nous ? Lisez ce que vous avez écrit – il faudrait être un avocat de Philadelphie croisé avec Steve Jobs pour comprendre les instructions.
De toute façon – revenons à l'essai de changer l'image, je suis sûr que l'astuce est là quelque part.
Marvis
Merci beaucoup pour cette information. Mais j'ai vraiment besoin de savoir comment afficher les publicités Google sur mes articles et ma barre latérale. J'ai déjà un compte AdSense approuvé et j'ai généré le code publicitaire. Mais la prochaine étape à suivre est ce que je ne comprends pas. J'ai besoin d'aide s'il vous plaît.
Support WPBeginner
Veuillez consulter notre guide sur comment gérer les publicités dans WordPress avec Adsanity.
Admin
Abbie
Soit j'ai négligé beaucoup de choses dont vous avez parlé, soit le site a changé. Je vois une option pour un widget d'image que vous dites n'exister pas. Je ne vois aucun média ou galerie où je peux télécharger un fichier image.
Alors, où dois-je télécharger le fichier pour obtenir une URL à placer à l'endroit nécessaire sur le formulaire pour configurer le widget d'image ?
Paul
Télécharger dans votre bibliothèque de médias
Nikki
Merci, c'était très utile. la vidéo aurait pu être un peu plus lente
Luke
Merci pour l'aide ! C'est vraiment plus facile d'obtenir le plugin de widget d'image.
manmohan
C'est vraiment utile pour moi... merci pour ce post.
Mais j'ai une question
Erica
Bonjour. Je sais comment mettre les images dans la barre latérale, mais elles prennent trop de place, donc j'essaie de faire une galerie cliquable ici. J'obtiens la petite boîte cliquable, mais aucune image ne s'affiche. J'ai aussi pu faire un diaporama automatique, mais c'est très distrayant, donc je ne veux pas de ça. Je veux juste la galerie photo où l'on clique pour passer à l'image suivante, mais je ne trouve rien ici sur la façon de résoudre ce problème.
Support WPBeginner
Veuillez consulter notre guide comment créer facilement des galeries d'images WordPress réactives avec Envira.
Admin
Giulia
Bonjour,
J'ai un problème pour ajouter des widgets d'image. Lorsque j'essaie d'en ajouter un nouveau (après en avoir supprimé un aussi), les modifications ne sont pas enregistrées, la page cesse de se charger et lorsque j'essaie d'accéder au site (admin et normal), il est indiqué que je ne peux pas me connecter au serveur – donc, en gros, mon site est hors service. J'ai redémarré mon ordinateur et installé des mises à jour, ce qui a résolu le problème la première fois, mais lorsque j'ai essayé d'ajouter à nouveau le widget, la même chose s'est produite, sauf que le redémarrage ne semble plus aider !
Aidez-moi s'il vous plaît ! Je vous en serais très reconnaissant !
Merci d'avance !
Gregor Egan
Bonjour, Merci pour cela, cela fonctionne à merveille. J'ai une question ; je ne veux pas que la même image apparaisse sur chaque page, alors comment puis-je la restreindre à une page particulière afin de pouvoir utiliser une image différente sur les pages suivantes.
Cordialement,
Gregor
L'équipe de WPBeginner
Merci Lee, nous y travaillons.
Lee
Thank you, the video is helpful but you zip through the dialogue so fast I had to hit pause, rewind pause, pause, repeat….many times. Please realize some of us are ABSOLUTE newbies on WordPress. Thanks for the great material…but slower would be more helpful.
Sheryl Anderson
J'ai l'image dans le widget – ce que je veux savoir, c'est comment faire pointer ce widget vers un formulaire d'opt-in – comment ajoutez-vous ce code
Sultan Ayyaz
L'idée du widget d'image est vraiment nouvelle et très utile pour ajouter une image dans un site WordPress. Article très utile.
Fiona
Je voulais apprendre à faire ça. Le timing est parfait. Merci !
chzumbrunnen
Une autre bonne façon est d'utiliser le widget de texte mais avec l'éditeur TinyMCE (comme il est utilisé pour les articles). Il existe un plugin pour cela (en fait, il y en a plus d'un) : https://wordpress.org/plugins/black-studio-tinymce-widget/