lazysizesでWordPressのオフスクリーン画像の遅延読み込みを実装する方法

前回の記事 オフスクリーン画像の遅延読み込み対策は、Lazyloader「lazysizes」がおすすめ！ で画像を遅延読み込みする方法を解説しました。

ですがWordPressを使っている場合、自動でタグが出力されるから対策できない……なんて方もいると思いますので、LazysizesをWordPressで使う方法を解説します。

記事内の画像を遅延読み込みさせる

画像を遅延読込させるためには、class=”lazyload” と data-src=”” を吐き出すようにしなければいけません。

また src＝”” が空なのも気になるので、ダミー画像を差し込めるように設定するため、function.phpの中に以下のコードを挿入してください。

function lazysizes_img($content) {
  $img_dammy = esc_attr(get_template_directory_uri()).'/images/img-dammy.png';
  $li_content = $content;
  $li_content = preg_replace('/(<img[^>]*)\s+class="([^"]*)"/', '$1 class="$2 lazyload"', $li_content);
  $li_content = preg_replace('/(<img[^>]*)\s+src=/', '$1 src="'.$img_dammy.'" data-src=', $li_content);
  return $li_content;
}
add_filter('the_content','lazysizes_img');

これは何をやっているのかというと、最初の $img_dammy でダミー画像のパスを読み込み、 その後、$content の中にある class=”” と src=”” の書き換えを行っています。

今回はimagesフォルダの中にあるimg-dammy.pngを読み込むようにしていますので、読み込みたいダミー画像がおいてある場所に書き換えてください。

サムネイルの画像も遅延読込させる

記事内の画像を遅延読込できたら、次に遅延読込させたくなるのがサムネイルの画像です。

ですがデフォルトのサムネイルの呼び出しを改変するのもあれなので、新たにサムネイルを呼び出すための関数を作ってしまいましょう。

function get_thumb_img($size = 'full') {

  $thumb_id = get_post_thumbnail_id();
  $thumb_img = wp_get_attachment_image_src($thumb_id, $size);
  $thumb_src = $thumb_img[0];
  $img_dammy = esc_attr(get_template_directory_uri()).'/images/img-dammy.png';
  $thumb_alt = get_the_title();

  if(has_post_thumbnail()){
	  return '<img class="p-thumbnail lazyload" data-src="'.$thumb_src.'" src="'.$img_dammy.'" alt="'.$thumb_alt.'">';
  }else{
	  return '';
  }  
}

ぶっちゃけてしまうと、if(has_post_thumbnail())の部分は必要ないのですが、サムネイルの有無を判断していないテーマに対応させるためこのような記述をしています。

またimgにつけるクラスも好きなもので良いので、thumbnailなんてクラスを付ける必要はまったくありません。

自分で好きなものをつけてください。

呼び出し方法は、

<?php echo get_thumb_img('ここにサムネイルのサイズ'); ?>

とするだけなので、デフォルトのサムネイルとほとんど同じ使い方ができます。

また、

<?php if( has_post_thumbnail() ): ?>
  <?php echo get_thumb_img('eye_thumb'); ?>
<?php else: ?>
  <img class="lazyload" src="<?php echo get_template_directory_uri(); ?>/images/img-dammy.png" data-src="<?php echo get_template_directory_uri(); ?>/images/no-image.png" alt="no-img">
<?php endif; ?>

このような記述の仕方をすれば、サムネイルがあるときはサムネイルを遅延読み込みし、サムネイルがないときはno-image.pngを遅延読み込みするようになります。