AFFINGER6では、AMP開発を中止していますが、利用はできます。ウェブバイタルではAMP効果が見込めるので、意味がないわけではありません。
ですが、AMPエラーが起きているとAMPページは無効になってしまい、Googleでも配信されません。そのため、利用するなら自分でメンテナンスが必要になります。
1からAMP対応すると大変なので、AFFINGERのAMPファイルを使った修正方法について解説します。
Contents
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エラーには下記のものがあります。
許可されていない属性または属性値がHTMLタグにあります。
- 属性「border」はタグ「amp-img」で使用できません。
- CSSの!important修飾子は使用できません。
- 属性「loading」はタグ「amp-img」で使用できません。
属性「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」を同じフォルダ構造で子テーマにコピーします。
メモ
affinger-childフォルダには、最初は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」です。