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

ねぇやん、サブブログのAMP化でつまずく。
Googleの検索結果が正しいとは限らない
ChatGPTは迷える子羊の救世主になるか？
今日のヒメちー

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

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

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

【Wordpressワードプレスcocoon×エックスサーバー】サブブログの作り方【最大のメリットはアドセンス】

Wordpressで複数サイトを運営しよう。通常、ワードプレスでは、一つのワードプレスで一つのブログを管理します。それをサブディレクトリ、またはサブドメインと言う方法で、一つのワードプレスに複数サイト...

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

初心者でも使いやすいと評判の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);
}

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

きたー！

「有効」の二文字。