目次

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

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>

目次まで戻る

参考情報

AMP 自動広告の設定方法 - AdSense ヘルプ
https://support.google.com/adsense/answer/9011465?hl=ja&ref_topic=9011386

目次まで戻る

あとがき

私の場合、広告コードの設置後、しばらくは AMP 自動広告の表示を確認できず、数日( 2,3 日)後に、モバイル端末で AMP ページを見てみるとは広告が表示されていました。その状態が、数日~ 1 週間程は続いていたと思いますが、その後、広告が表示されなくなりました。

コードの設置方法が間違っているのかもしれないと思いましたが、そのまま待ってみることにしました。それから数週間( 2,3 週間)ほど経って、数日前から、また広告が表示されるようになっていました。

時々、広告の表示を確認していただけなので、本当は広告が表示されていたのかもしれませんが、私の見たタイミングがあっていなかったのかとも思います。

原因はわかりませんが、現在は、パソコン、モバイル端末でも AMP 自動広告が表示されているので、コードの設置方法は、とりあえず合っているのかもしれません。

以上、閲覧ありがとうございました。

目次まで戻る

前後の投稿