skip to Main Content

Comment les images responsives sont gérées par WordPress

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 701.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

Alors que l’adoption croissante des images responsive ne peut être ignorée, il peut être très difficile d’employer la fonctionnalité sous les contraintes d’un grand CMS comme WordPress. Bien qu’il soit tout à fait possible de concevoir la fonctionnalité dans votre thème vous-même, le faire est une entreprise difficile et cela prend du temps.

Heureusement, avec le lancement de WordPress 4.4, les développeurs de thème et de plugins auront une possibilité d’utiliser les images responsives dans leurs produits. Depuis le début de cette version, le plugin « Responsive Images RICG » a été fusionné ajouté au noyau WordPress, ce qui signifie que la prise en charge des images responsives est maintenant comme une fonctionnalité interne par défaut de WordPress. Jetons un coup d’œil à la façon dont cela fonctionne, et sur comment vous pouvez l’utiliser pour obtenir le meilleur sur votre site WordPress.

responsive-image-trac-wordpress

Comment les images responsives fonctionnent

Dès que vous passerez vers WordPress 4.4, l’ensemble de votre contenu et les images auront les attributs « srcset » et « sizes », qui sont filtrés pour garantir que chaque taille d’image disponible existe, tout en maintenant la dimension de l’image demandée originale. Il est important de noter que les redimensionnements personnalisés seront ignorés de l’attribut « srcset » si le rapport d’aspect diffère de l’image d’origine demandée. En outre, en appelant une image via la fonction « wp-get-attachment-image » cela renverra une image responsive également.

Les « Images Responsive » est une caractéristique de fond, ce qui signifie que tout se passe automatiquement à chaque fois qu’un utilisateur envoie une image sur WordPress par l’interface de téléchargement de médias. Lorsqu’une image apparaît sur une page, elle aura l’attribut « srcset » et « sizes » à la suite de ce processus d’arrière-plan.

Cela signifie que la nouvelle fonctionnalité des images responsives n’aura pas d’interface utilisateur visible. Il n’y a pas d’options pour basculer, des formulaires à remplir, ou des cases à cocher. Cela étant dit, les développeurs de thème devraient modifier leurs fichiers « functions.php » pour que leurs images aient une précision avec l’attribut « sizes ». En effet, lorsque nous parlons d’images responsives sur WordPress, nous parlons spécifiquement des attributs « srcset »et  « sizes » qui se retrouvent sur la balise de l’image.

Alors que WordPress fait un travail exceptionnel à insérer toutes les tailles disponibles dans l’attribut « srcset », l’attribut « sizes » est un peu plus difficile à prévoir. En effet, l’attribut « sizes » est responsable de dire au navigateur comment l’image selon les dimensions disponible de la fenêtre. Etant donné que l’information sera différente en fonction du style du thème de l’utilisateur, le mieux que nous puissions faire est de fournir une valeur par défaut raisonnable comme suit :

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

sizes="(max-width: {{image-width}}) 100vw, {{image-width}}"

Cet attribut par défaut « sizes » accomplit deux choses. Tout d’abord, il s’assure qu’un attribut valide « sizes » existe sur l’image, ce qui est récemment devenu une exigence obligatoire selon la spécification. En second lieu, il s’assure que le navigateur ne fournit pas une source d’image qui est supérieure à la largeur d’origine demandée. En cas de manipulation CSS la taille de l’image sera différentes en fonction des largeurs des fenêtres, par contre la valeur par défaut « sizes » deviendra devient moins utile.

Étant donné que l’attribut par défaut « sizes » aidera seulement avec des images qui ne sont pas altérées par CSS, des crochets de filtre seront disponibles pour permettre aux développeurs de thème de régler l’attribut « sizes » de chaque image, s’assurant qu’un parfait attribut « sizes » soit livré à chaque point d’arrêt.

