AFFINGER6でAMPページのエラーを修正する方法【loading・borderエラーの修正方法】

AFFINGER6では、AMP開発を中止していますが、利用はできます。ウェブバイタルではAMP効果が見込めるので、意味がないわけではありません。

ですが、AMPエラーが起きているとAMPページは無効になってしまい、Googleでも配信されません。そのため、利用するなら自分でメンテナンスが必要になります。

1からAMP対応すると大変なので、AFFINGERのAMPファイルを使った修正方法について解説します。

AFFINGER6でAMP化を実行しているファイル

AFFINGER6でAMP化を実行しているファイルは下記のPHPファイルです。

これを修正することで、AFFINGER6で発生しているAMPエラー関連の修正ができます。

子テーマで修正する

AFFINGER本体のアップデートで修正部分が消えないように、子テーマで修正しましょう。

affingerフォルダにある「functions-amp.php」を、affinger-childフォルダにコピーします。

以降、affinger-childフォルダにあるfunctions-amp.phpを修正すれば、WordPressに修正を反映できます。

AFFINGER6のAMP化で起きているエラーを修正する方法

AMPエラーは、Search Consoleの「拡張」＞「AMP」メニューで確認できます。

AFFINGER6のAMPエラーには下記のものがあります。

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

A8.netなどの広告でborderが利用されていることがあります。

「属性borderはタグamp-imgで使用できません。」を修正するには、functions-amp.phpにある「amp_ampify_img」関数を修正します。

編集する場所は「return」の直前です。下記の「preg_replace」を追加します。

//関数のreturn $element;の前に下記の置換を追加する。
$element = preg_replace( '/border="0"/', "", $element );

CSSの!important修飾子は使用できません。

Amazonアフィリエイトなどの広告で、!important修飾子が利用されていることがあります。

「CSSの!important修飾子は使用できません。」を修正するには、functions-amp.phpにある「amp_ampify_img」関数を修正します。

※属性「border」を修正した関数と同じです。

編集する場所は「return」の直前です。下記の「preg_replace」を追加します。

//関数のreturn $element;の前に下記の置換を追加する。
$element = preg_replace( '/!important/', "", $element );

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

このエラーは、AFFINGERのショートコード内で変換したサムネイル画像に、WordPressのデフォルトloading属性がついてしまうことで発生するようです。

「st_card」で発生しています。

「属性loadingはタグamp-imgで使用できません。」を修正するには、functions-amp.phpにある「amp_shortcode_st_card」関数を修正します。

関数全体が長すぎるので、編集部分だけピックアップして紹介します。

追加場所は「return」の直前です。

//関数のreturn $html;の前に下記の置換を追加する。
$html = preg_replace( '/loading="lazy"/', "", $html );

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

amp-imgに使えない属性が使われています。

functions-amp.phpにある「amp_ampify_img」関数を修正します。

追加場所は「return」の直前で、属性を空にするだけです。

$element = preg_replace( '/decoding="async"/', "", $element );

紹介したのは、あくまでAMPエラーをなくすための修正です。

見た目などの調整は一切考慮していないので、必要に応じてAMP用のCSS修正が必要です。

AMPの見た目をCSSで変更する方法

AFFINGERでAMPの見た目を変更したい場合は、AMP用のCSSを修正します。

まず、affingerフォルダにある「css/amp.css」を同じフォルダ構造で子テーマにコピーします。

AMPのスタイルシートは、カスタムスタイルシートを使っており、functions-amp.phpにある「amp_custom_style」関数で読み込んでいます。

この部分を下記のように修正します。

//この部分をコメントアウトまたは削除する
//include locate_template('css/amp.css', false, false);
//これを追加
include(STYLESHEETPATH . '/css/amp.css');

以降、子テーマにあるamp.cssを修正すれば、AMPのスタイルシートを修正できます。

CSSは圧縮されていないので、CSS Minifierを使って圧縮すれば、ファイルサイズを小さくできます。

テーマのバージョンに注意

テーマのバージョンによって、修正方法が変わる可能性が高いです。

今回の記事で紹介したのは、「AFFINGERバージョン: 20220810」です。