Gutenbergのブロックの続きだと思った？残念〜！
AMPプラグインを初めて導入したのでカスタマイズ方法の備忘録だよ！
導入したプラグインはこちら、AMP です。まんまですね。
AMP https://ja.wordpress.org/plugins/amp/
投稿ページや固定ページ、カスタム投稿ページなど、対応したいテンプレートも管理画面から選択できてよいです。AMPページの確認は、ページURLの末尾にampをつけてアクセスするだけ！
http://example.com/permalink/amp ・・・みたいな感じですね。
CSSとかイケてないからカスタマイズしようと思ったらちょっと手間は増えますが、ただテーマカラーを変えたい！なら管理画面で設定すればOKです。
ちなみに、配色のライトとダークですが、ダークを選ぶとこんな感じになります。
本文にスタイルをあてたり、いらない要素を削除したいときは？
デフォルトでは記事のauthor名やコメントボタン等が表示されますが、それらの要素がいらないときは、テーマフォルダ内にamp フォルダを作り、改変したいファイルを、今度はampのプラグインフォルダ内のtemplatesからコピーして編集します。
※ プラグイン内のtemplateフォルダ内のファイルを編集するのは控えたほうがいいです。
プラグインアップデート時に消えてしまうおそれがあります。
フォルダ階層的にはこんな感じになります。
- mythemename （テーマのフォルダ名）
- amp
- meta-author.php
- meta-comments-link.php
- style.php
- archive.php
- amp
…
例えば、コメントボタンを消したければ、中身を空っぽにしたmeta-comments-link.php を置く・・・といった感じです。
なんかフックとか使えば消せるような気がしないでもないですが、最も簡単な手段は中身が空のファイルをampフォルダ内に置くことかと思います。（ドキュメント読み解けてない）
本文のスタイルを整える場合は、style.phpをコピーしてきます。
phpファイルですが、中身はスタイルを記述するようになっています。
生のCSSを書くことになりますが、非AMPのスタイルを一部持ってくるくらいであれば、該当するCSSをコピーしてくると早いです。（エディターによってはインデント等が解除されて面倒ですが…）
外部CSSを参照したいのなら、Capital Pさんがまとめているのでこちらを参照されると良いと思います。
一部のタグがamp用のタグに置き換わっているので注意
imgタグなど、一部のタグがamp仕様のタグに置き換わっているので、 .hoge img といったCSSを使う時は .hoge amp-img といった、amp-○○という形式に置き換える必要があります。
置き換えるタグは以下の通り
| 非AMP | AMP |
| <img> | <amp-img> |
| <iframe> | <amp-iframe> |
| <form> | <amp-form> |
| <audio> | <amp-audio> |
| <video> | <amp-video> |
本文中にsvgアイコンを出力しているような場合は、amp-imgでスタイルを整える必要がありますね。（自分でブロック開発をしない限りはそんなことないと思いますが・・・）
かなりお手軽にAMP対応ができるので、AMP対応を考えている方にはオススメです。