最初の画像のみlazyloadを外す【swellテーマ】 | WEB制作の備忘録めもミフネWEB

WordPressの人気テーマ「swell」。

swellにはテーマ独自の高速化設定が用意されており、コードをいじることなく画像などの遅延読み込み・キャッシュ指定が行えますが、今回お客様にご相談いただいたのは　”ファーストビューに含まれる画像のlazyload処理を外したい”　というものでした。

そこで、投稿内で最初にあげた画像のみ遅延読み込みさせないようにカスタマイズする例を載せておきたいと思います。

INDEX

preg_replace_callbackを編集
1. 参考

preg_replace_callbackを編集

投稿内の処理をしている「content_filter.php」 (lib/content_filter.php)を編集します。

content_filter.phpを読んでいくと、167行目からlazyload の処理がはじまり、208行目から画像とvideoタグのlazylodo処理について書かれています。swellはコード内に沢山コメント書いてくれているので、すぐに見つかると思います。

preg_replace_callback関数で、一致した要素（今回の場合はimgタグとvideoタグ）の対して無名関数を実行して書き換えているので、ここに少し追記して1回めだけ処理をスキップするように施します。

オリジナル
// img, video
$content = preg_replace_callback( '/<(img|video)([^>]*)>/', function( $matches ) ){
　　// var_dump( $matches );
　　$tag   = $matches[1];
　　$props = rtrim( $matches[2], '/' );

改変後
// img, video
$content = preg_replace_callback( '/<(img|video)([^>]*)>/', function( $matches ) use (&$count){
　 // var_dump( $matches );
   $tag   = $matches[1];
   $props = rtrim( $matches[2], '/' );
   $count++;

preg_replace_callbackは&$countに処理回数が記録される（default : null）ので、これを使います。

で、countが１のときは処理をスキップします。

// 1枚めの画像はスキップ
if ( $count == 1 ){
  return $matches[0];
}

スキップするだけでなく独自属性をプラスする場合。たとえばloading=eagerを付与するなら、下記のようになります。

// 最初の画像にはloading eagerをつける
  if ( $count == 1 ){
    $props .= ' loading="eager" ';
    return '<' . $tag . $props . '>';
  }

実際にページを表示してみて、1枚めの画像ではlazyload 処理がスキップされているか、以降の画像では処理が行われているかを確認し、問題なければOK。

なお、テーマに関するコード編集は必ず子テーマを作成し、バックアップをとった上で、自己責任でお願いいたします。

参考

「preg_replace_callback」：https://www.php.net/manual/ja/function.preg-replace-callback.php

「ファーストビューエリアにあるコンテンツのLazyloadをカスタマイズする方法（swell-theme.com）」：https://swell-theme.com/customize/8580/