WordPressでレスポンシブウェブデザインを行うなら必ず覚えておきたいwp_is_mobile

wp is mobile

以前紹介した記事「可変スタイルとMedia Queriesの組み合わせは便利だけど難しい」にも書いていましたが、css3 Media Queriesのみでスマートフォン対応にすると不都合があります。

css3 Media Queriesのみでの不都合点

  • Google AdSense広告の表示方法とサイズの問題
  • スマートフォンサイズになった時に表示させたくないブロック(サイドバーなど)をdisplay: noneで見えなくしてもhtmlコード自体は残っているので不要なコードが残る
  • PC用の大きい画像サイズがcssによって小さく見せるだけなのでスマートフォンでは重くなる

このような感じでPCよりも通信速度や CPU のパワーの劣るスマートフォンではcss3 Media Queriesのみだとかなり不都合があります。

しかしWordPress3.4以降使えるようになっている関数wp_is_mobileを使うとPC用とモバイル用(タブレット、スマートフォンなど)に切り替えることが出来るので、先ほどの不都合箇所全てがカバーできるのでかなり便利です。

wp_is_mobileでcss3 Media Queriesのみでの不都合点を解消

  • Google AdSense広告をPC用、モバイル用(タブレット、スマートフォンなど)に切り替え可能
  • PC用、モバイル用(タブレット、スマートフォンなど)でコードを作成できるのでhtmlの不要なコードはない
  • PC用、モバイル用(タブレット、スマートフォンなど)で画像サイズが変更できるのでスマートフォンでも重くならない

それではコードを紹介します。

WordPressでレスポンシブ ウェブ デザインを行うなら必ず覚えておきたいwp_is_mobile

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

これでPC用とモバイル用(タブレット、スマートフォンなど)に切り替え可能になります。とっても便利です。Google AdSense広告の表示もこのコードを使い切り替えます。

WordPressでGoogle AdSense広告をPC用とモバイル用(タブレット、スマートフォンなど)に簡単切り替え

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

Googleではレスポンシブ ウェブ デザインの推奨していますので、WordPressでサイトを構築されている方は必ず覚えておきたいwp_is_mobileだと思います。

最終更新日: 2013年3月27日

  • このエントリーをはてなブックマークに追加
  • にほんブログ村 IT技術ブログ WordPressへ
  • ameba
  • addthis
  • Clip to Evernote

WordPressでレスポンシブウェブデザインを行うなら必ず覚えておきたいwp_is_mobileの関連記事

WordPressでレスポンシブウェブデザインを行うなら必ず覚えておきたいwp_is_mobile” への2件のコメント

  1. 私も狩られかけています。
    いきなりクリック率があるサイトだけ200倍近く上がっており
    慌ててGoogle AdSenseへ連絡したところです。

    何のメリットにもならないこのアドセンス狩り・・・
    嫌がらせの中でも低俗中の低俗。妬み僻みでやっているのでしょうから
    ほんとに何も取り柄のない低レベルで暇な人間なのでしょうね。

    報復してやりたいですが、きっと既に罰が与えられているから
    そんなクズ的行為をしているんだと思います。
    負の連鎖というやつですね。

    運営者様は回復されたとのことで本当によかったですね!
    どこのどいつか分かりませんが、そんな人間がいるということは悲しいことです。

    もっと有意義なことに時間を使えば、
    人に嫌がらせする残念な人生にならないのに。
    哀れすぎますね。

    長々とすみません。愚痴らせてもらいました。
    失礼しました。

  2. ムダにページを分けてあり、見難かったです。この程度なら1ページ表示でいいのでは?

グルグル にコメントする コメントをキャンセル

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


*