loadingタグでAMPエラー-min

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

  • 2020年8月15日
  • 2020年8月26日
  • ブログ

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

困る女性
この記事を見つけた人もおそらく困っているのではないでしょうか。

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

今回の記事内容

  1. loading=”lazy”ってなにするもの?
  2. loading=”lazy”の削除方法
  3. 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のなかにコードを貼り付けて保存してしまえば編集完了です。

※1:あなたのドメイン=salva-k.com

※2:あなたのテーマ=THE THOR

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

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

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

※3:あなたのテーマの親テーマ=THE THOR

テーマエディターをクリックした後、最初に選択されているのは子テーマです。この部分を【child】じゃない方にすればOK。

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

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

女性笑顔
ちなみにloadingタグはsafariには対応していません。
loading-browser
Can I use参照

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

画像遅延読み込みしたいけどAMP対応もする方法
  • 画像遅延読み込みに対応したテーマを使う

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

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

今回は以上になります。