Comment rendre les images WordPress réactives
WordPress est une plateforme très puissante. Faire un thème réactif et l'intégrer est assez simple une fois que vous connaissez les bases du thème. Les images réactives, par contre, ne sont pas quelque chose que WordPress traite directement. Vous pouvez suivre l'itinéraire de génération manuelle de chaque taille d'image, puis dans l'éditeur HTML, vous pouvez taper manuellement la balise d'image, les attributs srcset et chaque image. Cela prendra non seulement du temps, mais pourrait poser problème pour les utilisateurs d’administrateur qui ne possèdent pas de connaissances en HTML.
Heureusement, il existe un moyen de faire en sorte que WordPress se charge de tout. Il peut générer toutes les tailles d'image à partir d'un seul téléchargement d'image, puis, via un plug-in, implémenter les attributs de balise d'image et de srcset partout où l'auteur choisit d'insérer une image.
Étape 1: modifiez fonctions.php pour générer plus de tailles d'image
Chaque fois que vous téléchargez une image, WordPress l'enregistre à sa taille d'origine. Il génère également automatiquement 3 copies redimensionnées dans ces tailles standard (la hauteur ou la largeur peuvent changer en fonction du rapport d'image):
- Vignette (150 × 150)
- Moyen (300 × 300)
- Large (1024 × 1024)
C'est une fonctionnalité très puissante car elle peut être personnalisée pour créer n'importe quelle taille d'image. Cela signifie que vous n'avez pas besoin de faire plusieurs copies d'une image dans différentes tailles. Il vous suffit de télécharger une seule image et WordPress crée les copies redimensionnées.
Cela se fait en modifiant le fichier functions.php. Pour ajouter de nouvelles tailles d'image, vous devez ajouter des appels à la fonction add_image_size . Voici un exemple qui ajoute quatre nouvelles tailles d'image:
add_image_size( 'sml_size', 300 );add_image_size( 'mid_size', 600 );add_image_size( 'lrg_size', 1200 );add_image_size( 'sup_size', 2400 );Chaque appel à la fonction comprend un nom (WordPress peut identifier la taille) et une largeur. Les nouvelles tailles auront une largeur de 300, 600, 1200 & 2400 pixels. Il est possible avec la fonction add_image_size que WordPress règle également la hauteur ou recadre l'image, mais l'exemple ci-dessus conservera le format d'origine de l'image. (Plus peut être trouvé sur la fonction add_image_size dans le WordPress Codex .)
L'exemple ci-dessus montre seulement quatre nouvelles tailles d'image ajoutées, mais vous voudrez peut-être en ajouter plus ou moins ... ceci sera basé sur la conception de votre thème. Désormais, chaque fois qu'une image est téléchargée sur WordPress, elle génère les nouvelles tailles d'image. L'étape suivante consiste à les inclure dans le code HTML.
Etape 2: installez le plugin RICG Responsive Images
Pour que WordPress affiche toutes les tailles d’image, un nouveau plugin doit être installé: le Images réactives RICG brancher. Une fois installé et activé, toutes les tailles d'images seront incluses dans la balise d'image via l'attribut srcset.
Généralement, lorsqu'une image est ajoutée à une page dans WordPress, la sortie HTML ressemble à ceci:
Il y a une seule image dans l'attribut src.
Une fois le plugin installé, le HTML ressemblera à ceci:
Toutes les nouvelles tailles d'image ont été ajoutées via l'attribut srcset .
Le plugin comprend également Picturefill.js , un polyfill d'image réactive qui ajoute la prise en charge de l'élément image et des nouveaux attributs réactifs pour l'élément img. C'est ce qui, avec les attributs srcset inclus dans la balise image, rend vos images réactives.
Vos images sont maintenant réactives
Maintenant, les images sur votre site Web seront réactives - le navigateur choisira l'image la plus appropriée à télécharger.
Les utilisateurs d'appareils dotés d'écrans plus petits recevront les images plus petites. Votre site Web se chargera plus rapidement car ces images seront téléchargées plus rapidement, elles auront besoin de moins de bande passante. Les utilisateurs d'appareils dotés d'écrans plus grands recevront les images les plus volumineuses. Ils n'apparaîtront pas pixélisés ou de moindre qualité.
Il n'y a qu'un seul problème potentiel avec cette méthode: elle ne fonctionnera qu'avec les images téléchargées sur WordPress après l'installation du plug-in RICG Responsive Images. Si vous travaillez sur un tout nouveau site Web, cela ne pose peut-être pas de problème. Toutefois, s'il s'agit d'un site Web existant avec du contenu existant, les nouvelles tailles d'image que vous avez ajoutées dans functions.php n'auront pas été générées. Heureusement, vous n'avez pas besoin de rajouter toutes les images - il y a un plugin qui peut vous aider.
Étape 3: Installez le plug-in pour générer à nouveau des tailles d'image (facultatif)
le Régénérer les vignettes plugin parcourra toutes les pièces jointes d’images existantes et recréera les nouvelles tailles d’image basées sur les nouvelles créées dans functions.php - il s’agit d’un véritable gain de temps et ne nécessite que le clic d’un seul bouton.
Une fois installé, allez dans Outils -> Regen. Vignettes puis cliquez sur le bouton "Régénérer toutes les vignettes". Une barre d'état apparaîtra et vous verrez les informations sur le nombre d'images redimensionnées.
À présent, toutes les images existantes sur votre site Web seront correctement générées à l'aide de la balise image via l'attribut srcset .
Image utilisée utilise image de l'appareil et image de l'appareil mobile via Shutterstock.