Souhaitez-vous ajouter des contours sur une image de site WordPress ? Récemment, un de nos abonnés nous a demandé quelle était la méthode  la plus simple pour ajouter des bordures sur WordPress.

S’il est vrai que la méthode la plus simple est d’utiliser un code CSS, cette méthode n’est pas toujours à la portée des débutants.

Dans ce tutoriel, je vous montrerai comment ajouter des bordures images de votre blog WordPress sans toucher une seule ligne de code.

Première méthode : En utilisant un plugin

Cette méthode est plus adaptée aux débutants qui ne souhaitent pas utiliser un code HTML/CSS. La première chose à faire est d’installer et d’activer le plugin WP Image Border disponible sur WordPress.org.

Il vous suffit désormais d’accéder à la section « réglages > WP Image Borders » pour afficher les réglages du plugin.

La première section du plugin vous permet de cibler les images. Vous pouvez ajouter des bordures à toutes les images sur vos blogs WordPress en cliquant sur la case à cocher  en cliquant  sur la case « add borders to all images in blog posts« .

Alternativement, vous pouvez spécifier des classes pour ajouter des bordures sur certaines images, en spécifiant ces dernières dans la zone de texte « Add specific classes here« .

La seconde option vous permet de personnaliser les bordures des images. Vous pouvez choisir le style des bordures, sa largeur, sa rondeur et sa couleur.

La dernière  section dans cette page vous permet d’ajouter une ombre aux bordures. Il est possible de définir la position de l’ombre et de son intensité. Si vous ne souhaitez  pas ajouter cette option, vous pouvez laisser ces champs vides.

N’oubliez pas de sauvegarder vos réglages une fois que vous aurez fini.

Si vous avez choisi d’afficher les bordures sur toutes les images des articles de votre blog, vous remarquerez les modifications sur toutes les images des vos articles.

Comment ajouter une classe sur des images sur WordPress

Si vous souhaitez ajouter des bordures aux images sélectionnées, vous devez toujours dire a WordPress qu’elles sont les images que vous avez sélectionnée , et pour ce faire il est indispensable d’ajouter des classes aux images.

Lorsque vous vous trouvez sur l’éditeur de texte de WordPress, en cliquant sur une des images, vous remarquerez une info-bulle qui propose des options supplémentaires. Cliquez sur l’icône modifier pour ajouter une classe personnalisée à l’image en question.

image

En cliquant dessus, une nouvelle fenêtre  s’affichera. C’est sur cette fenêtre que vous pourrez ajouter une classe personnalisée.

image

Il vous faudra cliquer sur la case dépliante « options avancées« , ce qui fera apparaître deux zones de texte supplémentaires. C’est dans la case « classe CSS de l’image » que vous pourrez ajouter une classe  l’image.

Deuxième méthode : en utilisant un code HTML et CSS

Ajouter des bordures sur des images en utilisant un code HTML et CSS est une méthode rapide. Il existe plusieurs moyens d’arriver à vos fins, je vous montrerai chacune des méthodes, et vous choisirez celles qui vous correspond.

Comment ajouter des bordures en une ligne sur WordPress

Après avoir envoyer une image sur la médiathèque, vous devez basculer en mode éditeur de texte. Vous remarquerez le code HTML correspondant à votre image. Ce code sera similaire à ce qui suit :

image-code

Il vous suffit ensuite d’ajouter un code CSS dans la même ligne de l’image. Ce code sera similaire au code suivant:

image-code-2

Vous remarquerez qu’un attribut « style » a été ajouté sur le code. Vous pourrez utiliser les différentes propriétés du langage CSS pour personnaliser la bordure (Bien évidemment cette manœuvre est réservée aux utilisateurs expérimenté).

C’est tout pour ce tutoriel, j’espère qu’il vous aidera à ajouter effectivement des bordures à vos images sur WordPress.