WordPressでスマホとそれ以外を切り替える方法

公開日 : 最終更新日 :

カテゴリー :

ここ数年、スマホが登場してからWebサイトの作り方にもたくさんの方法が出て来ました。WordPressの場合、WPtouchやWPtap News Pressといったスマホ表示用のプラグインがあります。また初期テーマであるTwenty ElevenやTwenty Twelveなどは、レスポンシブWEBデザインが採用されています。特にレスポンシブWEBデザインは、やっていて当たり前といった状況になっています。

wp_is_mobile()について

ただ、レスポンシブWEBデザインを使うとスマホだけ出したいとかPCだけだしたいとかいうことが出てくるかもしれません。そういった場合に「display:none;」などで対応してもいいとは思いますが、Adsenseなどは規約で隠すことを禁止されている場合もあります。こういった場合にそなえてWordPress 3.4からwp_is_mobile()が追加されました。wp_is_mobile()は、ブラウザのユーザーエージェントをみてスマホ(タブレット)を判定します。判定してくれるものは以下のものです。

ユーザーエージェントに「Mobile」が含まれているもの

  • iPod Touch・iPhone・iPad
  • Android
  • Kindle
  • BlackBerry
  • Windows Phone
  • Opera Mini
  • Opera Mobile
  • Silk

以上がwp_is_mobile()で判定してくれるスマホ(タブレット)の種類です。wp_is_mobile()では、主に「Mobile」が入っているユーザーエージェントをみて判定しています。なので「Mobile」が入っているユーザーエージェントを持つiPad、「Android」が入っているユーザーエージェントを持つNexus 7などのAndroidタブレットなども対象になっています。まぁタブレットをスマホのレイアウトで見せる場合にはwp_is_mobile()で十分ですが、スマホだけ見せたい場合やタブレットはタブレットのレイアウトでみせたい場合ではwp_is_mobile()は使えません。

スマホとそれ以外を判定する関数

そこでオリジナルのスマホ判定の関数をつくります。WordPressで使う場合、以下のコードをfunctions.phpに書きます。

上のコードは、スマホでアクセスがあった場合は、trueを返してそれ以外のアクセスはfalseを返します。スマホのみ判定じゃなくタブレットのみの判定も出したい場合は、以下のコードとなります。

スマホとタブレットとそれ以外を判定する関数

上のコードは、スマホでアクセスがあった場合は、「mobile」を返して、タブレットでのアクセスがあった場合は、「tablet」を返しそれ以外のアクセスの場合は「other」を返します。上の2つのコードは、WordPress特有のコードというより普通のPHPのコードなのでWordPress以外でも使えます。

上記のコード+wp_is_mobile()の問題点として基本的に標準ブラウザを対象とした判定方法です。標準ブラウザ以外のブラウザでアクセスした場合に判定対象とならない場合も当然あります。また今後新しいまったく新しいユーザーエージェントが出てくる場合もあるので都度変更する必要があります。

それでもスマホやタブレットを出し分けるのは便利なのでいろんなところに活用してください。

ピンバック

コメント

名前とEメールアドレスが必須です。

以下のHTMLタグが使用できます。 <a href="" title="" rel=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>