Importance des images responsives dans WordPress Core

La popularité des images réactives augmente et c'est quelque chose que personne ne peut ignorer. Cependant, utiliser la même fonctionnalité dans un CMS populaire comme WordPress peut être une expérience difficile. La tâche peut prendre beaucoup de temps, même s'il est possible pour les utilisateurs d'écrire eux-mêmes une fonctionnalité dans le thème. Mais les choses ont radicalement changé depuis l'introduction de WordPress 4.4, ce qui permet aux développeurs et aux administrateurs d'intégrer plus facilement la fonctionnalité d'image réactive dans leurs thèmes.

Le point culminant principal comprend la disponibilité du plug-in Responsive Images dans le noyau WordPress. Cela signifie que les utilisateurs peuvent désormais profiter de la prise en charge des images réactives, qui est une fonctionnalité par défaut de WordPress. Examinons de près le fonctionnement réel de cette fonctionnalité et la manière dont elle peut être utilisée avec précaution afin d'exploiter le potentiel du site WordPress.

Fonctionnement de la fonctionnalité

Tout le contenu et les images seront composés d' attributs srcset et tailles une fois que vous aurez mis à jour vers WordPress 4.4. Il s'agit principalement d'assurer la disponibilité de chaque taille d'image afin de maintenir la dimension réelle de l'image demandée. Dans les cas où le rapport hauteur/largeur varie par rapport à l'image d'origine demandée, les recadrages personnalisés seront exclus de l'attribut srcset . Dans le même temps, une image réactive serait renvoyée lorsqu'une image est appelée via la fonction wp-get-attachment-image.

Les images réactives agissent comme une fonctionnalité d'arrière-plan dans WordPress 4.4 en raison de sa fonctionnalité automatique qui se produit chaque fois qu'une image est téléchargée dans WordPress via un téléchargeur multimédia. Ce processus d'arrière-plan automatique entraîne l' affichage des attributs srcset et tailles chaque fois qu'une image apparaît dans une page. Cela signifie qu'il n'y a pas d'interfaces visibles dans la nouvelle fonctionnalité d'images réactives. Aucune des options telles que la présence de formulaires à des fins de remplissage ou de cases à des fins de vérification et d'options à des fins de basculement n'est disponible en raison du manque d'interfaces visibles.

Les développeurs de thèmes devront s'assurer que les attributs de tailles précis sont disponibles dans les images en éditant le fichier functions.php du thème. Il est important d'en tenir compte car les attributs srcset et tailles présents dans la balise d'image sont ce qui représente réellement les images réactives dans WordPress. Le plus difficile à prévoir est l'attribut tailles même si WordPress fonctionne bien lorsqu'il s'agit d'inclure toutes les tailles disponibles dans l'attribut srcset . Il est du devoir de l'attribut tailles d'expliquer au navigateur la largeur de l'image dans chaque fenêtre d'affichage disponible. Cependant, les résultats peuvent différer en fonction du style disponible avec le thème de l'utilisateur, en fournissant la valeur par défaut raisonnable, à savoir « sizes=" (largeur max : {{image-width}}) 100 vw, {{image-width}}"

Avec l'attribut tailles, les utilisateurs peuvent accomplir notamment deux choses. Premièrement, il assure la disponibilité d'un attribut de tailles valides dans l'image qui est maintenant devenu un prérequis en ce qui concerne les spécifications. Deuxièmement, cela empêche le navigateur de fournir une source d'image supérieure à la largeur d'origine demandée. Cependant, l'avantage de l'attribut de tailles par défaut diminue chaque fois qu'un CSS manipule la taille de l'image à des largeurs de fenêtre entièrement différentes.

Les développeurs de thèmes peuvent ajuster l'attribut de tailles correspondant à chaque image à l'aide de crochets de filtre pour garantir la livraison d'un attribut de tailles parfait à chaque point d'arrêt. Par conséquent, il est souhaitable de s'assurer que le thème ne repose pas sur l'attribut de tailles par défaut lorsqu'il s'agit d'offrir une prise en charge précise des images réactives. La raison principale est le fait que les navigateurs ne sont pas autorisés à modifier ou changer la source de l'image par l'attribut de tailles par défaut dans les cas où la taille de la fenêtre d'affichage est plus petite que la taille d'image demandée d'origine. Cependant, si l'image a déjà été modifiée avec CSS à un point d'arrêt, la source ne peut pas non plus être modifiée.

Si vous êtes un particulier ayant accès à une base de code WordPress ou si vous êtes un développeur de thèmes, il est alors plus important de filtrer les images dans les thèmes afin de fournir des attributs de tailles précis. Cela devrait être les choses les plus importantes à faire après la sortie de la nouvelle version.

Configuration d'images réactives pour votre thème

Un certain nombre de nouveaux crochets sont introduits ainsi que de nouvelles fonctions qui peuvent être utilisées pour fournir un niveau de prise en charge d'images réactives adapté à votre thème. La largeur maximale de l'image qui doit être incluse dans l'attribut srcset peut être filtrée par le développeur du thème via le hook max_srcset_image_width. Les attributs srcset de l'image peuvent être filtrés en se connectant à wp_calculate_image_srcset tandis que l'attribut tailles peut être personnalisé par un développeur de thème afin d'adapter les points d'arrêt de l'image dans leur thème en filtrant wp_calculate_image_sizes.

Les images de contenu peuvent être filtrées avec wp_calculate_image_sizes tandis que les vignettes de publication/images vedettes peuvent être filtrées avec la fonction wp_get_attachment_image_attributes. Le besoin de deux fonctions différentes est requis car le thème change pour la manière dont les images sélectionnées sont affichées dans différents points d'arrêt et est entièrement différent par rapport à la manière dont les images de contenu sont affichées dans les mêmes circonstances. Ainsi, WordPress 4.4 offre aux développeurs de thèmes une opportunité accrue de filtrer les images de différentes manières et ainsi d'être aussi spécifiques que possible.

Tout cela met en évidence les avantages instantanés que les utilisateurs et les développeurs de thèmes pourront obtenir avec la prise en charge des images réactives via la mise à jour WordPress 4.4. Il permet également aux développeurs de thèmes d'inclure des images claires et nettes indépendamment de la taille de la fenêtre d'affichage et de la densité de pixels, améliorant ainsi les performances du site Web, car les pages Web peuvent éviter le temps supplémentaire requis pour charger des images plus grandes. Même s'il s'agit d'une procédure automatique pour les utilisateurs, les développeurs de thèmes sont responsables de l'ajustement de l'attribut de tailles d'image en passant du temps dans le fichier functions.php au sein du thème. De plus, il faut garder à l'esprit que la création et la fusion du plug-in Responsive Images est davantage un effort d'équipe.