[み]レスポンシブデザインの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とした訳は、最後まで読んでいただけるとわかりますww

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を切り替える方法を使ってください。

シェアありがとうございます

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

commentsComment

  1. […] これを防ぐために、一昨日の半日調べました。そうしたら「みはら.com」さんの「レスポンシブデザインのWordPressでAdSenseを切り替える方法」がドンピシャリでした。 […]

  2. […] [み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com […]

  3. […] れたりするのでみはら.comを参考に下記のコードをfunctions.phpに追加しました。 […]

  4. […] [み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.co… […]

  5. […] の大きさを自動で変更しよう、という試みです!今回は[み]レスポンシブデザインのWordPressでAdSenseを切り替える方法|みはら.comを参考にさせていただきました。とても分かり易い! […]

  6. […] つかりました。全部書いてある!便利。 [み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com  – http://miha5.com/2012/09/2682/ ナイス解説です。みはら.comさん! 要は […]

  7. […] [み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 […]

  8. […] きます。プログラムの知識なしで出来るので簡単。ユーザーエージェントで判別する方法は[み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.comに書いてあります。 […]

  9. […] WordPress3.4以降の方は下記手順でOKです。 それ以前のバージョンをお使いの方はコチラが詳しく載っているのでどうぞ。 […]

  10. […] [み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.co… […]

  11. […] レスポンシブデザインのWordPressでAdSenseを切り替える方法 […]

  12. […] [み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com […]

  13. […] [み]レスポンシブデザインのWordPressでAdSenseを切り替える方法(みはら.com) […]

  14. […] 参考記事[み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 – みはら.com […]

  15. […] 参考記事[み]レスポンシブデザインのWordPressでAdSenseを切り替える方法 – みはら.com […]

  16. […] 「is_mobile()」関数(参考:みはら.com)は、スマホだけを判定してくれます。 […]

commentYour Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

checkboxみはら.comはエックスサーバーです

PAGE TOP arrowup