Comment adapter les images en responsive dans WordPress ?

wordpress
CN
Par Seb, spécialiste de la thématique Wordpress

Ajout de CSS pour les images responsives

Pour que les images soient réactives dans WordPress, vous pouvez ajouter du CSS supplémentaire. Ensuite, toutes les images que vous ajoutez s'adapteront automatiquement à la taille de l'écran de l'utilisateur. Voici comment vous pouvez le faire:

  1. Dans votre tableau de bord WordPress, accédez à Apparence > Personnaliser > CSS supplémentaire.
  2. Ajoutez le code CSS suivant :img {max-width: 100%;height: auto;}.
  3. Cliquez sur Publier pour enregistrer vos modifications.

Utilisation de Gutenberg pour des images responsives

Si vous utilisez le nouvel éditeur Gutenberg dans WordPress, il offre des options intégrées pour rendre les images réactives.

  1. Ouvrez l'éditeur Gutenberg et sélectionnez l'image que vous souhaitez rendre responsable.
  2. Sous les paramètres de l'image, vous verrez une option pour "Redimensionner pour les appareils mobiles".
  3. Vous pouvez également définir la largeur et la hauteur de l'image pour différents appareils.

Utilisation de plugins pour des images responsives

Si vous ne voulez pas toucher au code ou traiter avec le CSS, vous pouvez utiliser un plugin pour rendre vos images réactives. Il existe de nombreux plugins disponibles comme Smush, Jetpack qui dispose d'un module d'images adaptatives, ou le plugin WP Retina 2x pour servir des images haute résolution.

  1. Regardez la bibliothèque de plugins WordPress et choisissez celui qui vous convient le mieux.
  2. Une fois que vous avez installé et activé le plugin, allez dans ses paramètres et suivez les instructions pour rendre vos images responsives.

N'oubliez pas de tester votre site sur différents appareils et tailles d'écran pour vous assurer que vos images sont correctement affichées.

Autres articles sur la thématique Wordpress