【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を出力することができますので、手前味噌ですがかなりおすすめです。どうぞご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。