Comment ajouter une bordure autour d'une image dans WordPress

Voulez-vous ajouter une bordure autour de vos images dans WordPress? Récemment, 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, cela crée de la confusion pour les débutants. Dans cet article, nous allons vous montrer un moyen simple d’ajouter une bordure d’image dans WordPress sans modifier le 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: Utiliser 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 plugin WP Image Borders. Lors de l'activation, vous devez visiter Paramètres »Bordures d'image WP configurer les paramètres du plugin.

La première section des paramètres du plug-in vous permet de cibler des images. Vous pouvez ajouter des bordures à toutes les images de vos publications WordPress en cochant la case en regard de "Ajouter des bordures à toutes les images des articles de blog" option.

Alternativement, vous pouvez cibler des classes CSS spécifiques pour avoir des bordures. Nous allons vous montrer comment ajouter une classe CSS à une image spécifique plus tard dans cet article. En ce moment, vous pouvez mettre quelque chose dans la classe CSS comme .image de bordure.

La deuxième section des paramètres du plug-in vous permet de personnaliser les paramètres de bordure. Vous pouvez choisir un style, une largeur, un rayon et une couleur de bordure.

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 flou et un rayon étendu, 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 des articles de blog", alors vous n'avez rien d'autre à faire.

Vous devriez voir des bordures d'images sur toutes les images de vos publications sur votre blog..

Toutefois, 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 devez indiquer à WordPress quelles images doivent avoir des bordures. Vous pouvez le faire en ajoutant une classe CSS aux images nécessitant des 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 d'édition dans la barre d'outils..

Cela fera apparaître une fenêtre d'édition d'image montrant les détails de votre image. Vous devez cliquer sur les options avancées pour le développer, puis entrez la classe css de votre image..

Indice: c'est .image de bordure parce que nous avons sélectionné cela 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 maintenant 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'images à l'aide de CSS / HTML est un moyen plus rapide et plus rapide d'obtenir des bordures autour de vos images dans WordPress. Vous pouvez le faire de nombreuses façons 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 pour votre image. Cela ressemblera à ceci:

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

N'hésitez pas à modifier la largeur, la couleur, le rembourrage et la marge de la bordure en fonction de vos besoins.

Ajouter 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 un 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 publications / pages ont une bordure d'image, vous devez cibler toutes ces classes. Voici un extrait de code CSS simple pour vous aider à démarrer:

 img.alignright float: right; marge: 0 0 1em 1em; bordure: 3px solide #EEEEEE;  img.alignleft float: left; marge: 0 1em 1em 0; bordure: 3px solide #EEEEEE;  img.aligncenter display: block; marge gauche: auto; marge droite: auto; bordure: 3px solide #EEEEEE;  img.alignnone border: 3px solid #EEE;  

Si vous souhaitez utiliser uniquement les bordures d'images lorsque vous en avez besoin, vous pouvez ajouter une classe CSS à vos images (voir ci-dessus). Ajouter des règles de style pour cette classe CSS dans votre thème ou thème enfant.

 img.border-image border: 3px solid #eee; rembourrage: 3px; marge: 3px;  

Nous espérons que cet article vous a aidé à ajouter une bordure d’image autour des images de votre blog WordPress. Vous voudrez peut-être aussi consulter notre guide sur la façon de sauvegarder des images optimisées pour le Web afin d’accélérer votre site WordPress.

Si vous avez aimé cet article, abonnez-vous à nos tutoriels vidéo sur la chaîne YouTube pour WordPress. Vous pouvez aussi nous trouver sur Twitter et Facebook.