wordpressでいろいろ条件分岐

wordpressで、スマホでアクセスしたときに出すコンテンツを、PCと切り分けたいなあとか思うじゃないですか。
wptouchという便利プラグインもあるにはあるのだけど、例のあのデザインになってしまうし、その状態からカスタマイズしていくのも意外とめんどうだったりする。
それなら、is_mobile()みたいな関数を用意して、自分でいろいろカスタマイズしたほうが柔軟で良い。

とか思ったら、ありました。便利関数つくって公開してくれてる方がいらっしゃいました。

WordPressの条件分岐をもちょっと便利にする関数作ったよ

この”sutekIS”を読みこませると、

・ブラウザ判別
・端末判別
・機能サポート判別

などなどについて、is_○○で条件分岐させられるようになる。
やりたいことと記述方法が統一されると、すごく便利。

中身のコード眺めると、何を起点にして条件分岐されられるのかのまとめとしても、参考になります。

そんなにがっつりやらなくても、とりあえず簡易的にis_mobile()関数だけ作りたいって場合は、以下の記事を参考に。

Web サイトのスマートフォン最適化: UA 判別篇

書き方は、次のような感じ。

<?php 
  function is_mobile () {
    $useragents = array(
      'iPhone',         // Apple iPhone
      'iPod',           // Apple 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']);
  }
?>

使うときは、

<?php if (is_mobile()) { ?>
    <link rel="stylesheet" type="text/css" href="/css/mobile.css" />
<?php } ?>

のように、if文で出したいものを分けていく。

でもこのやり方だと、新機種追加ごとにアップデート必要なのかなあと思って、どんなUAがあるのかを調べてみたら、ざっとこのくらいあるそうです。

スマートフォン
iPhone, iPod, Android, dream, CUPCAKE, Windows Phone, webOS, BB10, BlackBerry8707, BlackBerry9000, BlackBerry9300, BlackBerry9500, BlackBerry9530, BlackBerry9520, BlackBerry9550, BlackBerry9700, BlackBerry 93, BlackBerry 97, BlackBerry 99, BlackBerry 98

タブレット端末
iPad, Kindle, Sony Tablet, Nexus 7

携帯モバイル端末
DoCoMo, SoftBank, J-PHONE, Vodafone, KDDI, UP.Browser, WILLCOM, emobile, DDIPOCKET, Windows CE, BlackBerry, Symbian, PalmOS, Huawei, IAC, Nokia

ゲームプラットフォーム
PlayStation Portable, PlayStation Vita, PSP, PS2, PLAYSTATION 3, Nitro, Nintendo 3DS, Nintendo Wii, Xbox

こりゃ大変。
メディアクエリ使って、デバイス幅で切り替えるほうがいいのかもしれない。


コメントを残す

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

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>