AMP for WordPress をインストールした状態で、 Goole AdSense の AMP 自動広告を設置する方法。

AMP for WordPress

以前の投稿で全く参考になりませんので過去投稿のアーカイブとしてのみご覧ください。

確か、一ヶ月ちょっと前だったと思いますが、ワードプレスの「 AMP for WordPress 」というプラグインをインストールしたので、 Goole AdSense の「 AMP 自動広告」の広告コードを設置してみました。

今回の投稿では、 AMP for WordPress プラグインをインストールした状態で、プラグインに含まれる PHP のテンプレートファイルを直接編集して、 AMP 自動広告のコードを設置する方法を忘れないうちに書いておきたいと思います。

AMP for WordPress プラグインの詳細は以下のリンクに載っています。プラグインをインストールすると、 AMP 版のページが生成されるようです。

AMP for WordPress | WordPress.org: https://ja.wordpress.org/plugins/amp/#description

通常のページ　※固定ページではなく、投稿ページです。

PHP で JSON データを使用。入れ子多次元にも挑戦。 – pulogu.net: https://pulogu.net/blog/020-computer/php/json-use/

AMP 版のページ　※ 通常のページの URL に amp が付加されたページが自動生成されている。

PHP で JSON データを使用。入れ子多次元にも挑戦。 – pulogu.net: https://pulogu.net/blog/020-computer/php/json-use/amp/

目次まで戻る

AMP 自動広告の設置方法

以下 Step.1 - 5 までありますが、 AMP 自動広告コードの設置方法を書いています。良ければご覧下さい。

Step1. AMP 自動広告タブ表示

まずは、 Goole AdSense ホームページ > 広告の設定 > 自動広告 > AMP 自動広告タブと進んで「AMP 自動広告」のタブを表示してみます。

そうすると、以下の 3 つの手順が案内されていると思います。

「手順 1: テキスト広告とディスプレイ広告のフォーマットをオンにします」

「手順 2: このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」

「手順 3: この広告コードをコピーして、AMP HTML の本文に貼り付けます」

Step2. 手順 1 を実行

手順 1 の「テキスト広告とディスプレイ広告のフォーマットをオンにします」の設定を行います。

「手順 1 」のパネルの右上のスライドボタン？を「オン」にします。
お好みもあると思いますが、私の場合は、「新しいフォーマットを自動的に取得する」にチェックを入れました。

Step3. 手順 2 を実行

次は、手順 2 の「このスクリプトをコピーして、AMP HTML の head タグ内に貼り付けます」の設定を行います。

手順 2 のパネルを開くと以下のようなコードが表示されていると思うので、そのコードをコピーして、 wordpress/wp-content/plugins/amp/templates フォルダの中にある html-start.php の <head></head> 内に貼り付けます。

<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>

Step4. 手順 3 を実行

手順 3 の「この広告コードをコピーして、AMP HTML の本文に貼り付けます」の設定を行います。

手順 3 のパネルを開くと以下のようなコードが表示されていると思うので、そのコードをコピーして、 wordpress/wp-content/plugins/amp/templates フォルダの中にある html-start.php （手順 2 の時と同じファイルです）の <body> 開始タグ直後に貼り付けます。

html-start.php を上書き保存します。

data-ad-client="xxx" の値が Google AdSense のユーザーさん毎に違っていると思います。

<amp-auto-ads type="adsense"
data-ad-client="xxx">
</amp-auto-ads>

Step5. 20 分後

手順 1 のパネルに中に「通常、AMP 自動広告をオンにして、スクリプトとコードを追加してから 20 分後に広告が表示されます」と書かれていたので、しばらくは広告が表示されないようです。気長に待ってみることにします。

目次まで戻る

広告コード設置後の html-start.php

AMP 自動広告のコードを設置した後の、 html-start.php は以下のようになりました。

<?php
/**
* HTML start template part.
*
* @package AMP
*/

/**
* Context.
*
* @var AMP_Post_Template $this
*/
?>
<!doctype html>
<html amp <?php echo AMP_HTML_Utils::build_attributes_string( $this->get( 'html_tag_attributes' ) ); // WPCS: XSS ok. ?>>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
<?php do_action( 'amp_post_template_head', $this ); ?>
<style amp-custom>
<?php $this->load_parts( array( 'style' ) ); ?>
<?php do_action( 'amp_post_template_css', $this ); ?>
</style>

<!-- AMP 自動広告タブの「手順 2」のコードを貼り付ける場所。 <head></head> 内。 -->
<script async custom-element="amp-auto-ads"
src="https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js">
</script>
</head>

<body class="<?php echo esc_attr( $this->get( 'body_class' ) ); ?>">
<!-- AMP 自動広告タブの「手順 3」のコードを貼り付ける場所。 <body> 開始タグ直後。 -->
<amp-auto-ads type="adsense"
data-ad-client="xxx">
</amp-auto-ads>