ツイート
シェア
LINEで送る
B! はてぶでブックマーク
Pocketでブックマーク
RSSフィード

WordPress5.5 画像の遅延読み込みがデフォルトになった

wordpress image
イラストダウンロードサイト【イラストAC】
の画像をもとに加工しています。

2020年、loading属性(lazy-loading)がHTMLの標準仕様になりました。

WP5.5はそれに合わせて、デフォルトでimgタグにloading="lazy"を自動追加します。

Lazy-Loadingとは?

最近のWebサイトでは画像を最初に読み込まず、スクロールで画像のところに来てはじめて読み込みが行われます。

これをLazy Loadingと言います。

これまではJavaScriptで処理を行なっていましたが、2020年、HTML5の標準仕様になりました。

もともとGoogle Chromeが独自に開発した機能ですが、HTMLの仕様を策定するWHATWGが取り入れました。

WHATWG

Web Aypertext Application Technology Working Goup

WordPress5.5はデフォルトで画像遅延読み込み

HTML5の標準仕様になったことで、WordPress5.5では画像の遅延読み込みがデフォルトになりました。

使用しているユーザーはとくに何もする必要はありません。次の機能を使って画像をHTMLに出力しているものは<img>にloading="lazy"が自動追加されます。

(過去記事も追加される。更新しなくていい。)

the_content()
get_the_content()
記事コンテンツ内の画像
the_excerpt()
get_the_excerpt()
記事の抜粋内の画像
widget_text_content フックテキストウィジェット内の画像
get_avatar()アバター画像
wp_get_attachment_image()アイキャッチ画像
(添付画像)

これらの機能を使って画像のHTMLを取得すると、いっしょにwidth, height属性も付けてくれます。

至れり尽くせりですね?

しかし、自分でテンプレートなどに直接書き込んだ<img>タグには自動追加しません。

そこは自分で対応することになります。

<iframe>は未対応

YouTubeなどの動画はめ込みに使う<iframe>も遅延読み込みができますが、WordPressでは未対応です。

まぁ、自動再生でもしないかぎり問題はないでしょう。

対応するとは言ってませんが、『まだimgしかありませんが』という文言があるくらいなので対応するでしょう。それを待ってもいいかなと思います。

画像遅延読み込みのカスタマイズ

『自動追加されると困るんだけど?』という人のためにカスタマイズ用のフィルターが用意されています。

フィルターでごちょごちょするのは、WordPressのカスタマイズでは毎度おなじみなのでかんたんです。

サイト全体を変更することもできるし自動追加する関数ごとにもできます。

Lazy-Loadingの有効/無効

まずは、自動追加されるLazy-Loadingを無効化する方法です。

ぜんぶ無効化することもできるし自動追加する関数ごとにもできます。一応、HTMLタグごとにもできますが、WP5.5では<img>だけなので参考程度に。

add_filter( 'wp_lazy_loading_enabled', function( $default, $tag_name, $context ) {
    if ( 'img' === $tag_name && 'wp_get_attachment_image' === $context ) {
        return false;
    }
    return $default;
}, 10, 3 );
パラメータ内容
default有効/無効。
初期値: true
tag_nameHTMLタグ名
今のところimgのみ。
contextLazy-Loadingを使う関数名。
関数ごとに制御するのに使う。

'the_content'
'the_excerpt'
'widget_text_content'
'get_avatar'
'wp_get_attachment_image'
フィルター関数のパラメータ
関数戻り値true: Lazy-Loading有効
false: Lazy-Loading無効
$default: 変更なし

WordPress.orgリファレンス

Hook - wp_lazy_loading_enabled

<img>のloading属性値の変更

WP5.5で自動追加する<img>のloading属性値は 'lazy' です。これを変更します。

サンプルでは、特定の画像に対してLazy-Loadingを無効化しています。

(さっきのフィルタではできなかった画像ごとの無効化もできる。)

add_filter( 'wp_img_tag_add_loading_attr', function( $value, $image, $context ) {
    if ( 'the_content' === $context ) {
        $image_url = wp_get_attachment_image_url( 42, 'large' );
        if ( false !== strpos( $image, ' src="' . $image_url . '"' ) {
            return false;
        }
    }
    return $value;
}, 10, 3 );
パラメータ内容
valueloading属性値。
デフォルト: 'lazy'

'eager' : 通常読み込み。
false: 無効
image<img>のHTML全体。
属性も含む。
contextLazy-Loadingを使う関数名。
さっきと同じ。

'the_content'
'the_excerpt'
'widget_text_content'
'get_avatar'
'wp_get_attachment_image'
フィルター関数のパラメータ
関数戻り値'lazy' : Lazy-Loading
'eager' : 通常読み込み
false: 無効
$value: 変更なし

これはimgタグ用なので気をつけましょう。おそらく<iframe>に対応するときには、別のフィルタが用意されるはずです。

WordPress.orgリファレンス

Hook - wp_img_tag_add_loading_attr

画像取得時に無効化

テンプレートやPHPプログラムで、画像HTMLを取得時にLazy-Loadingを無効化することもできます。

echo wp_get_attachment_image(
    42,
    'large',
    false,
    array( 'loading' => false ),
);

WordPress.orgリファレンス

Function - wp_get_attachment_image

前のページ
WordPress5.5, jQueryのバージョンアップが始まる
WordPress5.5 大きく変わったプレビュー機能
次のページ

WordPressの本

post-cta-image

たくさんあるなかで、WordPressの基本が学べる、目的別に学べる本を選びました。

  • WordPressの基本。
  • Webサイト作成から運用まで全体的に学ぶ。
  • かんたんなカスタマイズを学ぶ。
  • 何も分からないところから学ぶ。
  • WordPressからPHPプログラミングを学ぶ。

の5冊です。どうしてもネット上で調べて勉強するのが苦手という人におすすめです。

この内容をモノにすればほかの本は必要ありません。あとは自分の力で、書籍を使わずにインターネット上にある情報だけで学んでいけます。


WordPressの本5選

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください