Comment ajouter des images personnalisées à votre barre latérale

SOS WP

Ouvrir l’index du contenu

Ce guide a été mis à jour le

Combien de fois m’a-t-on demandé comment ajouter des images personnalisées dans la barre latérale ? Beaucoup d’entre eux !

Si vous vous demandez actuellement comment faire, vous avez le même doute que la plupart des utilisateurs de WordPress (et Dans ce guide, vous trouverez la solution que vous recherchez).

Le problème sous-jacent est que il n’y a pas de widget natif pour ajouter des images personnalisées dans la barre latérale. Il y en a un pour ajouter des blocs de texte, mais pas un spécifique aux images.

L’ajout de photos et de graphiques dans cette zone du site est ce qui est sans aucun doute très utile. Par exemple, vous pourriez mettre une bannière, votre photo, les logos des sites avec lesquels vous travaillez, etc.

Aujourd’hui, je vais vous expliquer comment ajouter des images personnalisées dans la barre latérale de votre site, à la fois avec une méthode qui implique l’utilisation de plugins et manuellement (si vous avez encore quelques minutes je vous suggère d’explorer cette deuxième méthode qui est encore très simple).

Ce plugin est très utile pour créer des widgets contenant des photos, logos ou autres graphiques.

Installé Widget Simple Imagelorsque vous naviguez dans Apparence > Widgets trouver un nouveau widget appelé “Image”.

Ce widget a quelques options :

  • Titrepour entrer un titre, affichez un titre au-dessus de l’image,
  • Taillepour définir la taille de l’image,
  • Lienssi vous souhaitez ajouter un lien cliquable à l’image (voici aussi l’option ” “)Ouvrir dans une nouvelle fenêtre“à vérifier pour s’assurer que lorsque l’utilisateur clique sur l’image, le lien s’ouvre sur un nouvel onglet) ;
  • Texte du lien. Ici, vous pouvez taper le texte qui apparaîtra sous l’image, avec le même lien que celui que vous avez inséré précédemment ;
  • Texte. Dans ce champ, vous pouvez taper un texte simple qui est ajouté sous l’image.

Lorsque vous sauvegardez les paramètres du widget, l’image est automatiquement visible dans la barre latérale.

Une alternative valable au Simple Image Widget est Image Rotator Widget. En plus d’ajouter des images personnalisées à la barre latérale, ce plugin vous permet d’en insérer plus d’une et de les visualiser en rotation.

Pour vous montrer comment cet outil fonctionne, j’insère ci-dessous une courte vidéo de démonstration des étapes de configuration du plugin.

Attention ! Ajouter des images personnalisées à votre barre latérale avec des widgets est vraiment très simple. Cependant, si vous ne souhaitez ajouter qu’une ou deux images et ne prévoyez pas de les mettre à jour pendant une période suffisamment longue, je vous recommande d’utiliser la solution sans plugin décrite dans les paragraphes suivants.

La raison en est simple : il est toujours préférable d’essayer de limiter le nombre de plugins installés sur votre site. Chaque outil alourdit légèrement le serveur et augmente également la possibilité qu’il y ait des problèmes de compatibilité avec les futures mises à jour.

Pour résumer, Je vous suggère d’utiliser les plugins uniquement si vous souhaitez insérer plusieurs images et/ou les mettre à jour fréquemment.

Il existe une méthode tout aussi simple pour ajouter des images personnalisées à la barre latérale sans installer de plugins. Vous avez juste besoin de vous familiariser avec quelques courts codes HTML.

A la première heure, télécharger l’image que vous voulez utiliser dans la médiathèque. Si vous rencontrez des problèmes, vous pouvez corriger l’erreur HTTP lors du téléchargement des images d’une manière très simple. Une fois cela fait, trouvez l’image à l’intérieur de la Bibliothèque et cliquez sur Modifier.

Dans l’écran qui s’ouvre, à droite, vous trouverez un champ appelé “URL du fichier”. Ce lien est en fait l’emplacement du fichier dans le serveur ; prenez-en note car nous en aurons besoin.

Maintenant, naviguez dans Apparence > Widgets. Ici ajouter un widget texte dans la barre latérale (ce type de widget est présent par défaut sur tous les sites WordPress).

Dans le widget, collez ce code en le modifiant pour qu’il se trouve à l’intérieur de l’url de votre image.

Comment ajouter des images personnalisées à votre barre latérale  

Lorsque vous enregistrez le widget, l’image est immédiatement visible dans la barre latérale.

Vous pouvez également utiliser des codes HTML pour personnaliser davantage l’image :

Règle la taille de l’image

Si vous voulez redimensionner le fichier, vous pouvez définir sa hauteur et sa largeur en entrant avant l’option > de fermeture : width=”125″ height=”125″ height=”125″ (c’est un exemple où 125 est la mesure en pixels).

Donc, le résultat final est :

Comment ajouter des images personnalisées à votre barre latérale  

Dans ce cas, l’image sera redimensionnée pour mesurer 125 pixels en largeur et en hauteur.

Ajouter un lien vers l’image

Un autre truc que vous pouvez prendre pour personnaliser vos images est de les faire cliquable avec un lien de votre choix. Pour ce faire, il suffit d’ajouter le code

avant le code contenant l’URL du fichier multimédia et à la fin.

C’est le résultat final :

Comment ajouter des images personnalisées à votre barre latérale  

Si vous voulez faire un pas de plus et vous assurer que lorsque l’utilisateur clique sur l’image, le lien s’ouvre sur un nouvel onglet, ajoutez target=”_blank” rel=”noopener noreferrer” rel=”noopener noreferrer” après le lien de destination. Comme ceci :

Comment ajouter des images personnalisées à votre barre latérale  

Centrer l’image

Si votre image n’a pas la même largeur que la barre latérale, dans la plupart des cas, il est utile de la centrer pour la rendre visuellement plus agréable.

Pour ce faire, il suffit d’ajouter le code

avant les codes du lien externe et du fichier média, et

à la fin. C’est le résultat final :

Comment ajouter des images personnalisées à votre barre latérale

Si vous ne voulez pas rendre votre image cliquable, mais toujours centrée, vous pouvez utiliser le même code en omettant celui lié au lien externe. L’important est que les balises d’ouverture et de fermeture entourent le code utilisé pour insérer l’image. Comme ceci :

Comment ajouter des images personnalisées à votre barre latérale

Lorsque vous commencez à reconnaître la structure de ces codes, il devient très facile de les personnaliser.

Je vous suggère d’en prendre note et de commencer à expérimenter ; vous verrez qu’après un certain temps de pratique, vous n’aurez plus besoin du plugin !

Comment ajouter des images personnalisées à votre barre latérale

Conclusion

Dans le guide d’aujourd’hui, nous avons vu deux méthodes pour ajouter des images personnalisées à la barre latérale : une qui implique l’utilisation de plugins et une manuelle.

Comme je l’ai déjà écrit dans le post, je vous recommande de pratiquer avec la méthode manuelle, donc vous n’avez pas besoin du plugin et éviter d’ajouter des outils inutiles à votre site.

Comme d’habitude, je vous invite maintenant à laisser tous vos commentaires et questions ci-dessous. C’est un sujet d’intérêt pour beaucoup d’utilisateurs, alors ne soyez pas timides et si vous avez des doutes laissez un message, nous vous répondrons dès que possible !

Pour continuer votre lecture voici quelques articles similaires

Pas encore de commentaire, ajoutez le votre ci-dessous!


Ajouter un commentaire

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