WordPress
AMP

[WordPress] AMP 対応するときのプラグインやカスタマイズ

お手軽にAMP対応したい

プラグイン「AMP for WordPress」を入れましょう。
https://ja.wordpress.org/plugins/amp/

AMP for WordPress の標準機能

  • AMPページの作成
  • 通常ページで <link rel="amphtml" href="http://example.com/xxxx/amp/"> の追加

  • 投稿作成時にAMPでのプレビューボタン追加
    スクリーンショット 2018-02-02 19.19.03.png

  • 投稿ごとにAMPにするかどうかを選択できる
    スクリーンショット 2018-02-14 13.13.55.png

  • 外観>カスタマイズでのAMPでのプレビュー機能
    スクリーンショット 2018-02-02 19.19.57.png

  • テーマカスタマイザーでAMPページのヘッダーテキスト色、ヘッダー背景色とリンク、メイン部分の背景色とテキスト色の変更

  • GoogleアナリティクスなどAMP対応のアナリティクスコードの管理と出力

以下、機能やカスタマイズの説明。

固定ページやカスタム投稿タイプもAMPにしたい

ダッシュボードのAMP>Generalで「Post Type Support」にチェック入れるだけ。(ver 0.6〜)
PHPコード不要となりました。
スクリーンショット 2018-02-02 19.47.06.png

ヘッダーやメイン部分の色を変えたい

外観>カスタマイズ>AMPである程度は変更可能

  • ヘッダーのテキスト色
  • ヘッダーの背景色とテキストリンク色(ただしこれはセット)
  • メイン部分の背景色とテキスト色(白背景+黒文字 or 黒背景+白文字の二択)

なお、WordPressコア機能の「サイトアイコン」を設定して入れば右上に出ます

スクリーンショット 2018-02-02 19.25.48.png

アナリティクス入れたい

ダッシュボードのAMP>Analyticsから設定可能。
AMPに対応してるアナリティクスのTypeとJSONコードだけでOK。

https://github.com/Automattic/amp-wp/wiki/Analytics

スクリーンショット 2018-02-02 19.53.26.png

Googleアナリティクスの管理画面からトラッキングコードのように自動で発行されるわけではないので、Googleアナリティクスの場合は以下のドキュメントを参考にJSONコードを作りましょう。
https://developers.google.com/analytics/devguides/collection/amp-analytics/

以上、ここまではプラグインのインストールのみで対応できる部分。

自前のテンプレートにしたい。

以前書いた「[ざっくり翻訳] WordPress AMP プラグイン カスタマイズなどの説明」 は多少情報が古くなってるので Wikiを頑張って読みましょう

https://github.com/Automattic/amp-wp/wiki/Customization-and-Templating

プラグイン付属のテンプレートを「ちょっと変えたい」レベルであればアクションフックやフィルターフックで対応できます。
HTML構造からもろもろフルカスタマイズしたい場合はカスタムテンプレートを作りましょう。
筆者のオススメはプラグイン形式でカスタムテンプレートを作る方法です。
これだとテーマの切り替えに依存しないし、プラグインの有効化・停止で切り替えできるので。

現場からは以上です