Como Alterar SRC da Imagem para Data-SRC para Lazy Load Usando o Filtro image_send_to_editor

Você está procurando uma maneira de alterar o src da imagem para data-src para lazy load usando o filtro image_send_to_editor? Embora provavelmente exista um plugin para isso, criamos um snippet de código rápido que você pode usar para alterar o src da imagem para data-src para lazy load.

Instruções:

Tudo o que você precisa fazer é adicionar este código ao arquivo functions.php do seu tema ou a um plugin específico do 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 );

Este snippet usa image_send_to_editor e filtrará a saída HTML substituindo src por data-src e, em seguida, adicionará um novo atributo src com uma miniatura de imagem padrão. Esta é uma solução bastante simples, mas permite que você controle a saída criada dentro do seu editor de posts para garantir que as imagens que os clientes adicionam sejam carregadas lentamente. Certifique-se de atualizar a variável $src com o URL da sua imagem em miniatura padrão.

Observação: Se esta é a sua primeira vez adicionando snippets de código no WordPress, consulte nosso guia sobre como adicionar snippets de código corretamente no WordPress, para não quebrar acidentalmente seu site.

Se você gostou deste trecho de código, considere conferir nossos outros artigos no site, como: Os 50 melhores temas WooCommerce para sua loja online e Os 7 melhores plugins WordPress para GDPR.