ブログ
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)を使ってスマートフォンサイトに対応したとしても、広告バナー部分に関しては、ヘッダー情報で判別してユーザーエージェントで振り分けることが可能です。
レスポンシブWebデザインで、CSS3のメディアクエリ(Media Queries)を使ってスマートフォンサイトに対応したとしても、上記のキャプチャ画像のように、バナーサイズはパソコン用のままで、デザインが不恰好になってしまいます。
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関数は便利になると思います。
IT事業と不動産運営事業を行う株式会社コミュニティコムの代表取締役。埼玉県さいたま市の大宮駅東口近くの「コワーキングスペース7F」「シェアオフィス6F」「貸会議室6F」の運営代表者。「大宮経済新聞」の編集長。WordPress日本語公式サイトのイベントカレンダー更新。他、複数の一般社団法人とNPO法人の理事などをしています。趣味は自分の思い付いたWebサービスを自分で自由に開発することです。最近は農業と食と家庭菜園のビジネスなどにも興味があります。