Cómo cambiar la SRC de la imagen a Data-SRC para Lazy Load usando el filtro image_send_to_editor

¿Está buscando una forma de cambiar el src de la imagen a data-src para la carga diferida usando el filtro image_send_to_editor? Si bien probablemente exista un plugin para esto, hemos creado un fragmento de código rápido que puede usar para cambiar el src de la imagen a data-src para la carga diferida.

Instrucciones:

Todo lo que tienes que hacer es agregar este código al archivo functions.php de tu tema o a un plugin específico del sitio:

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 );

Este fragmento utiliza image_send_to_editor y filtrará la salida HTML reemplazando src por data-src, luego agregará un nuevo atributo src con una miniatura de imagen predeterminada. Esta es una solución bastante simple, pero le permite controlar la salida creada dentro del editor de su publicación para garantizar que las imágenes que los clientes agregan se carguen de forma diferida. Asegúrese de actualizar la variable $src con la URL de su imagen en miniatura predeterminada.

Nota: Si es la primera vez que agregas fragmentos de código en WordPress, consulta nuestra guía sobre cómo agregar fragmentos de código correctamente en WordPress, para que no rompas accidentalmente tu sitio.

Si te gustó este fragmento de código, considera echar un vistazo a nuestros otros artículos en el sitio como: Más de 50 de los mejores temas de WooCommerce para tu tienda online y Los 7 mejores plugins de WordPress para GDPR.