Comment changer la SRC de l'image en Data-SRC pour le chargement différé à l'aide du filtre image_send_to_editor

Vous cherchez un moyen de changer l'attribut src d'une image en data-src pour le chargement différé en utilisant le filtre image_send_to_editor ? Bien qu'il existe probablement un plugin pour cela, nous avons créé un extrait de code rapide que vous pouvez utiliser pour changer l'attribut src d'une image en data-src pour le chargement différé.

Instructions :

Il vous suffit d'ajouter ce code au fichier functions.php de votre thème ou dans un plugin spécifique au site :

function example_lazy_load($html, $id, $caption, $title, $align, $url) {
  $src  = 'src="'.get_template_directory_uri().'/i/thumb.png"';
  $html = str_replace( "<img src", "<img {$src} data-src", $html );
  return $html;
}
add_filter( 'image_send_to_editor', 'example_lazy_load', 10, 9 );

Cet extrait utilise image_send_to_editor et filtrera la sortie HTML en remplaçant src par data-src, puis ajoutera un nouvel attribut src avec une miniature d'image par défaut. C'est une solution assez simple, mais elle vous permet de contrôler la sortie créée dans votre éditeur de publication pour vous assurer que les images que les clients ajoutent sont chargées de manière différée. Assurez-vous de mettre à jour la variable $src avec l'URL de votre image miniature par défaut.

Remarque : Si c'est la première fois que vous ajoutez des extraits de code dans WordPress, veuillez consulter notre guide sur la manière d'ajouter correctement des extraits de code dans WordPress, afin de ne pas endommager accidentellement votre site.

Si vous avez aimé cet extrait de code, n'hésitez pas à consulter nos autres articles sur le site tels que : 50+ meilleurs thèmes WooCommerce pour votre boutique en ligne et 7 meilleurs plugins WordPress GDPR.