【解決方法】loadingタグはAMPでは禁止【wordpress5.5でAMPエラーが続出】

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

今回の記事は、AMPエラーの「許可されていない属性または属性値が HTMLタグにあります。」というエラーの中の「loading=“lazy”」を削除する方法を紹介していきます。

今回の記事内容

こんな内容になっています。

それでは本編に入っていきましょう。

loading=”lazy”ってなにするもの？【重要】

loading=”lazy”は、画像遅延読み込みさせるもので、ページの開いている部分のみ画像を読み込ませて、ページの表示速度を高速化させるものです。

Googleもページの高速表示は重要と明言していますので、ページの表示速度を高速化させるこのアップデートは、ユーザーの事を考えての事なのでしょうね。

なぜ削除する必要があるの？

ページの表示速度を高速化してくれるならば、削除する必要はないのでは？
と、疑問を感じますよね？

それは、AMPでは<img>タグの中に<loading>のタグを使ってはいけないからです。

そしてAMPエラーが続出してしまいます。
AMP化していない人にとっては、とても良いアップデートですね。

loading=”lazy”の削除方法

おまたせしました。
それではloading=”lazy”の削除方法を紹介していきます。

まずは私のwordpress環境は下のとおりです。

テーマはTHE　THORでないとできない訳ではないですが、一応紹介しておきました。

ここからがloading=”lazy”を消す作業になります。

手順は簡単

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

このコードをfunctions.phpにコピペするだけで、自動的にloading=”lazy”が入ってしまうのを防げます。

FTPやサーバの機能を使って編集する方法

「public_html」→「あなたのドメイン^※１」→「wp-content」→「themes」→「あなたのテーマ^※２」→「functions.php」

このfunctions.phpのなかにコードを貼り付けて保存してしまえば編集完了です。

wordpressの管理画面から編集する方法

「外観」→「テーマエディター」→「あなたのテーマの親テーマ^※３」→「functions.php」

このfunctions.phpのなかにコードを貼り付けて保存してしまえば編集完了です。

これでwordpress5.5で追加された『自動で画像に(loading=”lazy”)が付く機能』を制御することが出来ました。

AMP対応ページを作っていない人にはとてもいい機能ですが、Googleは「AMPページは重要です」と明言していますので、AMP対応はしておくべきですね。

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

「画像遅延読み込みに対応したテーマを使う」これは有料・無料両方ありますが、デザインの設定時間を短縮できるのは有料テーマです。

ちなみに、私の使っている>>THE THOR（公式サイト）は画像遅延読み込みに対応していますのでボタン1つで対応可能です。

今回は以上になります。