AMP

2020.09.09

WordPressでAMP化したときに対応させたこと一覧

WordPressのAMPプラグインでAMP化したときに出たいくつかのエラーの対応方法です。基本的にAMPはjavascriptが使用できないので、どちらかというとjavascriptを使用しなくても同じようなことができないか、という話になります。

AMPについてはこちら

WordPressならAMPプラグインで一発

AMP化自体はプラグインを有効化するだけなので、簡単です。AMP対応のテーマを使っているなら、さらにさくっといきます。AMPテストに準じて、記事へのリンクや「次の記事へ」などもaria-labelを追加したりテーマを少し触りました。
アナリティクス やアドセンスの広告などもAMP対応のものに変更する必要があります。

テーマファイル

<a href="パーマリンク" aria-label="タイトル">など

Google アナリティクス AMPタグ

<script type="application/json">
{
  "vars" : {
    "gtag_id": "UA-0000000-0",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script></amp-analytics>

AMPテスト

シェアボタンはAMPのコンポーネントで

AddToAny Share Buttons」というプラグインを使用していましたが、こちらも削除。シェアボタンに関しては、AMPのコンポーネントがすでにあるので、そちらで対応。

ページトップへのボタンとスクロール

このあたりもjavascript(jQuery)を使用しまくりなんで、AMPでは機能しません。AMPのコンポーネントで対応。公式サイトにデモもあるのですんなりいきました。

ブログカードをAMPに対応させる

WordPressのembedを使ってましたが、AMP化したときにただのリンクになってしまったので、こちらも修正しました。下記ページのコードを参考に(ほぼそのまま)使わせていただきました。ありがとうございます。

【WordPress】プラグインなしでブログカードを作る方法【コピペで完成】

「記事内の目次」も変更

元々は「TOC+」やサイドバーにも表示できる「Easy Table of Contents」を使ってました。2つともAMPでも機能(一部除く)しますが、javascript使用部分のエラーが出て気持ち悪いので、jsを使用しないものを探しました。プラグインを使わずfunction.phpに記述するものならカスタマイズもしやすいです。

コードハイライト(シンタックスハイライト)

「SyntaxHighlighter Evolved」を使用していましたが、コレ系のプラグインはだいたいJavascriptを使ってローカル上でハイライトします。
AMPで使用するには、Javascriptが使えないのでサーバーサイドで整形する必要があります。プラグインで言えば「WP-GeSHi-Highlight」や「Syntax-highlighting Code Block」など。あとはプラグインを使わずに「hightlight.js」のphp版「highlight.php」ですが・・・。SSHで接続?compoer?って状態なので、ハードル高い!とは言え、ものは経験。でチャレンジしました。