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-０００００００-0",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script></amp-analytics>シェアボタンは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？って状態なので、ハードル高い！とは言え、ものは経験。でチャレンジしました。
