Jak na Lazy Load obrázků ve WordPressu

Lazy load je postup, při kterém načítá vaše webová stránka obrázky až poté, co se mají zobrazit. Výhodné je to při delší stránce, když se má načíst třeba čtyřicet obrázků. Stránka se pak načítá neúměrně dlouho a uživatel může odejít. V tomto článku si ukážeme, jak Lazy load jednoduše použít ve vaší šabloně.

Co budeme potřebovat?

Stačí jQuery, který už stejně většina WordPress šablon používá a jQuery plugin jquery_lazyload, který najdete zde.

1.

Jako první pomocí wp_register_script a wp_enqueue_script načteme jQuery plugin.

2.

V druhém kroku vytvoříme buffer a jeho callback funkci. Zavěsíme do init akce.

add_action('init', 'buffer_start');
function buffer_start() { 
   ob_start("my_callback"); 
}
function my_callback($buffer) {
   return $buffer;
}

3.

V dalším kroku vytvoříme funkci, která projde obsah stránky a nahradí všechny obrázky jednopixelovým gifem. Zároveň přidá do každého obrázku css třídu lazy.
Pokud nevíte, co znamená tento řetěztec:
R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7
jde právě o postup, jak vytvořit jednopixelový gif. Pro inspiraci odkaz na článek z Css Tricks.

   function content_filter( $content ) {
$matches = array();
preg_match_all( '/<img\s+.*?>/', $content, $matches );
 
$search = array();
$replace = array();
 
        foreach ( $matches[] as $image ) {
 
$replace = preg_replace( '/<img(.*?)src=/i', 
'<img$1src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" 
data-original=', $image );
 
if ( preg_match( '/class=["\']/i', $replace ) ) {
$replace = preg_replace( '/class=(["\'])(.*?)["\']/i', 'class=$1lazy $2$1', $replace );
} else {
$replace = preg_replace( '/<img/i', '<img class="lazy"', $replace );
    }
 
$replace .= '<noscript>' . $image . '</noscript>';
 
array_push( $search, $image );
array_push( $replace, $replace );
 
        }
 
$content = str_replace( $search, $replace, $content );
 
return $content;
 
   }
Čtěte  Black Friday na všechny pluginy z Toret.cz
$search = array(); $replace = array(); foreach ( $matches[0] as $image ) { $replace = preg_replace( '/<img(.*?)src=/i', '<img$1src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-original=', $image ); if ( preg_match( '/class=["\']/i', $replace ) ) { $replace = preg_replace( '/class=(["\'])(.*?)["\']/i', 'class=$1lazy $2$1', $replace ); } else { $replace = preg_replace( '/<img/i', '<img class="lazy"', $replace ); } $replace .= '<noscript>' . $image . '</noscript>'; array_push( $search, $image ); array_push( $replace, $replace ); } $content = str_replace( $search, $replace, $content ); return $content; }

4.

Jako poslední vytvoříme funkci pro vyprázdnění bufferu a umístíme ji do wp_head.

add_action('wp_footer', 'buffer_end');
function buffer_end() { 
  $content = ob_get_clean(); 
  echo content_filter($content); 
}

A to je vše.
Těším se u dalšího článku.

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

Leave a Reply

Vaše emailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Chcete mít přehled o dění ve světě WordPressu?

Přímo do vašeho emailu

Pravidelný přehled o novinkách, trendech a událostech, které se točí kolem WordPressu. Souhrn toho nejzajímavějšího od nás i ze zahraničí.