Written by Manabu Bannai

WordPressプラグインなしでLazy Loadを実装する方法

PROGRAMMING WordPress

画像読み込みを遅延させたほうがSEOに良いとのことで、遅延読み込みを実装しました。実装先は現在運営中のPhil Portalです。全記事に実装していますので、デモ変わりにご覧ください。
» デモ用記事:フィリピン留学で失敗する『ゆるふわ留学生』が続出している件【出合いに感謝!】

スポンサードサーチ


Lazy Loadプラグインを利用

Lazy Loadプラグインを利用します。数多くのサイトで紹介されており信頼できるプラグインです。
» Lazy Load Plugin for jQuery

ダウンロードはgithubからどうぞ。ファイルがいっぱいありますが、使うのは「jquery.lazyload.min.js」だけです。
» tuupola/jquery_lazyload · GitHub

では、さっそく実装していきます。

Headerでスクリプトを読み込む

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="<?php echo get_template_directory_uri(); ?>/js/jquery.lazyload.min.js"></script>

FooterでLazy Load プラグインを実行する


(function($){
  $("img.lazy").lazyload();
})(jQuery);

function.phpで画像の自動置換をする

ここが若干ややこしい部分です。画像の遅延読み込みをする場合は、次の処理を行います。

  • 1.最初にダミー画像(gray.gif)を表示する
  • 2.ページがスクロールされたら、ダミー画像から元画像に置き換える

その処理を行うのが以下のコード。function.phpにコピペで利用できます。


function filter_lazyload($content) {
  return preg_replace_callback('/(]+)(srcs*=s*"[^"]+")([^>]+>)/i', 'preg_lazyload', $content);
}
add_filter('the_content', 'filter_lazyload');

function preg_lazyload($img_match) {

  // get_template_directory_uri は必要に応じて変更してください(※1)
  $img_replace = $img_match[1] . 'src="' . get_template_directory_uri() . '/images/gray.gif" data-original' . substr($img_match[2], 3) . $img_match[3];

  $img_replace = preg_replace('/classs*=s*"/i', 'class="lazy ', $img_replace);

  $img_replace .= '<noscript>' . $img_match[0] . '</noscript>';
  return $img_replace;
}

※1:ダミー画像のアップロードに関して

利用しているWordPressテーマのイメージフォルダに以下のgif画像をアップロードしてください。
» gray.gif (300×300)

以上で完了です!
動かなかった場合は、以下のサイトのコードもお試しください。
» プラグイン無しでWordpressの画像をスクロールに応じて遅延読み込みする方法

※参考
» How To Add Lazy Loading To WordPress | Elegant Themes Blog

人気記事無料あり:エンジニアの僕がおすすめするプログラミングスクール3社