2020年8月12日にリリースされたwordpress5.5。
xmlサイトマップの自動生成や、画像遅延読み込み機能などが追加され、さらに使いやすくなりましたが、問題も起きています。

今回の記事は、AMPエラーの「許可されていない属性または属性値が HTMLタグにあります。」というエラーの中の「loading=“lazy”」を削除する方法を紹介していきます。
今回の記事内容
- loading=”lazy”ってなにするもの?
- loading=”lazy”の削除方法
- AMP対応したいけど画像遅延読み込みする方法
こんな内容になっています。
それでは本編に入っていきましょう。
loading=”lazy”ってなにするもの?【重要】

loading=”lazy”は、画像遅延読み込みさせるもので、ページの開いている部分のみ画像を読み込ませて、ページの表示速度を高速化させるものです。
Googleもページの高速表示は重要と明言していますので、ページの表示速度を高速化させるこのアップデートは、ユーザーの事を考えての事なのでしょうね。
なぜ削除する必要があるの?
ページの表示速度を高速化してくれるならば、削除する必要はないのでは?
と、疑問を感じますよね?
それは、AMPでは<img>タグの中に<loading>のタグを使ってはいけないからです。
そしてAMPエラーが続出してしまいます。
AMP化していない人にとっては、とても良いアップデートですね。
loading=”lazy”の削除方法

おまたせしました。
それではloading=”lazy”の削除方法を紹介していきます。
まずは私のwordpress環境は下のとおりです。
- wordpressテーマ「THE THOR」
- サーバ「mixhost」
テーマはTHE THORでないとできない訳ではないですが、一応紹介しておきました。
ここからがloading=”lazy”を消す作業になります。
手順は簡単
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
このコードをfunctions.phpにコピペするだけで、自動的にloading=”lazy”が入ってしまうのを防げます。
FTPやサーバの機能を使って編集する方法
「public_html」→「あなたのドメイン※1」→「wp-content」→「themes」→「あなたのテーマ※2」→「functions.php」
このfunctions.phpのなかにコードを貼り付けて保存してしまえば編集完了です。
※2:あなたのテーマ=THE THOR
wordpressの管理画面から編集する方法
「外観」→「テーマエディター」→「あなたのテーマの親テーマ※3」→「functions.php」
このfunctions.phpのなかにコードを貼り付けて保存してしまえば編集完了です。
テーマエディターをクリックした後、最初に選択されているのは子テーマです。この部分を【child】じゃない方にすればOK。
これでwordpress5.5で追加された『自動で画像に(loading=”lazy”)が付く機能』を制御することが出来ました。
AMP対応ページを作っていない人にはとてもいい機能ですが、Googleは「AMPページは重要です」と明言していますので、AMP対応はしておくべきですね。


lazy loadでAMPにも対応ページを作りたい場合

- 画像遅延読み込みに対応したテーマを使う
「画像遅延読み込みに対応したテーマを使う」これは有料・無料両方ありますが、デザインの設定時間を短縮できるのは有料テーマです。
ちなみに、私の使っている>>THE THOR(公式サイト)は画像遅延読み込みに対応していますのでボタン1つで対応可能です。
今回は以上になります。