【WordPress】ショートコードを使ってレスポンシブにGoogle Adsenseコードを出しわけつつ、さらにAMP用も出し分ける方法
WordPress2017年4月12日
以前の記事でGoogle Adsenseを通常用／AMP用でソースコードをWordPressで出し分ける方法をご紹介させていただきましたが、本記事ではさらにそれを改良し、レスポンシブにソースコードを出し分けつつさらにAMP用も出し分ける方法をご紹介いたします。
function.phpにショートコードの記述を追加
function.phpに以下のソースコードを追加記述します。
//ユーザーエージェント判定
function is_mobile(){
$useragents = array(
'iPhone',
'iPod',
'Android.*Mobile',
'Windows.*Phone',
'dream',
'CUPCAKE',
'blackberry9500',
'blackberry9530',
'blackberry9520',
'blackberry9550',
'blackberry9800',
'webOS',
'incognito',
'webmate'
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
//Adsense出し分け
function showads(){
//AMP用のAdsenseコードを記述
if(is_single() && $_GET['amp'] === '1'){
$is_amp = true;
return '<div class="adsense"><amp-ad layout="responsive" type="adsense" width="300" height="250" data-ad-client="ca-pub-2374938888047560" data-ad-slot="3241284094"></amp-ad></div>';
}
//通常用（スマートフォン）のAdsenseコードを記述
else if(is_mobile()){
return '<div class="adsense"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXX" data-ad-slot="XXX" data-ad-format="rectangle"></ins><script>(adsbygoogle = window.adsbygoogle||[]).push({});</script></div>';
}
//通常用（PC）のAdsenseコードを記述
else{
return '<div class="adsense"><div class="grid-2"><div class="col"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXX" data-ad-slot="XXX" data-ad-format="rectangle"></ins><script>(adsbygoogle = window.adsbygoogle||[]).push({});</script></div><div class="col"><ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-XXX" data-ad-slot="XXX" data-ad-format="rectangle"></ins><script>(adsbygoogle = window.adsbygoogle||[]).push({});</script></div></div></div>';
}
}
add_shortcode('adsense', 'showads');解説
正確にはスクリーンサイズで出し分けるのではなく、ユーザーエージェントでPC用とスマートフォン用、そしてAMP用を出し分けます。よくPC用はダブルレクタングルといって正方形のAdsenseを2つ並べることが多いですが、そのままスマートフォンで縦カラムにしてしまうと2つ縦並びに表示されてしまいます。以前の記事から大きく変更されている点は、ユーザーエージェント判定の関数を追加している箇所ですね。これにより、PCでは2つ分のAdsenseコードを出力し、スマートフォンでは1つ分のAdsenseコードが出力されるようにします。
条件分岐は、まず最初のif文でAMPを判定し、AMP用のAdsenseコードを出力します。AMPページ出ない場合は、else ifで前述のユーザーエージェント判定関数を使い、スマートフォン端末であれば通常のAdsenseコードを1つ分だけ出力します。最後に、AMPでなくかつスマートフォンでもない場合はelseにより、2つ分のAdsenseコードを出力します。
さらに、もしかしたらスマートフォン以外のデバイスでもスクリーンサイズを縮めて閲覧することがあるかもしれません。その場合は以下のようにcssで2つめのブロックをdisplay:none;にすれば、Adsenseコードは2つ分出力はされてしまうものの、1つだけを表示することができます。ここまでやっておけば万全ですね。
@media screen and (max-width:540px){
div.adsense div.grid-2 > .col:nth-child(2){
display: none;
}
}まとめ
Google Adsenseの出し分けについては、ショートコードで通常用とAMP用で出し分けたり、ユーザーエージェントを使ってPCは2つ表示、スマートフォンは1つ表示、といったテクニックは検索すると結構出てきますが、両方を組み合わせた方法は見つからなかったので、今回自分で独自に実装してみた次第です。
ご紹介させていただいた方法は一度実装すれば、ショートコードだけであらゆる環境に最適化されたAdsenseを出力することができますので、手前味噌ですがかなりおすすめです。どうぞご参考にしていただければ幸いです。