Il est important de noter ici que, si possible, votre thème ne devrait pas compter sur la valeur par défaut de l’attribut « sizes« pour fournir des informations exactes sur la prise en charge des images responsives. En effet, l’attribut par défaut « sizes » ne permet pas au navigateur de changer la source de l’image lorsque la fenêtre est plus petite que la taille originale de l’image demandée. Il ne sera également pas être en mesure de changer la source si l’image est modifiée avec du CSS à un point d’arrêt, lorsque l’image peut-être plus grande que la taille d’origine demandée.

Si vous êtes un développeur de thèmes ou avez accès à une base de code WordPress, filtrer les images de votre thème pour fournir une précision avec l’attribut « sizes » est l’une des choses les plus importantes que vous pouvez faire après la nouvelle version qui sera bientôt disponible. Ce qui suit est un exemple de crochet dans la fonction « wp_calculate_image_sizes », que vous pouvez développer pour l’adapter à votre thème.

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

function adjust_image_sizes_attr( $sizes, $size ) {
   $sizes = '(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 1362px) 62vw, 840px';
   return $sizes;
}
add_filter( 'wp_calculate_image_sizes', 'adjust_image_sizes_attr', 10 , 2 );

Dans cet exemple, le crochet s’appliquera à tous les contenus y compris les images à la une et les miniatures. Une logique supplémentaire peut être ajouté pour faire en sorte que différents types d’images aient des valeurs différentes.

code-source-wp-image-responsive

De nouvelles fonctions ont été ajoutées pour que l’attribut « srcset » et  « sizes » puissent être ajoutés à une image qui a été ajouté à WordPress à travers le gestionnaire de médias, en plus des images ajoutées pour afficher le contenu. La fonction « wp_get_attachment_image_sizes » renverra un attribut par défaut « sizes », qui peut être modifié par un filtre de votre thème dans le fichier « functions.php ». La fonction wp_get_attachment_image_srcset renverra un attribut « srcset » qui contiendra toutes les tailles disponibles de l’image demandée. Une documentation et des exemples d’utilisation de ces nouvelles fonctions peuvent être trouvées le répertoire référence des développeurs.

Configuration Images Responsive pour votre thème

Avec les nouvelles fonctions viennent plusieurs nouveaux crochets qui peuvent être utilisés pour fournir un nouveau niveau de prise en charge des images responsives, ce qui correspond le mieux à votre thème. Le crochet « max_srcset_image_width » permettra au développeur du thème de filtrer la largeur maximale de l’image à inclure dans l’attribut « srcset ». Le crochet « wp_calculate_image_srcset » filtrera les attributs « srcset » des images, tandis que le crochet (filtre) « wp_calculate_image_sizes » permettra au développeur de thème de personnaliser l’attribut « sizes » afin qu’il corresponde mieux aux points d’arrêt d’image dans leur thème.

Si vous êtes à la recherche d’un exemple sur la meilleure façon de filtrer l’attribut « sizes » d’une image, le nouveau thème twentysixteen sera un parfait exemple. Dans le fichier functions.php de ce thème, les deux dernières fonctions filtrent l’attribut « sizes » pour répondre aux différents points d’arrêt d’image à l’intérieur du thème.

filtres responsive image tutoriel WordPress#

La mise à jour vers WordPress 4.4 signifie que les utilisateurs bénéficieront immédiatement de la compatibilité avec les images responsives, ce qui favorisera l’affichage des images claires et nettes selon chaque taille des fenêtres et de la densité des pixels. Cela se traduira également par une augmentation des performances, puisque les pages n’auront plus à charger longtemps de grandes images lourdes. Bien que ce soit un processus automatique pour les utilisateurs, les développeurs de thème devront ajuster leurs tailles d’images pour leurs thèmes.

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

C’est tout pour ce tutoriel, j’espère qu’il vous permettra de mieux comprendre l’importance et le concept des images responsives sur WordPress. N’hésitez pas à partager ce tutoriel avec vos amis sur vos réseaux sociaux préférés.

 

Cet article comporte 0 commentaires

Laisser un commentaire

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

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top