Atelier Wordpress


Trucs et astuces de votre CMS préféré

Catégories


Atelier Wordpress

/ 0

Astuces

Ajouter une bordure à vos images sur WordPress

9 juin 2015

Voici différents moyens simples d’ajouter une bordure sur vos images WordPress.

Utiliser le plugin WP Image Border

Après l’installation et l’activation de ce plugin, vous devez configurer ses paramètres (largeur, style, couleurs… de la bordure). Il est possible d’ajouter des bordures à l’ensemble de vos images WordPress en cochant la case correspondante ou à l’inverse utiliser des classes CSS spécifiques pour ajouter des bordures à quelques images seulement (ex : .border-image). Vous pouvez également ajouter des ombres portées à vos images.

Si vous avez coché la première option pour ajouter les bordures à l’ensemble des images, votre configuration s’arrête là. Sinon voici les étapes à suivre.

Ajout de classe CSS à une image WordPress

Pour ajouter des bordures à quelques images seulement, vous devez dire à WordPress quelles images vous choisissez pour cela en ajoutant une classe CSS pour chaque image.

Lorsque vous téléchargez votre image, cliquer dessus puis sur le bouton « Modifier ». Dans la rubrique « Options avancées » > « Classe CSS de l’image », tapez simplement la classe CSS que vous avez initialement choisie dans le plugin (ici : .border-image). En effectuant cette manipulation, seules les images que vous aurez choisies disposeront d’une bordure.

Utiliser le langage HTML ou CSS

C’est un moyen plus rapide d’obtenir des bordures autour de vos images WordPress. Et il y a plusieurs méthodes pour ce faire.

Utilisation des styles en ligne 

Après le téléchargement et l’insertion de votre image dans votre page WordPress, passez en mode « Texte » et observez le code HTML de votre image.

1 <img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird"width="300" height="203" class="alignnone size-medium wp-image-36" />

Vous pouvez facilement ajouter du style CSS dans le code HTML comme ceci :

1 <img src="http://www.example.com/wp-content/uploads/2015/04/bluebird-300x203.jpg" alt="bluebird"width="300" height="203" class="alignnone size-medium wp-image-36" style="border:3px solid #eeeeee; padding:3px; margin:3px;"/>

Ainsi, vous pouvez personnaliser comme vous le souhaitez, la largeur de la bordure, sa couleur, son remplissage…

Ajout de bordures dans votre thème WordPress

Si vous souhaitez que la bordure apparaisse systématiquement sur vos images WordPress, vous pouvez ajouter du langage CSS directement dans votre thème WordPress.

La plupart des thèmes ont des règles de style déjà définies dans leur feuille de style (fichier style.css). Mais il est possible de modifier le CSS existant en ajoutant votre propre langage CSS.

Voici un extrait de CSS simple pour vous aider à démarrer :

01 img.alignright {
02 float:right;
03 margin:0 0 1em 1em;
04 border:3px solid #EEEEEE;
05 }
06 img.alignleft {
07 float:left;
08 margin:0 1em 1em 0;
09 border:3px solid #EEEEEE;
10 }
11 img.aligncenter {
12 display: block;
13 margin-left: auto;
14 margin-right: auto;
15 border:3px solid #EEEEEE;
16 }
17 img.alignnone {
18 border:3px solid #EEE;
19 }

Vous pouvez ajouter une classe CSS à votre image comme ceci.

1 img.border-image {
2 border: 3px solid #eee;
3 padding:3px;
4 margin:3px;
5 }

Sources :

Pour en savoir plus sur les différentes méthodes d’ajouter des bordures à vos images sur WordPress, consultez l’article source de WPbeginner.

Business vector designed by Freepik

Commentaires

Il n'y a aucun commentaire.

*