MENU
カテゴリー

ファーストビューエリアにあるコンテンツのLazyloadをカスタマイズする方法

記事上のウィジェットエリア

SWELL v.2.5.0から、サイト全体を通したLazyloadの設定が可能になりましたが、ファーストビュー(Above the Fold)に含まれる(または含まれることが多いであろう)箇所については、その設定は反映されず、Lazyloadは標準でオフになっています。

ただし、設定やカスタマイズによってファーストビューエリアには入らなかったり、どういった画像を使用するかでも適切なlazyloadの方法が変化してくる部分なので、オフにするかサイト全体の設定に従うかは、フックで個別に指定できるようになっています。

いずれも、指定できる値は true or false です。

  • true : オフにする
  • false: SWELL設定でのlazyload指定に従う
スクロールできます
該当箇所フック名初期値
(表示位置がコンテンツ上部の時の)
タイトル背景画像
'swell_top_area_lazy_off'true
メインビジュアル
(画像が1枚のとき)
'swell_mv_single_lazy_off'true
記事スライダーの背景画像'swell_post_slider_lazy_off'true
投稿ページのアイキャッチ画像'swell_post_thumbnail_lazy_off'true
タームページのアイキャッチ画像'swell_term_thumbnail_lazy_off'true
目次
目次広告表示エリア

ピックアップバナーのlazyloadについて

ピックアップバナーについては、上部に入ってくるコンテンツが設定によって変わってくるので、lazyloadをどうするかカスタマイザーから設定できるようにしています。(ver.2.5.0.8〜)

カスタマイザー→「トップページ」→「ピックアップバナー」→「その他」に以下のような設定を追加しています。

フックで上書きする例

例えば、アイキャッチ画像が確実にファーストビューから外れるサイトの場合は、以下のようにlazyloadをオンにした方がCWV的に良いかと思います。

add_filter( 'swell_post_thumbnail_lazy_off', '__return_false' );

(SWELL設定でlazyloadをオフにしている場合は、このコードを追加してもオフのままです。)

記事下のウィジェットエリア

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次