WordPressプラグインなしでLazy Loadを実装する方法
画像読み込みを遅延させたほうが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
※P.S:無料メルマガで発信中:過去の僕は「ブログ発信で5億円」を稼ぎました。次は「30億円」を目指します。挑戦しつつ、裏側の思考を「メルマガ」から発信します。不満足なら1秒で解約できます。無料登録は「こちら」です。