【プラグイン不要】もっと見る（moreタグ）にPCとスマホで別々のAdsense広告を設置する方法

先日、「プラグイン不要！function.phpにコピペするだけで出来るカスタマイズコードまとめ」という記事を書いたのですが、その中でmoreタグの位置に広告など任意のコードを配置するというのを紹介しました。その部分の応用変としてスマホとPCで別々の広告を表示させたいというお声をブログ仲間のヨスさん（@yossense ）からいただきまして、挑戦してみました。

すると意外と簡単にできたので、moreタグの位置にスマホとPCで別々のAdsenseコードを貼り付ける方法を書いておきたいと思います。

wp_is_mobile関数を使って条件分岐する

// MOREタグの下に広告を表示
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
if (wp_is_mobile()){
$adTags = <<< EOF
<!-- ここに【スマホ＆タブレット】で表示させたい広告コードを貼る -->
 
EOF;
} else{
$adTags = <<< EOF
<!-- ここに【PC】で表示させたい広告コードを貼る -->

EOF;
}
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);
    return $contentData;
}

上記コードをfunctions.php内のどこかに記述します。

そして、<!– ここに【●●】で表示させたい広告コードを貼る –> とコメントアウトしている部分に、Adsenseで作成した広告コードなり、自身のサービスのバナーやテキストなり、アフィリエイト広告なりなんでも表示可能です。

WordPressで使うことができるwp_is_mobileという関数を使ってそれぞれのコードを条件分岐するという仕組みです。

これにより「スマホ＆タブレット」と「PC」というのをプログラムが判別して、広告コードを出し分けることができます。

なぜAdsenseコードを出し分ける必要があるのか

今回の件でなぜAdsense広告をPCとスマホで出し分ける必要があるのかという部分にも触れておきたいと思います。

テーマによって広告がはみ出る

レスポンシブ・ウェブデザインのサイトでmoreタグの位置に、PCサイズでよく使われる336×280の広告を貼った場合、スマホで見ると横幅が大きすぎてはみ出てしまいます。

Adsense広告は基本的にサイズが決まっていて画面幅に合わせて変動するレスポンシブ化はできません。なので、PC版に最適化したサイズの広告を貼っていた場合は、スマホではみ出てしまったり、逆にスマホに最適化した広告を掲載すると、PCでみた時にサイズが小さくて物足りなかったりと、どちらも一長一短なところがあります。

ちなみにAdsenseでもレスポンシブでの広告コード（画面サイズに合わせて最適なサイズの広告を出す）を使うこともできるのですが、広告のマッチング度が悪くなるためか、クリック率ががくっと下がってしまうようです。

そんな感じの理由から、コードはスマホとPCとで出し分けたほうがいいという結果になります。

【応用編】タブレットではPC版の広告を表示させたいという場合に

上記の方法でも特段問題はないと思うのですが、wp_is_mobileの仕様上、<スマホ＆タブレット>と<PC>という分岐方法なので、タブレットでみた時はスマホ版の広告が表示されるようになります。

これが問題ない場合は先に述べた方法だけでいいのですが、タブレットはPCの広告を表示させたいという場合は、下で説明するもう一手間必要になります。

UA（ユーザーエージェント）で条件分岐するis_mobile関数をつくる

スマホとそれ以外という条件分岐をしたい場合、もともと用意されているwp_is_mobileという関数は使わずに、スマホのみを条件分岐するis_mobileという関数を新たに作成します。

// スマホのみの条件分岐（is_mobile）を新たにつくる
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']);
}

上のコードをfunctions.phpに書くことでis_mobileという条件分岐を使うことができるようになるので、続けてmoreタグにコードを差し込むコードを続けて書いてあげればOKです。4行目の部分が最初のコードと変わっていますので注意してください。

続けて最初に紹介したmoreタグに広告を表示させるコードを記述

// MOREタグの下に広告を表示
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
if (is_mobile()){
$adTags = <<< EOF
<!-- ここに【スマホ】で表示させたい広告コードを貼る -->
  
EOF;
} else{
$adTags = <<< EOF
<!-- ここに【PC＆タブレット】で表示させたい広告コードを貼る -->
 
EOF;
}
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);
    return $contentData;
}

上記2つをまとめるとこんな感じ

2つを続けて書くとこんな感じです。よくわからないという方は下記コードを丸々コピーして、広告を記述する箇所を任意のものに変更してください。

// スマホのみの条件分岐（is_mobile）を新たにつくる
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']);
}


// MOREタグの下に広告を表示
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
if (is_mobile()){
$adTags = <<< EOF
<!-- ここに【スマホ】で表示させたい広告コードを貼る -->
   
EOF;
} else{
$adTags = <<< EOF
<!-- ここに【PC＆タブレット】で表示させたい広告コードを貼る -->
  
EOF;
}
    $contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $adTags, $contentData);
    $contentData = str_replace('<p></p>', '', $contentData);
    $contentData = str_replace('<p><br />', '<p>', $contentData);
    return $contentData;
}

ちょっと長いですが、<スマホ> or <PC＆タブレット>でわけたい場合は上のコードだけを書き込めばOKとなります。