ChatGPTに聞くWordPressテーマ『Luxeritas』のAMP化手順。属性「decoding」はタグ「amp-img」で使用できません、とは。

ねぇやん、サブブログのAMP化でつまずく。

「ヒメとまいにち」をメインブログとし、

サブブログを立ち上げたのは去年の6月。

メインブログ「ヒメとまいにち」は

初心者でも使いやすいと評判のcocoonを選択。

サブブログには軽いと評判のLuxeritasを選択しました。

このLuxeritas、評判通り軽い。

無駄な機能がなく、扱いやすく気に入っています。

おかげさまでサブブログはかなり好調。

メインブログは毎日更新するのに対し

サブブログの更新は若干放置気味。

10日以上記事を更新しない日もありますが、

メインブログをしのぐ勢いです。

メインブログは6割がデスクトップからのアクセスに対し、

サブブログは8割がモバイルから。

ここで困った問題が発生。

このサブブログ、AMP化がどうしてもうまくいかないのです。

いくら放置気味のブログとはいえ、

このまっかっかなエラーはまずい。

AMPってなんぞや、という方のために、Google公式から。

AMPの仕組みとは？
元々AMPは2015年にGoogleとTwitterが開始したモバイル向けのプロジェクト名称ですが、
最近ではそのプロジェクトが公開した仕組み
「AMP HTML」（またはAMP周りの実装）のことを「AMP」として指すことも多くなっています。

なぜAMPを導入するとモバイルサイトの表示スピードが高速化されるのでしょうか。
通常ウェブサイトにアクセスすると、htmlを読み込み、
CSSを読み込み、JavaScriptを読み込み…など
様々な手順を踏んでウェブサイトがブラウザ上に表示されるようになっています。
新しい技術が出てくるにつれリッチなコンテンツを表示できるようになっている反面、
読み込みに時間がかかることも多くなってきているというのも事実です。
特にPCと比べ、モバイルの場合は通信環境によっては
読み込み時間により時間がかかることがあります。

そこでAMPはシンプルな専用ソースコードの記述をすること
（AMP HTML、AMP ［JavaScript］）、
キャッシュを利用すること（AMP Cache）の二点を利用し、
モバイルサイトの表示速度を早めています。

メインブログcocoonのAMP化はとても簡単。

設定からAMP化を選択するだけ。

これで問題なくAMP化ができました。

サブブログLuxeritasも、手順は同じで

AMP化にチェックを入れて完了。

…なはずですが、相変わらずAMP化されていません。

この状態で半年。

いや、半年放置していたわけじゃないですよ。

何度もググって、いろいろ試してみました。

Googleの検索結果が正しいとは限らない

メインブログ「ヒメとまいにち」のテーマcocoonは

使っている人も多く、トラブルがあった時には

検索し、トラブルの対応が出来ます。

使っている人が多いと言う事は情報を発信している人も多いと言うこと。

自分のトラブルと同じトラブルを経験した人も見つけやすいメリットがあります。

一方、ユーザーの少ないサブブログLuxeritasでは

基本の設定は開発者様が公開してくれているものの

トラブルの対処法についてはあまり多く発信されていません。

ググると一応、いくつかのサイトが出てきます。

その中でAMP用ロゴのサイズが大きいと

AMP化できない、という記述がありました。

AMPロゴを小さくして挑むも、変わらず。

パトラッシュ…ねぇやん、もう疲れたよ…。

ChatGPTは迷える子羊の救世主になるか？

ヒットした記事のなかには広告との相性である、とか

AMP化とは関係のないもの、ひどいものはLuxeritasを使っていない人の記事まで。

何かを探そうと思って検索しても、

自分の望む結果が出てこないことはよくあるもの。

望んだ結果だけを表示してほしいのに。

ここでちょっと気が付いた。

ChatGPTに聞いてみてはどうだろう。

ネットに落ちてる情報を集約して答えてくれるのだもの、行けるかもしれない。

なんと！そもそものロゴのサイズが違うと。

ロゴをさらに小さく、150×28ピクセル以下にしてもう一度。

相変わらずAMPページは無効。

あ、でも待って。

エラーメッセージが変わってる。

許可されていない属性。

これは難題。

許可されていない属性の記述を探す。あった。

エラーメッセージを再度ChatGPTに聞いてみる。

これはfunctions.php記述を変更しなくっちゃいけなやつだとわかる。

これで検索ワードも絞り込める。

『属性「decoding」はタグ「amp-img」で使用できません。』。

あった、見つけた。

functions.phpは東京節約ブログ様のサイトをコピーさせていただきました。

// decoding属性削除
if (function_exists('wp_img_tag_add_decoding_attr')) {
    add_filter('wp_img_tag_add_decoding_attr', function ($value, $image, $context) {
        return '';
    }, 10, 3);
    add_filter('wp_get_attachment_image_attributes', function ($attr, $attachment, $size) {
        unset($attr['decoding']);
        return $attr;
    }, 10, 3);
}

この記述を子テーマの編集に張り付ける。

きたー！

「有効」の二文字。

この修正で無事、AMP化することができました。

東京節約ブログ様によると

WordPress6.1で追加されたwp_img_tag_add_decoding_attr()関数が

悪さをしているようなので修正しました、とのこと。

そう言えばLuxeritasは自動更新だった。

簡単に正解にたどり着いたかのように書いていますが、

原因がわかったのちもググってもググっても正解にたどり着けず。

東京節約ブログ様もおっしゃっていますが、

東京節約ブログ様のサイトを丸コピー、更に劣化版のサイトが

なんと検索順位では上にありました。

functions.php記述が微妙に足りないもの、

記述する場所を間違えているもの。

Google検索ってなんだろうな、と考えさせられる出来事でした。

WordPress6.1をお使いの方で

AMPエラーがどうしても解消できない方、

functions.php記述の追加で修正できるかもしれません。

一度、東京節約ブログ様のサイトをご確認ください。

今日のヒメちー

やだ、ヒメちー、なんてところにいるの！

ヒメちーがいるのは冷蔵庫の上。

こんなとこ普段登らないのに。

ねぇやんの為です。

頭使いすぎて知恵熱出したと聞いたので

冷えピタ貼ってあげようかと思いまして。

冷えピタは…どこにあるんでしょうね。

ヒメちー、冷えピタは冷蔵庫の扉の中で冷やされてるのよ。

ヒメちーには無理だから、お気持ちだけいただいておくわ。

そんなことより…。

冷蔵庫の上、物が乱雑に置かれてるし、

こんな写真ブログにあげたとままちゃんに知られたら怒られちゃうわ。

ヒメはままちゃんに怒られることはないので、

ねぇやんだけ心置きなく怒られてください。

ぐぬ…。

ここの所、片づけに勤しんでるままちゃん。

この冷蔵庫の上は手付かずなのよね。

こんなの載せたのばれたら、ここ、片づけるの手伝わされちゃうわ。