最近、このブログとは別に僕が運営しているサイトで「アドセンス広告をスマホとPCで出し分ける設定」を行ったのでその方法をご紹介。
そのサイトもこのブログと同じくWordPressで構築していて、レスポンシブデザインのテンプレートを使っているが、以前からスマホとPCでそれぞれ最適な位置にアドセンスを出し分けたいと思っており、このたびやっと実現した。
今や大半のWordPressテンプレートがレスポンシブデザイン対応となっているが、スマホとPCでコンテンツの配置が異なる分、思った場所に広告配置が出来ず悩ましく感じている方も多いと思う（僕もその一人でした）。
今回はそんな方向けに僕が実際に実施した方法をお教えします。
気になる方は続きをどうぞ。
photo by Rex Boggs
条件分岐関数で出し分けを設定
wp_is_mobile関数を使う方法
アドセンス広告のスマホ、PC出し分けについて、調べているとよく見かけるのがこの関数。WordPress3.4から実装された条件分岐関数で、スマホとPCでの要素出し分けを簡単に行うことが出来るコード。
使い方は、sidebar.phpやsingle.phpなどのファイルの、要素を出し分けたい箇所に下記のコードを記述し使用する。
<?php if (wp_is_mobile()): ?> ---------スマホで表示したい要素--------- <?php else: ?> ---------PCで表示したい要素--------- <?php endif; ?>
上記の「スマホで表示したい要素」「PCで表示したい要素」のところにアドセンス広告のコードを入れてあげればOKなのだが…。
実は、この関数には致命的な難点が。
このwp_is_mobile関数を使うとタブレットもスマートフォンとして認識されてしまう。
iPadなどのタブレットもスマートフォンと同じ表示でOKという方ならこれを使えばいいが、おそらくそうじゃない人の方が多いかと。僕も結局この関数は使わなかった。
で、ここからが本題。次のやり方が今回おすすめしたい方法です。
functions.phpにユーザーエージェントを設定する方法
ユーザーエージェント (User agent、UA）とは、簡単に言えば、ユーザーが使用しているソフトウェアやデバイスを認識できるプログラムのこと。
このユーザーエージェントに対して、functions.phpでどれをスマホとみなすかを定義しておいて、サイトが表示されたときにスマホかそれ以外かを判別してコードを読むようにするやり方がこれ。
説明を聞くとちょっと難しそうだが、やってみると結構簡単。以下の方法はこちらの記事を参考にしています。
参考記事［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法 – みはら.com
下記のコードがユーザーエージェントを判別するためのコード。まずこちらのコードをfunctions.phpへ記述する。（※要バックアップ）
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android *** Only mobile
'Windows.*Phone', // *** Windows Phone
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
これで設定は完了。次にwp_is_mobile関数のときと同じく、アドセンス広告を出し分けたい場所に下記のコードを記述する。（sidebar.phpやsingle.phpなど）
<?php if(is_mobile()) { ?>
---------スマホで表示したい要素---------
<?php } else { ?>
---------PCで表示したい要素---------
<?php } ?>
スマホとPCでアドセンス広告を出し分けたい場合は、上記のそれぞれの要素のところにアドセンス広告のコードを入れてあげればOK。設定はこれだけです。
実際にちゃんと出し分けが行われているか、実機で確認してみて下さい。
（補足）Post Snippetsを使った広告バナー管理
ちなみに、上記のコードの要素のところにアドセンス広告のコードなどをそのまま記述してしまうと、コードがごちゃごちゃしてしまい、バナーの差し替えも面倒。
その場合は、ショートコードを登録できるプラグイン「Post Snippets」を使って管理するのが便利。ショートコードで記述すれば、ソースもすっきりとする。
Post Snippetsを使ってバナーを簡単に差し替える方法は、下の記事の中に記載しているので、もしよかったら参考にどうぞ。
参考STINGER5 サイドバー右上広告枠のみアドセンス広告以外のバナーに変える方法
無料テンプレート「STINGER5」のカスタマイズ記事だが、記事の途中から「応用編：Post Snippetsを使って右上バナーを簡単差し替え」という見出しで、方法を記載している。
おわりに
アドセンス広告の効果的な配置方法は色々なブログで書かれていますが、今回紹介した方法を使えば、目的とする配置の実現に役立つかと思います。
紹介した方法はテンプレートファイルを修正するため、修正前はバックアップを取ることをおすすめします（作業については自己責任でお願いします）。