WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

WordPress:PCとスマートフォンでコンテンツを切り替えたい際に便利なwp_is_mobile関数+α

wp_is_mobile()とはWordPressの3.4から実装された関数で、PC用とiPhoneやAndroidといったスマートフォン用とでコンテンツを切り替える際に便利な条件分岐タグです。
今まで実際に使ったことはなかったのですが、ちょっと使ってみて今後使いそうだと思ったので備忘録。

先日このブログを少しいじろうと思い、以前から機会があったら使おうと思っていたwp_is_mobile()を実際に使用しようとしたときに調べたり試した備忘録になります。(なんだかんだで、結局Media Queriesだけで済ましたんですが...)
いろんな方がエントリーなどで紹介していたりするので便利なんだろうなとは思っていましたが、例えばPCとスマートフォンでは広告を切り替えたいとか、各コンテンツの見栄えを手っ取り早く変えたいときなど、実際に自分でいろいろとやってみるとたしかに便利だなと思いました。

そもそもPCとスマートフォンでテーマを別々にしていれば「Mobile Theme Switcher」とか「WPtap Mobile Detector」などのプラグインを使ったり、あとはブログとしてのみ使っているとかであれば「WPtouch」とか使ったほうが手っ取り早くコンテンツの切り替えはできるのですが、このブログは一応レスポンシブにしているので、今後何かいじる際はwp_is_mobile()を使うことが多そうです。
ちなみにwp_is_mobile()はWordPress Ver3.4から実装された関数なので、使用できるのは3.4以降となります。

<?php if ( wp_is_mobile() ) : ?>
  <!-- スマートフォン向けコンテンツ --?>
<?php else: ?>
  <!-- PC向けコンテンツ --?>
<?php endif; ?>

上記を記述すると、PCとスマートフォンのそれぞれ指定したコンテンツで内容を切り替えて表示してくれます。

上記のコードでとりあえずPCとスマートフォンのコンテンツを切り替えるのを実装できるのですが、このままだとiPadもスマートフォンと同様の端末扱いとされてしまいます。
iPadはスマートフォンに比べたら表示領域が広いということもあり、PCと同じコンテンツを表示させたい場合があるので、その際は以下の方法で実装します。

以下で紹介する方法はfunctions.phpを使用するので、テーマ内にない場合は作成してください。

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']);
}

上記をfunctions.phpに記述後、コンテンツを表示したい場所には下記を記述します。
最初に紹介したコードでwp_is_mobile()となっていた部分をis_mobile()に変更しただけです。

<?php if ( is_mobile() ) : ?>
  <!-- スマートフォン向けコンテンツ --?>
<?php else: ?>
  <!-- PC向けコンテンツ --?>
<?php endif; ?>

上記それぞれを記述して確認すると、iPadでもPC用のコンテンツが表示されるようになります。

2通りの方法を書きましたが、Ver3.4以降でiPadを含めても良いのであればwp_is_mobile()を使い、iPadは含めたくないとか自分でもっと細かくUA判別を設定したいというときはfunctions.phpを用いた方法が良いと思います。

以下を参考にさせてもらいました。

Close the search window,
please press close button or esc key.