Supponiamo di chiamare il plugin "quoll_img_lazy_loading" allora il file principale nella sua directory, "quoll_img_lazy_loading.php" dovrà contenere almeno il seguente codice:
function quoll_img_lazy_loading_filter_the_content( $content ) {
// Check if we're inside the main loop in a post or page.
if ( ( is_single() || is_page() ) && in_the_loop() && is_main_query() ) {
// remove loading tag in img if exist
$content=preg_replace('/<img\s+([^>]*?)loading="[^"]*"\s*/',"<img $1",$content);
// add loading="lazy" in img elements
return preg_replace('/<img\s+/','<img loading="lazy" ',$content);
}
return $content;
}
add_filter( 'the_content', 'quoll_img_lazy_loading_filter_the_content', 100 );Naturalmente mancano le intestazioni del plugin.
Il plugin completo lo possiamo trovare su GitHub.
Se invece vogliamo utilizzare anche un po' di javascript per rendere l'effetto "lazy" sulle immagini più compatibile con tutti i browser basta dare un occhio al progetto "quoll_img_lazy_loading_plus".
Novità WordPress 5.5
Da WordPress 5.5 dovrebbe esser inglobato il lazy-loading come da articolo ufficiale.
Riferimenti
- Plugin WordPress "quoll_img_lazy_loading" su GitHub
- WordPress è un potente software open source che puoi usare facilmente, e liberamente, per creare siti, blog, forum, app;
- l'attributo lazy loading per caricare le immagini immediatamente o quando una condizione si verifica;
- lista dei browser che rispettano il caricamento lazy tramite tag "onloading";
- Come realizzare un plugin con WordPress;
- Articolo ufficiale WordPress che la versione 5.5 ingloba il lazy-loading sulle immagini.