【THE THOR】AMPエラー『属性「loading」はタグ「amp-iframe」で使用できません。』解消方法（サーチコンソール）

2022年2月15日
2022年2月15日
テーマ
THE THOR

テーマ

WordPress5.9へ更新したとたん『属性「loading」はタグ「amp-iframe」で使用できません。』というエラーが大量発生！！

検索して出てくる解決策ではどうもうまくいかなかったのですが、やっとエラーが解消されたのでその方法をまとめていきたいともいます。

1 結論：AMPエラー「loading」解決方法
2 以前の解決方法ではダメだった。
3 エラーの症状と原因
4 まとめ

結論：AMPエラー「loading」解決方法

なんだかんだ試した結果、解決できた方法だけ先に書いておきます。

以前の解決方法や原因、症状などを知りたい方は下の方までどうぞ。

うまくいった方法は下のコードを『子テーマのfunction.php』にコピペ

add_filter( 'post_thumbnail_html', 'remove_loading_attribute', 10 );
 
function remove_loading_attribute( $html ) {
   $html = preg_replace( '/loading="lazy"/', "", $html );
   return $html;
}

add_filter( 'post_thumbnail_html', 'remove_loading_attribute', 10 );

function remove_loading_attribute( $html ) {

$html = preg_replace( '/loading="lazy"/', "", $html );

return $html;

}

外観>テーマエディターファイル>THE THOR CHILD: Theme Functions (functions.php)へ移動

THE THORの子テーマに書き込む

子テーマに書き込むのでバックアップをしたうえで自己責任のもと実行してください。また、この方法で確実にエラーが解消されるとは限りません。

以前の解決方法ではダメだった。

ネット検索で出てくるのは以下の方法です。

「add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );」をTHE THORの親テーマにある『テーマのための関数（functions.php）』にコピペする。

しかし、これではどうもうまくいきません。

親テーマではなく子テーマにコピペしたりもしましたが全然ダメでした。

そこでTwitterで検索すると有力情報をゲット

同じ症状の人を見つけるだけでも安心しますね。

エラーの症状と原因

WordPress5.9の更新によりTHE THORのサイトカードのサムネイルにエラーが出る。

AMPエラーが出た個所

先ほどのGanohr C（ガノー・シー）さんが原因を教えてくれました。

この方はガチのエンジニアなのでWordPress内部のことも理解したうえで解決法を紹介してくれていました。

しかし、私のような”趣味”プログラミングに解読するのは難しい(´;ω;｀)

とはいえ、あきらめずにざっくりと理解してみると、

以前は「wp_lazy_loading_enabled」をフィルターフックにすれば（add_filterすれば）「loading="lazy"」が取り除けていたけど、今回のアップデートでサムネイルにまで適応されなくなった。

ということでしょう。

というわけで冒頭でも紹介したようにフィルターフックを「post_thumbnail_html」に変更して、新たに「loading="lazy"」を取り除く関数を設定すると以下のようになりました。

add_filter( 'post_thumbnail_html', 'remove_loading_attribute', 10 );
 
function remove_loading_attribute( $html ) {
   $html = preg_replace( '/loading="lazy"/', "", $html );
   return $html;
}

add_filter( 'post_thumbnail_html', 'remove_loading_attribute', 10 );

function remove_loading_attribute( $html ) {

$html = preg_replace( '/loading="lazy"/', "", $html );

return $html;

}

参考になれば幸いです。

まとめ

過去最高にエラーの件数が増えたので驚きましたが何とか解消することができました。

全てはGanohr C（ガノー・シー）さんのおかげです。

今回の件でTwitterが初めて役に立ったかもしれないと実感しております。

もしTHE THORで同じような症状にお困りの方がいれば自己責任でお願いします。

当サイトでは現時点で目立った異変は出ていません。