Sommaire
Vous souhaitez créer des bordures pour toutes vos images dans WordPress ? Les images permettent d’améliorer votre contenu et peuvent même être le contenu par elles-mêmes. Malheureusement, les images peuvent parfois être difficiles à voir si elles se fondent dans la couleur de fond. C’est pourquoi les bordures sont le meilleur moyen de séparer l’image du fond sur tous les sites web.
Il existe de multiples façons d’ajouter des bordures à vos images dans WordPress. Pour commencer, vous pouvez ajouter une bordure avant même d’importer une image dans WordPress. Si vous créez vos images avec Photoshop ou un logiciel de retouche photo similaire, vous pouvez simplement ajouter la bordure lors de la création. De cette façon, vous n’aurez pas à télécharger un nouveau plugin ou à modifier le code. Aujourd’hui, je vais vous montrer comment créer une bordure pour vos images dans WordPress en utilisant deux méthodes.
Pourquoi créer une bordure pour vos images dans WordPress
Les frontières sont le meilleur moyen de permettre à votre visiteur de séparer plus facilement une image du fond. Les sites web personnalisent leur arrière-plan pour se démarquer de la concurrence. Sur un site web, vous pouvez voir un fond de couleur unie, tandis que sur un autre, vous voyez un motif de lignes rayées. En plus de changer les couleurs, certains développeurs de sites web utilisent également des images pour l’arrière-plan.
Il peut donc être extrêmement difficile de voir certaines images selon leur degré d’intégration. Ce n’est peut-être pas un problème pour les jeunes publics qui ont une meilleure vision, mais si votre public est un peu plus âgé, vous risquez de perdre des visiteurs. Il est très important de comprendre l’âge de votre public lorsque vous gérez un site web. Cela vous aide à choisir ce qui est important pour eux.
Comment créer une bordure pour vos images dans WordPress
Aujourd’hui, je vais vous montrer comment créer une bordure pour vos images dans WordPress en utilisant deux méthodes. La première méthode sera utilisée avec le plugin WP Image Borders. Vous remarquerez peut-être qu’il s’agit d’un ancien plugin mais que la plupart fonctionne encore avec la version 4.9.1 de WordPress qui est la version actuelle au moment de la rédaction de ce billet. Si vous voulez des bordures pour toutes vos images, le plugin fonctionne parfaitement. La deuxième méthode consiste à ajouter du CSS personnalisé à votre site web mais si vous n’êtes pas à l’aise avec l’ajout de code à votre site web, je vous recommande d’utiliser le plugin.
Pour commencer, cliquez sur Plugins et sélectionnez l’option Add New dans le panneau d’administration de gauche.
Cherchez WP Image Background dans la boîte de recherche disponible. Vous obtiendrez ainsi des plugins supplémentaires qui pourraient vous être utiles.
Faites défiler vers le bas jusqu’à ce que vous trouviez le plugin WP Image Background et cliquez sur le bouton “Install Now” et activez le plugin pour l’utiliser.
Dans le panneau d’administration de gauche, cliquez sur Paramètres et sélectionnez l’option Frontières d’images WP. La page principale des paramètres s’affichera alors.
La page des paramètres est très simple. Elle vous permet soit de sélectionner toutes les images, soit de les sélectionner manuellement et de choisir à quoi ressemble la bordure. Le plugin n’a pas été mis à jour depuis très longtemps et pour que ce plugin fonctionne, vous devez cocher la case.
Cochez la case pour sélectionner toutes les images et personnaliser votre bordure. L’option de personnalisation la plus importante est la couleur que vous choisissez. Assurez-vous qu’elle est différente de la couleur de fond ou de l’image que vous utilisez. L’ajout d’une bordure de même couleur irait à l’encontre du but recherché. Vous pouvez modifier ces paramètres à tout moment, alors n’hésitez pas à tester ce qui vous convient le mieux. Cliquez sur le bouton “Enregistrer les modifications” lorsque vous avez terminé.
Votre bordure sera désormais active si vous avez choisi de sélectionner toutes les images. La bordure ne sera pas visible dans l’éditeur, mais vous pouvez la voir sur la page en direct ou la page d’aperçu.
La deuxième méthode est préférée par la plupart des développeurs web car vous n’aurez pas besoin d’ajouter un plugin à votre site web. Chaque plugin supplémentaire que vous ajoutez à votre site web le ralentira. L’ajout de code personnalisé est très facile dans WordPress et c’est ce qui rend la plateforme accessible aux débutants.
La première méthode de codage appliquera la bordure à toutes vos images. Si vous souhaitez des bordures individuelles, passez cette partie. Dans le panneau d’administration de gauche, cliquez sur Apparences et sélectionnez l’option Personnaliser. Cliquez sur la case CSS supplémentaire. Insérez le code suivant dans la zone de texte:
img.alignright {
float:right ;
marge:0 0 1em 1em ;
border:2px solid #000000 ;
img.alignleft {
float:left;
marge:0 1em 1em 0 ;
border:2px solid #000000 ;
img.aligncenter {
affichage : bloc ;
marge-gauche : auto ;
marge-droite : auto ;
border:2px solid #000000 ;
img.alignnone {
border:2px solid #000000 ;
Le code 000000 est un noir profond. N’hésitez pas à changer cette couleur pour l’adapter à vos besoins. Vous pouvez également ajuster l’épaisseur de la bordure. Vous pouvez maintenant consulter les modifications sur votre site web.
Ajouter des bordures individuelles à vos images est très facile, mais peut être très fastidieux. Chaque image que vous ajoutez dans l’éditeur visuel possède un code HTML créé dans l’éditeur de texte. Vous pouvez modifier le code de l’éditeur de texte pour ajouter une bordure.
Félicitations, vous avez réussi à ajouter des bordures à vos images WordPress. Vous pouvez modifier l’aspect de la bordure à tout moment, quelle que soit la méthode utilisée. Si vous avez choisi d’utiliser le plugin, une fois que vous serez plus à l’aise avec l’édition de code, je vous recommanderais d’utiliser la deuxième méthode car elle est plus efficace.
Faire en sorte que la frontière fasse la différence
Même si la frontière est en place, elle peut ne pas être utile. Par exemple, si vous avez une couleur de fond noire et que vous choisissez d’utiliser une bordure noire, rien ne changera. Vous devez utiliser une couleur qui se distingue sur votre site web. Dans cet exemple, une couleur de bordure blanche serait un bon choix. Il est également judicieux d’utiliser des couleurs qui peuvent correspondre à votre thème, mais qui se distinguent. Tant que la bordure sépare clairement l’image de la couleur de fond, tout ira bien.
Quelle couleur avez-vous choisi pour votre frontière ? Quelle méthode avez-vous utilisée pour ajouter la bordure ? Vous sentez-vous mal à l’aise d’utiliser d’anciens plugins qui n’ont pas été mis à jour depuis un certain temps ?
