4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

##参考にしたもの

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

4
6
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
6

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?