Cómo cambiar el SRC de la imagen al SRC de datos para la carga diferida utilizando 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 es probable que haya un plugin para esto, hemos creado un fragmento de código rápido que puede utilizar para cambiar la imagen src a data-src para la carga lenta.

Instrucciones:

Todo lo que tienes que hacer es añadir este código al archivo functions.php de tu tema o en 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 sustituyendo src por data-src y luego añade un nuevo atributo src con una miniatura de imagen por defecto. Esta es una solución bastante simple, pero le permite controlar la salida creada dentro de su editor de post para asegurar que las imágenes que los clientes añaden se cargan perezosamente. Asegúrese de actualizar la variable $src con la URL de su imagen en miniatura por defecto.

Nota: Si es la primera vez que añade fragmentos de código en WordPress, consulte nuestra guía sobre cómo añadir correctamente fragmentos de código en WordPress, para no romper accidentalmente su sitio.

Si te ha gustado este fragmento de código, por favor, considere la posibilidad de comprobar hacia fuera nuestros otros artículos en el sitio como: 50+ mejores temas de WooCommerce para tu tienda online y 7 mejores plugins GDPR para WordPress.