Luxeritas(ルクセリタス) AMPエラー発生【対処方法】
【Luxeritasを使う理由】
ワードプレスのテーマは「Luxeritas(ルクセリタス)」を使用しています。
同じワードプレステーマ「COCOON(コクーン?)」と並びワードプレス初心者に人気のテーマです。
理由は利用している人が多くネットに設定・使い方・トラブル対処等の情報がたくさんあることです。
情報が多いのは初心者にはとても大切です。
【AMPエラー大量発生】
[AMPとは]
AMPとはAccelerated Mobile Pagesの略です。
ホームページへのアクセススピードをAccelerated(加速)させる仕組みです。
Webページの表示が高速になる仕組みです。
よってユーザーがWebページが見やすくなる、検索・クリック率が上がる
などの効果が期待できます。
AMPエラーは以前にも
このAMPという仕組みを導入したときのエラー多発は過去にもあります。
この時はAMPを導入したときに発生したエラーです。
AMPにはWebページへのアクセススピードを上げるため、障害となる既存のHMTLタグを推奨しません。
このようなタグが存在するWebページはエラー表示となって、グーグルサーチコンソール(ネット検索分析ツール)内で警告として表示されます。
スポンサーリンク
[許可されていない属性または属性値がHTMLタグにあります]
ここしばらくはサーチコンソールを見ていなかったわたし(;^ω^)
しかし2022年四月上旬、サーチコンソールを見てビックリしました。
「許可されていない属性または属性値がHTMLタグにあります」という警告文とともに、警告に該当するページが大量にあることを示すグラフががが
[その原因]
ワードプレスのバージョン5.5で実装された「遅延読み込み(lazy loading)」が原因です。
JavaScriptのライブラリです。
画像は画像自体のサイズも大きいので、サイトの表示をおくらせる要因の一つです。
Lazy loadingはその画像の読み込みを待機させてWeb全体の表示を早くしようという効果を狙っています。
読み込みを待機させるというLazy Loadingとすべてのコンテンツの読み込みスピードをアップさせるAMPとがバッティングするらしいです。
スポンサーリンク
[対処 その1]
上記の警告文とルクセリタス・AMPエラーで検索しましたが、なぜか情報がありません。
なぜ情報がない?このエラーはわたしだけ?
ルクセリタス以外のテーマでしたが、その解決方法がありました。
子テーマのfunctions.phpにLazy Loadingを削除する記述をするというものです。
他のテーマの解決方法をルクセリタスに、しかもfunction.phpに記述するのはためらいましたが、やってみることにしました。
しかし一か月たっても効果はなく、さらにエラー数は増えました。
[対処 その2]
今回のエラーについての情報がなんでないの?という疑問
まるで私だけ取り残された感がありましたが、この取り残された感が解決のヒントになりました。
ルクセリタステーマの更新です。
ワードプレスに関しては”更新”という言葉に臆病になっていたわたし
実際、以前ワードプレスの更新でログイン画面が真っ白になるという失態をしたことがあったからです。
一方ルクセリタスにもテーマの更新があることは知っていましたが、その更新をまったくしていませんでした。
そこで「ルクセリタスのリリース&改訂履歴 過去分まとめ」というベージを調べてみると、このAMPエラーに対処するVer.3.10.01(親テーマ2020.8.16)がリリースされていました。
ルクセリタスのテーマの更新方法についてはたくさん情報がありましたので早速テーマの更新を行いました。
[結果と注意]
するとすぐにAMPエラーが減少に転じました。
スポンサーリンク
テーマ更新の注意事項
ルクセリタスには親テーマと子テーマがありますが、今回の更新は親テーマです。
子テーマにも更新があるようなのですが、スキルが必要そうなので躊躇しています。
子テーマの更新は必要ないという意見もありました。
親テーマの更新は簡単です。
しかし更新Verをずっとしていない場合、最新Verの更新には注意が必要です。
Verが5.5以前のワードプレスからアップデートする場合、アップデート用のテーマのインストールが必要となります。
そのあたりの方法は「ルクセリタス 親テーマの更新」で検索してみてください
アップデート用のテーマをインストールすると、外観のテーマ画面には「Luxeritas Updete」のテーマが増えます。
【まとめ】
グーグルが推奨するAMPですが、AMPエラーは特に気にしていない、というユーザーもいらっしゃるようです。
ただ重要な指標であるサーチコンソールにエラーが出るのはやっぱり気になります。
今回のエラーについてはグーグルも回避方法を提示していて、ルクセリタスの開発者(グループ?)も解決するVerを用意していてくれたわけです。
今後はワードプレスのVer更新だけでなく、ルクセリタスのテーマの更新にも注意を払っていこうと思います。
記憶が定かではないのですが、たぶんワードプレスのVerアップも遅れがちだったため、2020年の案件に今更引っ掛かったような気がします。
ディスカッション
コメント一覧
突然のコメント申し訳けございません。
ルクセリタスでAMP化してサイト運用しているyoshiという者です。
下記状況でAMPエラーが解消されず困っています。
wordpress6.1から、画像にdecoding=asyncが付く(https://core.trac.wordpress.org/ticket/53232)ようになりました。
ルクセリタス投稿ページで<amp-imgでは、decoding属性は使用できないということでAMPエラーになります。(固定ページではエラーにならないようです。)
functions.php434行目に
add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' );
を追加してみたのですがAMPエラーは解消されません。
yuki様が、ルクセリタスでAMP運用する際のエラーの状況と、どのように対応しているかよろしければご教授いただけないでしょうか?
突然のコメントでお手数かけます。
ルクセリタステーマバージョンは、3.23.0を使用しています。
最新のバージョン3.23.1でもテストしてみましたが同様な状況でした。
【functions.php】
if( isset( $luxe['amp'] ) ) {
// AMP for front_page
$url = '//' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
$uri = trim( str_replace( pdel( THK_HOME_URL ), '', $url ), '/' );
if( $uri === 'amp' ) {
set_fake_root_endpoint_for_amp();
}
// disable lazy loading for AMP
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
add_filter( 'wp_img_tag_add_decoding_attr', '__return_false' ); <==追加★
}
yoshiさんこんにちは
わたしはwordpress6.1にはまだ更新していません
なので、Yoshiさんのお困りの現象を今知ることができてyoshiさんに感謝する状況です。
アドバイスできなくてすみません。
wordpressのヴァージョンアップはホント注意が必要ですね