参考にしたもの
WordPressにAMPを導入するプラグイン
https://ja.wordpress.org/plugins/amp/
プラグインのカスタマイズの仕方が載っている。
https://github.com/Automattic/amp-wp/blob/master/readme.md
AdSenseの公式ヘルプ「AMP 広告ユニットを作成する」
https://support.google.com/adsense/answer/7183212?hl=ja
AdSenseを入れる場合
1.AdSense管理画面でレスポンシブ広告ユニットを作成
生成されたタグの中の「data-ad-client」と、「data-ad-slot」を控えておく
2.AMPに貼る<amp-ad>タグを作る
AdSenseの公式ヘルプの「スクロールしなければ見れない位置」のタグをコピーしてきて、
「data-ad-client」と、「data-ad-slot」を控えたやつに書き換える。
「スクロールしなければ見れない位置」を選んだのは、一番下に広告を表示するから。
3.AMPにjsと<amp-ad>タグを実装
使用しているテーマのfunctions.phpに以下を追記。
注）自作しているテーマならよいが、
WordPress公式からテーマをダウンロードしている場合は、子テーマに記入するとかしないと、
テーマをアップデートしたときに上書きされて消えてしまう。
3-1.AMPのソースの <head> と </head> タグの間にamp-ad-0.1.jsを貼り付ける
「amp_post_template_head」を使えば、<head> と </head> タグの間に挿入できた
functions.php
add_action( 'amp_post_template_head', 'xyz_amp_add_tag_adsense_js' );
function xyz_amp_add_tag_adsense_js() {
?>
<!-- AMP Ad -->
<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>
<?php
}
3-2.広告を表示したいところにさっきの<amp-ad>を貼る
「amp_post_template_footer」を使うと、</body>直前に挿入できた
functions.php
add_action( 'amp_post_template_footer', 'xyz_amp_add_tag_adsense' );
function xyz_amp_add_tag_adsense() {
?>
<!-- Google Adsense -->
<amp-ad layout="responsive" width=300 height=250 type="adsense" data-ad-client="ca-pub-xxxxxxxxxxxx" data-ad-slot="xxxxxxxxxx">
</amp-ad>
<?php
}
参考：
https://github.com/Automattic/amp-wp/blob/master/readme.md#head-and-footer