WordPress5.9へ更新したとたん『属性「loading」はタグ「amp-iframe」で使用できません。』というエラーが大量発生！！
検索して出てくる解決策ではどうもうまくいかなかったのですが、やっとエラーが解消されたのでその方法をまとめていきたいともいます。
結論：AMPエラー「loading」解決方法
なんだかんだ試した結果、解決できた方法だけ先に書いておきます。
以前の解決方法や原因、症状などを知りたい方は下の方までどうぞ。
うまくいった方法は下のコードを『子テーマのfunction.php』にコピペ
|
1 2 3 4 5 6 |
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)へ移動
子テーマに書き込むのでバックアップをしたうえで自己責任のもと実行してください。また、この方法で確実にエラーが解消されるとは限りません。
以前の解決方法ではダメだった。
ネット検索で出てくるのは以下の方法です。
「
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );」をTHE THORの親テーマにある『テーマのための関数（functions.php）』にコピペする。
しかし、これではどうもうまくいきません。
親テーマではなく子テーマにコピペしたりもしましたが全然ダメでした。
そこでTwitterで検索すると有力情報をゲット
WordPress5.9、AMP画像にloading=”lazy”を付与する問題、フィルタを追加していても発生する模様。
— Ganohr C（ガノー・シー）🚳エンジニア系VTuber (@GanohrC) January 26, 2022
add_filter( ‘wp_lazy_loading_enabled’, ‘__return_false’ );
現在対策を検証中ですが、AMPを構築している運営者はご注意を。分かった方は情報願います#WordPress #WordPressWebSite#ワードプレス
同じ症状の人を見つけるだけでも安心しますね。
エラーの症状と原因
WordPress5.9の更新によりTHE THORのサイトカードのサムネイルにエラーが出る。
先ほどのGanohr C（ガノー・シー）さんが原因を教えてくれました。
こんにちは。今回の問題はget_the_post_thumbnail～という関数を呼び出している場合に発生します。 https://t.co/gAr9RYMv2c
— Ganohr C（ガノー・シー）🚳エンジニア系VTuber (@GanohrC) February 1, 2022
掲示のブログでは、get_the_post_thumbnailが最終的に呼び出すget_the_post_thumbnail_htmlの結果から、AMPの場合にフィルタフックでloading=”lazy”という文字列を(続く)
この方はガチのエンジニアなのでWordPress内部のことも理解したうえで解決法を紹介してくれていました。
しかし、私のような”趣味”プログラミングに解読するのは難しい(´;ω;｀)
とはいえ、あきらめずにざっくりと理解してみると、
以前は「wp_lazy_loading_enabled」をフィルターフックにすれば（add_filterすれば）「loading="lazy"」が取り除けていたけど、今回のアップデートでサムネイルにまで適応されなくなった。
ということでしょう。
というわけで冒頭でも紹介したようにフィルターフックを「post_thumbnail_html」に変更して、新たに「loading="lazy"」を取り除く関数を設定すると以下のようになりました。
|
1 2 3 4 5 6 |
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で同じような症状にお困りの方がいれば自己責任でお願いします。
当サイトでは現時点で目立った異変は出ていません。
