skip to Main Content

Comment ajouter une image dans un widget sur WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Si la création d’une galerie photo est assez simple sur WordPress grâce à des plugins, il est cependant difficile ou plutôt pas à la portée de tous de savoir comment ajouter des images dans un widget. Vous pouvez par exemple pour afficher des bannières publicitaires ou des informations importantes sur votre sidebar.

Alors si le sujet vous intéresse, ou tout simplement par pure curiosité, je vous monterai dans ce tutoriel comment ajouter une image dans un widget de façon manuelle (c’est-à-dire avec la manipulation du code HTML), mais également je vous monterai comme le faire avec un plugin.

Comment ajouter une image disponible dans la médiathèque

Nous allons commencer par accéder aux médias (« Medias >> bibiothèque », sur le menu latéral gauche du tableau de bord), ensuite ouvrir (cliquer) l’image que l’on souhaite ajouter dans le widget. Récupérez l’adresse de cette image dans le champ « Adresse Web ».

selection-de-ladresse-d-une-image

Une fois que c’est fait, nous allons désormais ouvrir les widgets (« Personnaliser >> Widgets »), et ajouter un widget « texte »  dans une colonne latérale.

Sur ce widget texte, nous allons ajouter une balise « img », et attribuer le chemin d’accès vers l’image (Adresse Web) au paramètre « src », pour avoir un résultat pareil (en supposant que l’image se situe à l’emplacement : http://www.exemple.com/images/wp-images.jpg).

«<img src=’http://www.exemple.com/images/wp-images.jpg’>».

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

ajouter-une-balise-img

Vous pourrez ajouter des propriétés pour définir la largeur et la hauteur maximale de l’image, notamment avec les sous-propriétés « width » et « height » dans la propriété « style ». Vous pourrez donc définir qu’une image ne dépasse pas les « 300px » en largeur et en hauteur ainsi qu’il suit :

« <img src=’http://www.exemple.com/images/wp-images.jpg’ style=’width:300px;height:300px’> ».

Après avoir enregistré votre widget, consultez votre blog et vous remarquerez une différence sur la colonne latérale.

exemple-d-ajout-d-une-image

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Comment ajouter les images sur les widgets avec un plugin

Pour ceux qui n’aiment pas trop travailler comme moi, vous devez savoir qu’il existe une solution beaucoup plus facile, avec un plugin. Vous devez installer et activer le plugin Image Widget.

Une fois après son activation, accédez à l’interface de personnalisation des widgets (Personnaliser >> Widgets). Vous y trouverez un nouveau widget intitulé « Image Widget », ajoutez-le à l’une des colonnes latérales de votre thème.

image-widget

Cliquez sur « Select an Image », pour choisir une image depuis la médiathèque. Après avoir sélectionné votre image, vous pourrez voir un aperçu de cette dernière. Le plugin vous permet également de définir les options d’ouverture, la taille de l’image et l’option d’alignement (centré, droite, gauche).

comment-ajouter-une-image-avec-image-widget

Vous pourrez modifier la taille de l’image en sélectionnant l’option « Custom » pour le champ « Size », et ensuite définir les valeurs. Vous pourrez également ajouter une URL vers laquelle pointera l’image, dans le champ « Link ».

taille-personnalisee

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Le résultat sera assez identique de la première méthode.

resultat-avec-image-widget

C’est tout pour ce tutoriel, j’espère que vous l’avez trouvé utile. N’oubliez pas de le partager si vous l’avez aimé.

Cet article comporte 5 commentaires
    1. Bonjour, la solution la plus facile est d.utiliser un plugin qui fait le travail. Vous pouvez faire une recherche sur WordPress.org

  1. Bien!! Merci !!! MAIS il manque les guillemets pour la première possibilité^^ Tu as juste mis l’apostrophe.. Pour les novices comme moi, j’ai du analyser la capture d’écran pour comprendre… Belle continuation!!! Fanny

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
6 Partages
Partagez4
Tweetez2
Enregistrer