code css pour centrer des images dans wordpress
Wordpress

Comment centrer automatiquement toutes ses images dans son blog WordPress ?

Alors je ne sais pas toi, mais personnellement j’en pouvais plus de centrer mes images une par une dans mes articles. Surtout dans mes articles listes ou tuto où je mets beaucoup d’images pour illustrer ! Alors je me suis demandée comment faire pour que les images de mon blog soient centrées automatiquement ?

Et bien, il n’y a pas 36 moyens, le plus simple étant d’utiliser les CSS une fois de plus, comme je l’ai fait pour supprimer systématiquement la date et l’auteur dans mes articles.

Je vais vous montrer pas à pas comment faire. Ce n’est pas très compliqué, vous allez voir, c’est même super simple ! 😊

Sachez néanmoins qu’il existe 2 façons dans WordPress pour personnaliser le code css, selon vos préférences et votre niveau d’expérience.

  1. Utiliser l’éditeur de thème WordPress : Si vous êtes à l’aise avec la modification de fichiers de thème, vous pouvez ajouter le code CSS directement dans le fichier style.css de votre thème WordPress. Pour cela, accédez à Apparence > Éditeur dans votre tableau de bord WordPress, sélectionnez le fichier style.css et ajoutez le code CSS à la fin du fichier.
  2. Utiliser un plugin de personnalisation de CSS : Si vous préférez éviter de modifier directement les fichiers de thème, vous pouvez utiliser un plugin de personnalisation de CSS comme Simple Custom CSS ou WP Add Custom CSS. Ces plugins vous permettent d’ajouter du code CSS personnalisé sans toucher aux fichiers de thème.
  3. Utiliser un plugin de mise en page : Si vous voulez une solution plus conviviale et visuelle pour ajouter du CSS personnalisé à votre site WordPress, vous pouvez utiliser un plugin de mise en page comme Elementor ou Beaver Builder. Ces plugins vous permettent de personnaliser facilement la mise en page de votre site WordPress sans avoir à écrire de code CSS.
  4. Dernière façon, la plus simple à mon sens, mais après cela va dépendre si la possibilité de le faire est prévue avec votre thème, mais cela reste le cas dans la majorité des thèmes WordPress, et je l’ai sur les 3 différents thèmes de mes 3 blogs : utiliser la fonctionnalité CSS intégrée dans les éléments de personnalisation du thème.

Dans tous les cas, avant de modifier le code de votre site WordPress, il est recommandé de sauvegarder votre site et de tester les modifications sur un site de test ou un environnement de développement.

Maintenant, c’est parti pour centrer automatiquement toutes les images de votre site WordPress en 5 minutes chrono !

1 – Il faut aller tout d’abord dans le menu Apparence > Personnaliser

menu apparence et personnaliser dans wordpress

2 – Aller dans le menu tout en bas à gauche : CSS additionnel

css additionnel theme wordpress

3 – Ajouter ce code css : celui souligné en rose.

code css pour centrer automatiquement ses images de son blog wordpress

Pour aligner automatiquement une image dans un article de blog WordPress :

img {
display: block;
margin: 0 auto;
}

Ce code CSS utilise la propriété display pour changer le type d’affichage de l’image en bloc, ce qui lui permet d’occuper toute la largeur disponible.

Ensuite, la propriété margin est utilisée pour aligner automatiquement l’image horizontalement en la centrant.

Les 2 dernières lignes servent à ajouter de l’espace avant et après l’image, si cela vous intéresse aussi, vous pouvez les ajouter également, et ajuster la taille de l’espace en fonction de ce qui vous convient 😉

Ensuite, vous n’avez plus qu’à publier vos changements (bouton en haut du panneau de personnalisation) pour voir toutes vos images centrées automatiquement comme par magie dans tous les articles de votre blog WordPress !! 🤩

2 commentaires

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *