WordPress – Adsense広告をローカル環境と本番環境で自動的に切り替える方法

ローカル環境でもAdsense広告が表示されてしまい、間違ってクリックしてしまわないかストレスになっていませんか？

ローカル環境ではダミーの広告、本番環境では本物の広告を「自動的に」切り替える方法を紹介します。

はじめに

シンプルな基本構成と実用例を紹介します。
編集は子テーマで行いましょう（テーマアップデートでもカスタマイズ内容を保持することができます）
まだローカル環境を構築されていない方はこちらの記事で詳しく手順を紹介していますので宜しければ参考にしてみて下さい。

手順

Adsenseの広告ユニットとダミー広告をテンプレートとして準備し、これらのテンプレートをfunctions.phpで自動的に切り替えます。

テンプレートの準備

子テーマフォルダの直下に「adsense」というフォルダを作成して、テンプレートファイルを置くことにします（好みによって名前や場所は変更して下さい）。

テンプレートファイルの名前は広告ユニットの種類がわかるようにしておきましょう。ここでは例として、rect-large.php、rect-large-dummy.phpという名前を付けています（レクタングル大の広告ユニットという意味）。

本番環境用（rect-large.php）

Adsenseの広告ユニットのコードをそのまま貼り付けておくだけです。

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- rectangle-large -->
<ins class="adsbygoogle"
     style="display:inline-block;width:336px;height:280px"
     data-ad-client="ca-pub-123456789"
     data-ad-slot="123456789"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

cssで位置調整をしたい場合など、好みによって全体をdiv要素で囲ったりしても構いません。

ローカル環境用（rect-large-dummy.php）

本番用と同じサイズのただのdiv要素です。

<div style="display:inline-block;width:336px;height:280px;background:rgba(76,153,0,0.5)">
336x280
</div>

半透明の緑色のdiv要素にしていますが、好みに合わせてcssなどでカスタマイズしましょう。

切り替え処理

functions.phpにコードを追加します。is_local()でローカル環境かどうかを判定して呼び出すテンプレートを切り替えるだけのシンプルな構成です。

function get_adsense () {
　　if (is_local()) {
　　　　get_template_part('adsense/rect-large-dummy');
　　} else {
　　　　get_template_part('adsense/rect-large');
　　}
}

あとは広告を配置したい場所でこの関数を呼び出せばOKです。

get_adsense();

たったこれだけで本番環境とローカル環境で自動的に広告を切り替えてくれるようになります。

実用例

上記の例では広告ユニットが１つだけなので、複数の広告ユニットから好きなものを呼び出せるようにfunctions.phpを改良します。

先ほどと同じ要領でレクタングル（中）のテンプレート（rect-mid.phpとrect-mid-dummy.php）を追加したと想定します。

functions.phpに広告サイズを指定できる機能を追加します。

function get_adsense ($type) {　　// 広告ユニットを指定する引数$typeを追加しています

   // 引数を省略した場合は引数にrect-largeが指定されたものとみなす
　　if (!$type) {
　　　　$type = 'rect-large';
　　}

　　switch ($type) {
   　　// レクタングル（大）が指定された場合
　　　　case 'rect-large':
　　　　　　if (is_local()) {
　　　　　　　　get_template_part('adsense/rect-large-dummy');
　　　　　　} else {
　　　　　　　　get_template_part('adsense/rect-large');
　　　　　　}
　　　　break;
　　　　// レクタングル（中）が指定された場合
　　　　case 'rect-mid':
　　　　　　if (is_local()) {
　　　　　　　　get_template_part('adsense/rect-mid-dummy');
　　　　　　} else {
　　　　　　　　get_template_part('adsense/rect-mid');
　　　　　　｝
　　　　break;
　　　　// 想定していない引数が渡された場合（呼び出した位置に'not defined'とテキストを表示）
　　　　default:
　　　　　　echo 'not defined';
　　}
}

これで広告ユニットを指定して呼び出せるようになり、かつ、ローカル環境では同じサイズのダミー広告が表示されるようになります。

// レクタングル（大）を配置する場合
get_adsense('rect-large'); 
// または
get_adsense();

// レクタングル（中）を配置する場合
get_adsense('rect-mid');  

//想定外の引数を渡すと’not defined’のテキストが呼び出した位置に表示されます
get_adsense('hoge');

表示確認

実際にAdsense広告を配置して確認してみます。

ここではWordPress公式テーマ「Twenty Seventeen」を例にサイドバーの直前（上部）に広告を配置してみます。

sidebar.phpに一行追加するだけです（12行目）。レクタングル（中）を指定してAdsense広告を配置しています。

/*
 sidebar.php
*/

<php?
if ( ! is_active_sidebar( 'sidebar-1' ) ) {
  return;
}
?>

<aside id="secondary" class="widget-area" role="complementary">
  <?php get_adsense('rect-mid'); ?>
  <?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside><!-- #secondary -->

編集後のサイトはローカル環境と本番環境でこのように表示されます。

まとめ

広告テンプレートを準備してfunctions.phpにちょっとしたコードを追加するだけで、ローカル環境と本番環境の広告表示を自動的に切り替えることができます。

広告ユニットをテンプテートとして分離している理由は、functions.phpの中に直接広告ユニットを置くよりも、可読性とメンテナンス性が良くなるためです。

補足として、本番環境でのAdsense誤クリック防止にはGoogle Publisher Toolbar（Chromeブラウザのエクステンション）が便利です。インストールすると広告にオーバーレイを表示してくれるので、誤クリックを防ぐことができます。

はじめに

手順

テンプレートの準備

ローカル環境用（rect-large-dummy.php）

切り替え処理

実用例

表示確認

まとめ

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル