SimplicityにAdSense AMP 自動広告を設定する方法 - Simplicityの活用・設定@ブロギングライフ

AdSense 自動広告は、通常ページに加えてAMP 自動広告があります。本記事では、WordPressのテンプレートSimplicityの機能を使用したAMPページに自動広告を設定する方法を紹介します。

はじめに・設定概要

本記事で紹介する方法は、Simplicityの機能を使用してAMP化を行っている場合の設定方法です。Simplicityを使用していても、プラグインなど他の方法でAMP化を行っている場合は、設定方法が異なります。

SimplicityでAMP化を行っている場合のAMP自動広告コードの設置は、テンプレートファイルを編集して行います。Simplicityの子テーマには、AMPページ用ヘッダーテンプレートファイルがないため、親テーマのAMPページ用ヘッダーテンプレートファイルを小テーマにコピー（アップロード）して、作業を行います。

上記作業を行うと、テーマのアップグレードをしても、子テーマに設定した情報を引き継ぐことができるため、保守性が高くなります。

親テーマを編集して設定することもできるのですが、その場合はテーマの更新のたびに、再設定をする必要が発生します。

AMPヘッダーテンプレートファイルを子テーマに追加する

編集するテンプレートファイル名は、Simplicityのバージョン2.6.0.9以降の場合、amp-header.phpです。それ以前のバージョンでは、single-amp.phpを編集します。

1. FTPを使用してサーバー上のWordPressがインストールされているディレクトリー以下の/wp-content/themes/simplicity2/の下にある”amp-header.php”をダウンロードします。

2. ダウンロードしたamp-header.phpを、FTPを使用してSimplicityの子テーマのディレクトリー、/wp-content/themes/simplicity2-child/にアップロードします。

以上で子テーマに、AMP用のテンプレートファイルが追加されました。

AMP 自動コードの設置

AMP 自動広告の有効化とコードの入手

AMP自動広告の機能は、現在ベータ版としてAdSense Labsより提供されています。AdSenseの管理画面のメニューの［最適化］から［Labs］をクリックし、AdSense Labsのページを表示します。

これまでAMP自動広告は、限定されたユーザーのみに提供されていましたが、現在はLabsにおいて全てのユーザーにAMP 自動広告が利用可能になっています。

AMP 自動広告のスイッチを右にスライドして、有効にします。
［コードを取得］をクリックします。

小ウインドウが開かれて、自動広告のコードが表示されます。自動広告のコードは、二組です。1つは、<head>タグ内に設置し、もう一つは<body>タグの直下に設置します。

コードをコピーして、以下の作業を行なって、AMP自動広告コードを設置します。

AMP自動広告コードをSimplicityのテンプレートに設置する

WordPressのダッシュボードのメニュー［外観］からテーマの編集をクリックします。表示されるテーマの編集ページの右側に子テーマのテンプレートファイルが縦に並んで表示されています。その中の”amp-header.php”をクリックすると、テンプレートファイルのソースコードが表示されます。

画面をスクロールダウンしていって、</head>タグを探します。

該当部分のコードを以下に抜粋します。

</style>
</head>
<body <?php body_class(‘amp’); ?> itemscope itemtype=”http://schema.org/WebPage”>
<?php //Google Analyticsコード（ログインユーザーはカウントしない）

</head>の上に、AMP自動広告コードの<head>タグ内に設置するコードをコピーして、貼り付けます。

続いて、<body <?php body_class(‘amp’); ?> itemscope itemtype=”http://schema.org/WebPage”>の下に、<body>タグの直下に設置するコードをコピーして貼り付けます。

設置後のコード箇所は以下の様になります。（AMP自動コードの部分を太字にしています。）

</style>
<script async custom-element=”amp-auto-ads” src=”https://cdn.ampproject.org/v0/amp-auto-ads-0.1.js”></script>
</head>
<body <?php body_class(‘amp’); ?> itemscope itemtype=”http://schema.org/WebPage”>
<amp-auto-ads type=”adsense” data-ad-client=”ca-pub-1234567890123456″></amp-auto-ads>
<?php //Google Analyticsコード（ログインユーザーはカウントしない）

内容を確認の上、ページ下の青色のボタン［ファイルを保存］を押して、テンプレートファイルを保存します。

以上で設置作業は完了です。