WordPressで『AMP』を導入し『AMPアドセンス』に対応させる方法！
こんちゃす、たけ氏でっす！
最近『AMP』なるものが話題ですね～
『AMPってなんぞや？』っていう方に向けて簡単に説明すると、
『爆速でページを開けるようになるが、代償としてデザインとJavascriptを犠牲にする』
みたいな感じのものです
導入するとGoogle検索結果のニュース欄にいち早く載る可能性があったり直帰率が下がったりとメリットがたくさんあります
ぼくのブログでもしばらく前からAMP自体は対応していたものの、問題点がひとつ
『アドセンスが表示されなくなる』
ぼくのような弱小ブロガーにこれは痛い…！
そう思っていたところ『AMPアドセンスがあるらしいぞ！』と噂にきいたので対応させてみました！！
やり方を簡単にまとめましたので以下からドウゾ～～
※カスタマイズは自己責任でお願い致します、
不利益なことがおきても筆者は責任を負えません
AMPを導入する
まずAMPの導入方法ですが
Wordpressなら非常に簡単です！
管理画面のメニューから、プラグイン→新規追加を押します
検索窓にて『AMP』と検索すると
このプラグインが出て来ますので
今すぐインストールをし、有効化します
以上です
ね、簡単でしょ？笑
次はAMPアドセンスに対応させる方法です
アドセンスコードにAMP用コードを追記する
AMPページは爆速で表示できるようになる代わりに非常にシンプルなデザインとなります
上記プラグインを使用している場合、初期デザインは
ヘッダー
記事
フッター
のような感じに。笑
なのでサイドバーなどに表示させているアドセンスは諦めて、記事内アドセンスのみ対応させます
通常、アドセンスを貼り付けるときはこのようなコードを使用しますよね
スポンサーリンクゥ！
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- アドセンスゥ！ -->
<ins class="adsbygoogle"
style="display:inline-block;width:300px;height:250px"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
記事中アドセンスにもこういうコードを使っていると思います
赤字の部分は広告によって変わってくるので、普段使っているものを参考にしてください
このコードの下に↓のコードを追加します
<amp-ad width="300" height="250"
type="adsense"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽">
</amp-ad>
赤字の部分は上のコードと同じに！
あとはフルコピペでOKです
このコードが『AMP用アドセンス』のコードです
『両方書いたら、広告２つ出るんじゃない？』と思った方！
（ぼくがそうでした）
安心してください、
『AMPページでは通常のアドセンスが表示されない』
＋
『AMPアドセンスはAMPページ以外では表示されない』
ので、
２つ連ねて書くだけで両方対応できるのです！
これでAMP導入＋AMPアドセンス対応は完了です！
…これだけじゃ記事終われないですよね～～
記事下AMPアドセンスのやり方も教えちゃいます
『あ～AMPアドセンス対応させなきゃ～』とぼくが試行錯誤して対応させた『記事下AMPアドセンス』のやり方も公開します！
記事の最後にさっきのAMPアドセンスコードを張ってください
…嘘ですよ笑
そんな乱暴なこと言わないので安心してください
ただ、普段あまりいじらないところを触りますので気をつけてくださいね～
AMPプラグインを編集する
管理ページのサイドバーから、プラグイン→インストール済みプラグインにアクセス
AMPプラグインの『編集』を押します
すると『amp/amp.php の編集 (停止中)』と言うページに移動しますので
右の一覧から『amp/templates/single.php』を探してクリックします
『amp/templates/single.php の編集 (停止中)』と言うページに移動されればOKです
このphpコードがAMPページのコードですので
ここの『</article>』タグの上にAMPアドセンスコードを追記します。
</footer>
<!-- AMPアドセンス -->
<span style="font-size:80%;">スポンサーリンク</span><br/>
<amp-ad width="300" height="600"
type="adsense"
data-ad-client="ca-pub-○○"
data-ad-slot="△▽">
</amp-ad></article>
灰色部分は元々のコードです。
赤色部分は広告によって違いますので、ご自身のアドセンスコードから抜き取ってください。
これで記事の下にAMPアドセンスを表示できるようにできました！
この方法はAMPプラグインが更新されると追記した部分が元にもどってしまう（消えてしまう）ので、アップデートには気をつけて、された後はまた追記するなどして対応してください！
おわりに
これぞWordpressの特権！
AMPアドセンスに早速対応させることができました～
最近気づいたのですが、はてなアプリの新着やホッテントリから記事を見たときAMP対応サイトはAMPページが表示されてしまうのです
ぼくのブログも最近ホッテントリに入ったりしていたので（ありがとうございます！）、今回の対応でAMPによるアドセンス非表示での利益の取りこぼしをせず済むようにできました
はてなは未だAMPアドセンスに対応していません！
ぼくも試行錯誤してAMPページでアドセンスを表示できないか試していたんですけど、iframe内でもダメだったので諦めました…はてな民のみんな、ごめんね
だからはてなのみんな、これを機にWordpressに引っ越してくるといいとおもうよ！！
そんな感じで以上！たけ氏でした！
※追記
AMPアドセンスは幅・高さを指定するのでレスポンシブは不可能です
が、擬似的に対応してらっしゃる方がいたので、AMPアドセンスをレスポンシブにしたい方は↓のサイト様を参考にしてください。