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.
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.
Contrairement au texte brut, les images peuvent attirer efficacement l'attention des gens, les rendant plus susceptibles de s'engager avec le contenu. Cela peut être utile pour mettre en évidence des guides importants, des promotions ou des ressources que vous souhaitez que vos visiteurs remarquent.
De plus, les images contribuent à l'esthétique générale de votre site, le rendant plus agréable visuellement et plus convivial.
Une barre latérale bien conçue avec des images peut améliorer l'expérience utilisateur, entraînant des visites plus longues sur le site et une réduction des taux de rebond. Cela peut également améliorer la réputation et la crédibilité de votre site web.
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é
Option 1 : Utiliser le bloc Widget Image de WordPress
Vous pouvez utiliser un bloc widget image pour ajouter des images à la barre latérale de votre site.
L'éditeur de blocs de widgets a été introduit dans WordPress 5.8 et reproduit l'expérience de l'utilisation de l'éditeur de contenu WordPress. Vous pouvez utiliser différents blocs pour ajouter des formulaires, des articles similaires, des images et d'autres éléments à la zone des widgets à l'aide de blocs.
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 de widget 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 l'éditeur de bloc widget, vous aurez également des options pour changer le style, ajouter un texte alternatif et modifier la taille de l'image.
Il existe des paramètres pour changer la bordure de l'image et d'autres paramètres avancés.
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 à votre barre latérale WordPress est d'utiliser un plugin. Cela vous donnera quelques options supplémentaires et une interface simple, que certains débutants trouveront peut-être plus facile que le widget « Image » 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 beaucoup plus de fonctionnalités, comme plusieurs modèles de galerie que le widget de galerie par défaut n’offre pas. De plus, vous pouvez créer des albums et ajouter un filigrane à vos images.
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 la 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 du code HTML supplémentaire à votre image. Le widget de texte par défaut autorise un HTML très basique, mais il peut ne pas fonctionner avec du HTML ou un formatage avancé. Dans ce cas, vous devrez ajouter manuellement une image à la barre latérale de votre blog.
Tout d'abord, vous devez télécharger l'image sur votre site WordPress. Allez simplement dans Média » Ajouter et téléchargez votre fichier image.
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="http://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.
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://www.wpbeginner.com/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/