wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ


こんにちは。株式会社コミュニティコム代表取締役の星野邦敏です。

WordPressのバージョンが、日本語では2012年6月15日に、3.3.2から3.4にバージョンアップされました。

3.4から加わった条件分岐タグとして、
wp_is_mobile関数
があります。

これは、Webサイトを閲覧する端末のヘッダー情報を見て、パソコン用のコンテンツと、スマートフォン用のコンテンツを切り分ける、WordPressの条件分岐タグです。

具体的には、WordPressテーマに、以下のようなソースコードを記述すると、パソコン用のコンテンツと、スマートフォン用のコンテンツを、切り分けることが可能となります。

<?php if (wp_is_mobile()) :?>
スマートフォン用コンテンツをココに書きます。
<?php else: ?>
パソコン用コンテンツをココに書きます。
<?php endif; ?>

ちなみに、wp_is_mobile関数は、WordPress3.4からの関数ですので、それ以前のバージョンの場合、このような書き方をWordPressテーマにするとエラーコードが表示されると思います。

そこで、

<?php if ( function_exists('wp_is_mobile') && wp_is_mobile() ) :?>
スマートフォン用コンテンツをココに書きます。
<?php else: ?>
パソコン用コンテンツをココに書きます。
<?php endif; ?>

にした方が、過去のバージョンでもエラーコードにならないと、菱川さん大曲さんに、Twitterのやり取りで教えてもらいました。

つまり、wp_is_mobile関数が存在して、かつ、wp_is_mobile関数が有効の時に、「スマートフォン用コンテンツをココに書きます。」という箇所が表示され、そうでなかった時に、「パソコン用コンテンツをココに書きます。」という箇所を書く、という条件分岐です。

例えば、以下のようなレスポンシブWebデザインによって、画面サイズに応じて、パソコン用サイト、スマートフォン用サイトを切り分けた際にも、広告バナーなどがあった場合、変化しないこともあると思います。
もちろん、この部分を、CSSで、display:noneで対応することもできるとは思いますが、例えば、Google AdSenseなどは意図的に表示を消すことになるので、規約違反などのリスクも考えられるので、広告という観点から見ると、CSSのdisplay:noneで対応するのは難しいこともあると思います。
wp_is_mobile関数を使えば、このような場合の表示も切り替えることができます。

すなわち、レスポンシブWebデザインで、CSS3のメディアクエリ(Media Queries)を使ってスマートフォンサイトに対応したとしても、広告バナー部分に関しては、ヘッダー情報で判別してユーザーエージェントで振り分けることが可能です。

wp_is_mobile関数

レスポンシブWebデザインで、CSS3のメディアクエリ(Media Queries)を使ってスマートフォンサイトに対応したとしても、上記のキャプチャ画像のように、バナーサイズはパソコン用のままで、デザインが不恰好になってしまいます。

wp_is_mobile関数

wp_is_mobile関数を使えば、パソコンから見た時はそのままにして、iPhoneやAndroidやBlackBerryなどのスマートフォン端末から見る時だけ、上記のようにバナーサイズを切り替えることが可能です。

なお、このように切り替えることができるのは、WordPressのコアファイルの「wp-includes」フォルダの中の、vars.phpファイルに、以下のようなソースコードがあるからです。

function wp_is_mobile() {
	static $is_mobile;

	if ( isset($is_mobile) )
		return $is_mobile;

	if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
		$is_mobile = false;
	} elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
		|| strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false ) {
			$is_mobile = true;
	} else {
		$is_mobile = false;
	}

	return $is_mobile;
}

つまり、端末のヘッダー情報に、Mobile、Android、Silk/、Kindle、BlackBerry、Opera Miniなどとあると、それがwp_is_mobile関数として条件分岐される、ということです。

今後は、スマートフォン対応サイトを作る需要も、より一層増すと思いますし、それをWordPressで対応することも多いと思います。そのような時に、wp_is_mobile関数は便利になると思います。


"wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ" に83件のコメント

  1. RT @odyssey: Androidタブレットがモバイル判定されるのはこのタグでも同じですね RT @khoshino RT wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ http://www.communitycom.jp/2012

  2. “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム” http://www.communitycom.jp/2012

  3. これ便利そう wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://www.communitycom.jp/2012

  4. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム – http://t.co/0rwGEgCW

  5. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  6. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  7. おお!これは便利!わざわざUAとらなくても良くなるんだ!

  8. おお!これは便利!わざわざUAとらなくても良くなるんだ! / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム” http://t.co/dDPcgGMG

  9. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  10. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム –

  11. おお!これは便利!わざわざUAとらなくても良くなるんだ! / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム” http://t.co/dDPcgGMG

  12. なんか作ってみるかー

  13. なんか作ってみるかー / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム” http://t.co/2Ov7Ojax

  14. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ http://t.co/mQz51so3

  15. おお!これは便利!わざわざUAとらなくても良くなるんだ! / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム” http://t.co/dDPcgGMG

  16. “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム” http://t.co/OxtlcusQ

  17. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  18. いえすっ!(= I'll give a try on this tmrw :D )> WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/wreirTra

  19. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  20. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  21. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  22. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  23. 関数ですね、φ(..)メモメモ

    wp_is_mobile関数 – WordPress3.4から http://t.co/z4eFohru

  24. 自分も知らなくて焦った。 RT @WebDesignRecipe: いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐… http://t.co/fAyUZ2pG

  25. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  26. これはいいかもしれない。WPでモバイルとの分岐。次の案件で試してみます!

  27. これはいいかもしれない。WPでモバイルとの分岐。次の案件で試してみます! / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニ…” http://t.co/5PVGSPkt

  28. 便利なタグをどんどん出てきます!最強フレームワークになるでしょうか? http://t.co/GEJAFTat

  29. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  30. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  31. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/02nAv3lF

  32. Wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ http://t.co/5X5kgshN

  33. RT @webdesignrecipe: いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/ngT9XCr7

  34. 重要情報:分岐タグが増えていましたwww
    これで随分楽になりますね。 http://t.co/WL5nIqVQ

  35. 重要情報:分岐タグが増えていましたwww これで随分楽になりますね。 http://www.communitycom.jp/2012

  36. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ – http://t.co/3zd4mEMz (via webdesignrecipe)

  37. Wp_is_mobile関数–WordPress3.4から実装されたパソコン用サ イトとスマートフォン用サイトを分ける条件分岐タグ http://t.co/Q6Kmuql4

  38. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  39. お、WP 3.4から公式の機能としてついたのか。 | wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/IW7inOdL

  40. Wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ
    http://t.co/Mm1ya6Xj

  41. これは便利になるな~。

  42. これは便利になるな~!
    wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/S27S6jAS

  43. て言うか星野さんの説明分かりやすすぎる。なぜそうなるか、実践的にどういう場合役立つかなど、欲しいフォローがある。

  44. 星野さんの説明分かりやすすぎる。なぜそうなるかなど、欲しいフォローが完璧。 wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/FaBfgKOj

  45. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  46. 星野さんの説明分かりやすすぎる。なぜそうなるかなど、欲しいフォローが完璧。 wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/FaBfgKOj

  47. いやーん X( 知らなかったー!:wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/qCFjGn02

  48. お、こんなの追加されてたんだ!「wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム」 http://t.co/Nkvuz8oc

  49. 星野さんの説明分かりやすすぎる。なぜそうなるかなど、欲しいフォローが完璧。 wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/FaBfgKOj

  50. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/h2xWDeP1

  51. これは便利やなー|wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/BhvHJ1DY

  52. これは便利やなー|wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム

  53. これは便利やなー|wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/BhvHJ1DY

  54. http://t.co/OeYKCRe4
    ほんの10日前、、、function.phpに一生懸命、書いたのに。。

  55. 【メモ】【wp_is_mobile】についての記事※あとで読む
    http://t.co/7rsnhAv9

  56. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ (via @Pocket) http://t.co/CWtreobx

  57. ピンバック: WordBench東京 at GMOで司会してきました。 – Creator Life

  58. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/cwmIhi7f

  59. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://www.communitycom.jp/2012

  60. @ONE_PAGES これで分かるかな? http://t.co/mdlfHm3h

  61. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/Eosf0N4M

  62. ピンバック: レスポンシブウェブデザインの相場観とは | WP-D

  63. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ http://t.co/vDlqtI0d @khoshinoさんから

  64. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ http://t.co/Mm1ya6Xj

  65. ピンバック: WordPress アイキャッチ画像のサイズをスマートフォンと PC で切り替える | Simple Living

  66. レスポンシブで広告どうしようかjsとかphp駆使してすげーがんばったけど、これで一発だった…。

  67. レスポンシブで広告どうしようかjsとかphp駆使してすげーがんばったけど、これで一発だった…。 / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐…” http://t.co/RFdHS9UO

  68. RT @s12bt: レスポンシブで広告どうしようかjsとかphp駆使してすげーがんばったけど、これで一発だった…。 / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐…” http://t.co/RFdHS9UO

  69. RT @s12bt: レスポンシブで広告どうしようかjsとかphp駆使してすげーがんばったけど、これで一発だった…。 / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐…” http://t.co/RFdHS9UO

  70. RT @s12bt: レスポンシブで広告どうしようかjsとかphp駆使してすげーがんばったけど、これで一発だった…。 / “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐…” http://t.co/RFdHS9UO

  71. “wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム” http://t.co/Ojg8wXQ0nO

  72. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム – http://www.communitycom.jp/2012

  73. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム http://t.co/mUASR6YhLF

  74. ピンバック: サイトのレイアウトを変更しました | ダリの雑記:WEBプログラム版

  75. ピンバック: 【WordPress】投稿記事内でパソコンとスマホで内容を切り替える方法 - ANKARE IIDX

  76. ピンバック: レスポンシブWEBデザインでもPC版表示に切替出来るようにする | Creator Clip

  77. ピンバック: #ブロネク の9回目がブログデザインの話しなので、僕も何か書こうと思ったのだけれども*prasm

  78. wp_is_mobile関数 – WordPress3.4から実装されたパソコン用サイトとスマートフォン用サイトを分ける条件分岐タグ | 株式会社コミュニティコム ← WP関数でデバイス条件分岐できるのかぁ。

  79. ピンバック: 【アドセンス収益向上】簡単!プラグインやショートコード不要でWordpress記事中に広告を挿入する方法

  80. ピンバック: デジタルマニアのブログ » WordPressの表示をPCとスマートフォンで切り替える

  81. Wp_is_mobileなるものがあるらしい。

コメントを残す

メールアドレスが公開されることはありません。