Vous souhaitez ajouter une bordure autour de vos images dans WordPress ? Récemment, l’un de nos utilisateurs nous a demandé un moyen simple d’ajouter une bordure autour d’une image dans WordPress. Bien que vous puissiez utiliser CSS, c’est déroutant pour les débutants. Dans cet article, nous allons vous montrer un moyen simple d’ajouter une bordure d’image dans WordPress sans modifier de code HTML ou CSS.
Didacticiel vidéo
Si vous n’aimez pas la vidéo ou si vous avez besoin de plus d’instructions, continuez à lire.
Méthode 1 : Utilisation d’un plugin pour ajouter une bordure d’image dans WordPress
Cette méthode est destinée aux débutants qui ne souhaitent pas éditer de code HTML ou CSS. La première chose à faire est d’installer et d’activer le Bordures d’image WP brancher. Lors de l’activation, vous devez visiter Paramètres » WP Bordures d’image pour configurer les paramètres du plugin.
La première section dans les paramètres du plugin vous permet de cibler des images. Vous pouvez ajouter des bordures à toutes les images de vos publications WordPress en cochant la case à côté de « Ajouter des bordures à toutes les images dans les articles de blog » option.
Alternativement, vous pouvez cibler des classes CSS spécifiques pour avoir des bordures. Nous vous montrerons comment ajouter une classe CSS à une image spécifique plus loin dans cet article. En ce moment, vous pouvez mettre n’importe quoi dans la classe CSS comme .border-image.
La deuxième section des paramètres du plugin vous permet de personnaliser les paramètres de bordure. Vous pouvez choisir un style de bordure, une largeur, un rayon et une couleur.
La dernière section de la page des paramètres vous permet d’ajouter des ombres portées à vos images. Vous pouvez entrer une distance horizontale et verticale, un rayon de flou et de propagation, ainsi que la couleur de l’ombre de la boîte. Si vous ne souhaitez pas ajouter d’ombres portées à vos images, vous pouvez simplement laisser ces champs vides.
N’oubliez pas de cliquer sur le bouton Enregistrer les modifications pour enregistrer les paramètres de votre plugin.
Si vous avez sélectionné la première option « Ajouter des bordures à toutes les images dans les articles de blog », vous n’avez rien d’autre à faire.
Vous devriez voir des bordures d’image sur toutes les images de vos articles de blog.
Cependant, si vous avez sélectionné la deuxième option pour afficher uniquement la bordure pour des images spécifiques, vous devez suivre l’étape suivante.
Ajouter une classe CSS à une image dans WordPress
Si vous souhaitez uniquement ajouter des bordures autour des images sélectionnées, vous devrez alors indiquer à WordPress quelles images doivent avoir des bordures. Vous pouvez le faire en ajoutant une classe CSS aux images qui ont besoin de bordures.
Téléchargez simplement votre image et ajoutez-la à votre message. Après avoir ajouté l’image, cliquez dessus dans l’éditeur visuel, puis cliquez sur le bouton Modifier dans la barre d’outils.
Cela fera apparaître une fenêtre contextuelle d’édition d’image montrant les détails de votre image. Vous devez cliquer sur les options avancées pour le développer, puis entrer la classe css de votre image.
Indice : c’est .border-image parce que nous l’avons sélectionné dans nos paramètres de plugin.
Ensuite, cliquez sur le bouton de mise à jour pour enregistrer et mettre à jour les paramètres de l’image. C’est tout, votre image aura désormais une classe supplémentaire. Puisque vous utilisez le plugin WP Image Borders, une bordure apparaîtra sur cette image.
Méthode 2 : Utilisation de HTML et CSS pour ajouter des bordures d’image dans WordPress
L’ajout de bordures d’image à l’aide de CSS/HTML est un moyen de plus en plus rapide d’obtenir des bordures autour de vos images dans WordPress. Il existe de nombreuses façons de le faire, et nous vous les montrerons toutes. Vous pouvez choisir ce qui vous convient le mieux.
Ajout de bordures à l’aide de styles en ligne dans WordPress
Après avoir téléchargé et inséré votre image dans un article WordPress, passez à l’éditeur de texte. Vous verrez le code HTML de votre image. Cela ressemblera à quelque chose comme ceci :
<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 un style CSS dans le code HTML comme ceci :
<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;" />
N’hésitez pas à modifier la largeur, la couleur, le remplissage et la marge de la bordure selon vos propres besoins.
Ajout d’une bordure d’image dans votre thème WordPress ou votre thème enfant
Si vous souhaitez ajouter de manière permanente des bordures à toutes les images de vos articles et pages de blog WordPress, vous pouvez ajouter du CSS directement dans votre thème WordPress ou votre thème enfant.
La plupart des thèmes WordPress ont déjà ces règles de style définies dans la feuille de style du thème qui est généralement le fichier style.css. Vous pouvez modifier le CSS existant ou ajouter votre propre CSS dans un thème enfant.
WordPress ajoute des classes d’images par défaut à toutes les images. Afin de vous assurer que les images de vos articles/pages ont une bordure d’image, vous devez cibler toutes ces classes. Voici un extrait CSS simple pour vous aider à démarrer :
img.alignright {
float:right;
margin:0 0 1em 1em;
border:3px solid #EEEEEE;
}
img.alignleft {
float:left;
margin:0 1em 1em 0;
border:3px solid #EEEEEE;
}
img.aligncenter {
display: block;
margin-left: auto;
margin-right: auto;
border:3px solid #EEEEEE;
}
img.alignnone {
border:3px solid #EEE;
}
Si vous souhaitez utiliser uniquement les bordures d’image lorsque vous en avez besoin, vous pouvez ajouter une classe CSS à vos images (voir ci-dessus). Ajoutez des règles de style pour cette classe CSS dans votre thème ou thème enfant.
img.border-image {
border: 3px solid #eee;
padding:3px;
margin:3px;
}
Nous espérons que cet article vous a aidé à ajouter une bordure d’image autour des images de votre blog WordPress. Vous pouvez également consulter notre guide sur la façon d’enregistrer des images optimisées pour le Web afin d’accélérer votre site WordPress.
