目次
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>
参考情報
- AMP 自動広告の設定方法 - AdSense ヘルプ
- https://support.google.com/adsense/answer/9011465?hl=ja&ref_topic=9011386
あとがき
私の場合、広告コードの設置後、しばらくは AMP 自動広告の表示を確認できず、数日( 2,3 日)後に、モバイル端末で AMP ページを見てみるとは広告が表示されていました。その状態が、数日~ 1 週間程は続いていたと思いますが、その後、広告が表示されなくなりました。
コードの設置方法が間違っているのかもしれないと思いましたが、そのまま待ってみることにしました。それから数週間( 2,3 週間)ほど経って、数日前から、また広告が表示されるようになっていました。
時々、広告の表示を確認していただけなので、本当は広告が表示されていたのかもしれませんが、私の見たタイミングがあっていなかったのかとも思います。
原因はわかりませんが、現在は、パソコン、モバイル端末でも AMP 自動広告が表示されているので、コードの設置方法は、とりあえず合っているのかもしれません。
以上、閲覧ありがとうございました。