Comment rendre les images WordPress responsive mobile ?

Avec l’arrivée des smartphones et des tablettes sont arrivés les thèmes responsive design (qui s’adaptent à la taille de votre écran), et avec ceux-ci sont arrivés différents problèmes d’ergonomies comme les images qui restent à leur taille originale et ne s’adaptent pas au design dans vos billets.

Comment faire pour que les images WordPress soient Responsive dans un article ?

Si vous voulez que vos images changent de taille en fonction de l’écran de votre lecteur et en fonction de votre thème, le procédé est assez simple ! En effet WordPress définit par défaut des tailles types pour chacune des versions de votre image ( par défaut : taille vignette, taille moyenne et grande taille. )

Pour rendre les images réponsives il suffit donc de supprimer la fonction qui génère ces tailles afin de laisser les images s’adapter elles-même à la taille de votre écran :

Pour rendre les images WordPress responsive mobile, ajoutez cette fonction à votre fichier functions.php

function wppln_responsive_images( $html ) {
    $html = preg_replace( '/(width|height)="\d*"\s/', "", $html ); return $html;
}
add_filter( 'post_thumbnail_html', 'wppln_responsive_images', 10 );
add_filter( 'image_send_to_editor', 'wppln_responsive_images', 10 );
add_filter( 'wp_get_attachment_link', 'wppln_responsive_images', 10 );

Gregory

Agitateur de Stratégies, addict à WordPress depuis 2003, fada de Google depuis 1998. Incubateur Digital, j'accompagne au quotidien plusieurs entreprises et indépendants dans la gestion de leur stratégie digitale et l'optimisation de leurs sites WordPress. Basé à Aix-en-Provence, je suis à l'écoute de votre projet si vous avez besoin d'un expert WordPress.

Vous aimerez aussi

Laisser un commentaire

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