［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法

レスポンシブデザインのサイトが増えていますね。みはら.comは単純にWordPressのプラグイン（WPtouch）を使ってスマートフォン対応しているだけなので、完全に乗り遅れていますね。でも、先日紹介した「みはらマップ」では、中途半端にレスポンシブデザインを採用しています。

みはらマップ

みはらマップでは特に困らなかったんですが、レスポンシブデザインを採用したときのひとつの課題に、「Google AdSenseがはみ出す」ってのがあると思います。コンテンツがキレイに収まっているのに、AdSense広告だけが収まりきらずにはみ出しているサイトってけっこう見かけると思います。そういうサイトって、下にスクロールしようとしたときに、右にずれてイライラしますよね。

せっかくスマートフォン対応のためにレスポンシブデザインを採用したのであれば、このAdSenseもきっちりと収めたいっていうのがスジじゃないでしょうか？ということで、スマートフォンなどで表示されたときに、ちょっと小さいAdSenseを表示するようにコードを書き換えましょう。

AdSenseを切り替える方法

スマートフォンなどでサイトが表示されたときにAdSenseを切り替えるには、User-agent（UA、ユーザーエージェント）を判別して、それぞれのコードを読むようにしてやります。

まず、functions.phpに次のコードを追加します。

function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android', // 1.5+ Android
        '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']);
}

is_mobileという関数の名前は、なんでもかまいません。今回、is_mobileとした訳は、最後まで読んでいただけるとわかりますｗｗ

functions.phpにコードを追加したら、AdSenseを表示したいところに次のコードを追加します。

<?php if(is_mobile()) { ?>
    /*【スマートフォン用のAdSenseコード】*/
<?php } else { ?>
    /*【PC用のAdSenseコード】*/
<?php } ?>

もちろん、AdSenseのコードをそれぞれのところに追加してくださいね。これだけでOKです。

WordPress3.4以降の方は

WordPress3.4以降をお使いの方は、functions.phpにコードを追加しなくとも、AdSenseの切り替えができます。というのも、WordPress3.4から新たに「wp_is_mobile関数」という条件分岐タグが追加されたからです。そうです、これがあったので、さっきのを「is_mobile」としただけです。

それで、この「wp_is_mobile」の使い方はこんなカンジです。

<?php if (wp_is_mobile()) :?>
    /*【スマートフォン用のAdSenseコード】*/
<?php else: ?>
    /*【PC用のAdSenseコード】*/
<?php endif; ?>

カンタンですよね。ただし、ひとつだけ注意しなくちゃなんないところがあります。この「wp_is_mobile」はiPadもモバイル端末と判別してしまうので、iPadではPC用を表示したいという場合には、最初に紹介したfunctions.phpに追加してAdSenseを切り替える方法を使ってください。