Simplicity2のAMPページ3つのアドセンスを別コードにする方法

この記事は約8分で読めます。

WordPress
当サイトでは、WordPressのテーマにSimplicity2を使っていました。

このテーマは、見た目はシンプルさを追求して使いやすく、EO対策やSNS共有、アクセス解析や広告を貼る機能等も充実しています。

また、Googleが推奨するAMPページを自動で作成してくれる機能もあり、Simplicity2のテーマカスタマイザー(管理画面)でAMPページ用のGoogleアドセンス(AdSense)コードを1つ記述すれば、AMPページに3つのアドセンスを表示してくれます。

今回は、このSimplicity2のAMPページに表示される3つのGoogleアドセンスに、それぞれ別のコードを指定する方法を紹介します。

※当記事では、Windows10パソコンを使って作業を行います。

Simplicity2のAMPページにGoogleアドセンスを貼る機能について

WordPressにSimplicity2のテーマを設定した後、[ダッシュボード]画面から[外観]-[カスタマイズ]-[AMP(β機能)]とたどると、[AMP用AdSenseコード]を貼る欄があります。
Simplicity2-AMP-AdSenseコード欄

ここに、AMPの仕様に合わせたアドセンスコードを貼り付けると、AMPページにアドセンスが表示されます。
例:
※「XXXXX~」の部分には、サイト運営者ID(data-ad-client)と広告ユニットID(data-ad-slot)が入ります。

<amp-ad width=300 height=250 type="adsense"
 data-ad-client="ca-pub-XXXXXXXXXXXXXXX"
 data-ad-slot="XXXXXXXXXX"></amp-ad>

ところが、この欄は1つしかなく、しかし、AMPページには、3つのアドセンスが表示されます。
つまり、3つのアドセンスは、同じ1つのアドセンスコードによって表示されています。

AMPページの3つのアドセンスはそれぞれ別の広告が表示されて、通常使用する分には問題ありませんが、どの位置の広告が多くクリックされているか等を知りたい場合に、パフォーマンスレポートには分けては表示されないため、アドセンスの配置別の情報を知ることができません。

そこで今回、Simplicity2のプログラムを直接書き換えることによって、AMPページに表示される3つのアドセンスに、それぞれ別のアドセンスコードを割り当てる方法を紹介します。

WordPressとSimplicity2のバージョンについて

WordPressのテーマ「Simplicity2」は頻繁に更新されていて、ときには大幅にファイルの構成や中身が変わることがあります。

そのため、「Simplicity2」のバージョンによっては、当記事に書いた方法がそのままでは使えない可能性があります。

下記が当記事を執筆時点のそれぞれのバージョンです。

・WordPress本体:4.9.4-ja
・Simplicity2:2.6.2
・Simplicity2 child:20151225

WordPress本体のバージョンは関係ないかもしれません。
Simplicity2は開発版です。公式サイト様の推奨どおり、「Simplicity2」と「Simplicity2 child」の2つをインストールして、「Simplicity2 child」を有効にして使っています。
「Simplicity2 child」のバージョンも、あまり関係ないかもしれません。公式サイト様でもほとんど更新していないようです。

なお、Simplicity2のバージョンが異なっていても、当記事で手を加えるファイルの中身が同じならば、当記事のやり方が使えるかと思います。

AMPページ3つのアドセンスを別コードにする方法

それでは、作業を進めていきます。

当記事では、Simplicity2のAMPページを表示するためのファイルに直接手を加えることで、別コードにすることを実現します。

AMPページ用に3つのアドセンスコードを用意する

まず、Googleアドセンスサイトにアクセスし、[広告の設定]から、AMPページ用に3つの[新しい広告ユニット]を作成します。

[テキスト広告とディスプレイ広告]から[300×250 レスタングル]を作成します。
[記事内広告]から作成しても構いません。その場合は、AMPページに記事内広告形式の広告が表示されます。

各アドセンスコードには、パフォーマンスレポートで見た際にわかりやすい名前を付けます(名前の末尾に、それぞれ「_amp1」「_amp2」「_amp3」と付けるなど)。

Simplicity2の親テーマから子テーマにファイルをコピーする

Simplicity2の親テーマ内のファイルを直接書き換えると、アップデートをするたびに、その都度、ファイルを書き換える必要が出てくるため、まずは、書き換える予定のファイルを親テーマから子テーマにコピーします。

1.FTPソフト等でWordPressを設置しているフォルダ(ディレクトリ)を開き、[wp-content]-[themes]-[simplicity2]階層下に移動します。
そして、下記のファイルを[wp-content]-[themes]-[simplicity2-child]階層下にコピーします。
※アップロードしたファイルのパーミッションをコピー元ファイルと同じ値に変更してください。

amp-header.php
amp-content.php
single-amp.php
ad-amp.php

子テーマにコピーしたファイルを書き換える

1.WordPressの[ダッシュボード]画面で、[外観]-[テーマの編集]をクリックします。
[テーマの編集]画面が開くので、画面右上の[編集するテーマを選択]で[Simplicity2 child]を選択します。
[テンプレート]の中から下記ファイルを探してクリックし、それぞれ下記のように書き換えます。

amp-header.php

get_template_part('ad-amp');//広告貼り付け用に作成したテンプレート

↓の「ad-amp」を「ad-amp1」に変更する。

get_template_part('ad-amp1');//広告貼り付け用に作成したテンプレート

amp-content.php

      get_template_part('ad-amp'); ?>

↓の「ad-amp」を「ad-amp2」に変更する。

      get_template_part('ad-amp2'); ?>

single-amp.php

get_template_part('ad-amp'); ?>

↓の「ad-amp」を「ad-amp3」に変更する。

get_template_part('ad-amp3'); ?>

子テーマにファイルを追加する

1.再びFTPソフト等で、[wp-content]-[themes]-[simplicity2-child]階層下に移動します。
そこに、先ほどコピーした「ad-amp.php」を元にファイルの中身は同じまま、「ad-amp1.php」「ad-amp2.php」「ad-amp3.php」という名前のファイルを作成します。

2.先程と同じように、WordPressの[テーマの編集]画面で[Simplicity2 child]の中の
「ad-amp1.php」ファイルを開き、下記部分を書き換えます。
※FTPソフト等で直接ファイルを開いて書き換えても構いません。

ad-amp1.php
※5行目から一部を抜粋

<?php echo generate_amp_adsense_code() ;?>

↓このアドセンスコードを呼び出す記述の部分を、アドセンスコードに置き換える。

<amp-ad width=300 height=250 type="adsense" data-ad-client="ca-pub-XXXXXXXXXXXXXXX" data-ad-slot="XXXXXXXXXX"></amp-ad>

※上記の「XXXXX~」の部分に、AMPページ用に作成した3つのアドセンスコードのうちから1つのサイト運営者ID(data-ad-client)と広告ユニットID(data-ad-slot)を記述します。

3.残りの「ad-amp2.php」と「ad-amp3.php」ファイルにも同様に、作成したアドセンスコードをそれぞれ記述します。

以上で、ファイルのコピー、書き換え、追加作業は完了です。

※なお、Simplicity2の[AMP(β機能)]-[AMP用AdSenseコード]欄に記述したアドセンスコードは、「ad-amp」に呼び出されていたので、今回「ad-amp」の記述を削除したことにより、どこにも表示されなくなりました。

AMPページを開いてアドセンスの表示を確認する

1.今回手を加えたWordPressのサイトにアクセスし、どれか1つ記事ページをAMP形式で開きます。
※記事ページのURL末尾に「?amp=1」を付けると、AMP形式で表示されます。
※アドセンスコードを作成したばかりでアドセンスが表示されない場合は、しばらく時間が経ってからアクセスし直してください。

2.各ファイルに記述したアドセンスコードは、それぞれ下記位置の表示を行っています。

amp-header.php:「目次」の上
amp-content.php:投稿本文下
single-amp.php:投稿SNSボタン下

アドセンスのパフォーマンスレポートを見る

1.Googleアドセンスサイトにアクセスし、[パフォーマンスレポート]-[デフォルトのレポート]か[標準レポート]を開きます。

2.画面左上の[レポートタイプ]を[広告ユニット]に切り替えます。
すると、[広告ユニット]ごとの[表示回数]や[クリック数]等が表示されます。

まとめ

現在は、同じテーマ作者様の「Cocoon」に乗り換えた方が多いかと思いますが、以前行っていた設定方法として記事に残しておきます。