Help us understand the problem. What is going on with this article?

AMPページにタグ(AdSense)を入れたメモ(Automatic社のWordPressにAMP導入するプラグイン使っているとき)

More than 3 years have passed since last update.

参考にしたもの

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

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした