WordPressでのデバイス振り分けプラグインの決定版「mobble」
閲覧者の環境に最適化させる方法としては、デバイスに応じてサイトを複数作ったり、レスポンシブにしたり色々な対応法が考案されていますが、かなり手間がかかります。
簡易的に対応する方法として僕は、基本のコンテンツがあり、PCで見る時に表示するもの、タブレットやスマホで見る時に非表示にするものなどをそれぞれ個別に指定出来れば便利だなぁと思っていたのですが、理想的なプラグイン「mobble」を見つけました。
何ができる？
WordPressには条件分岐タグという関数が用意されています。例えばサイトのトップページが表示されている場合にtrueを返すis_front_page()。固定ページが表示されている場合にtrueを返すis_page();などがあります。
「mobble」はオリジナルの条件分岐タグを追加するプラグインです。
追加される条件分岐タグは下記のようなものがあります。
基本的なタグ
|
1 2 3 4 5 |
<?php is_mobile(); // モバイル全般（iPhoneやAndroidなど） is_tablet(); // タブレット全般 is_ios(); // iOSデバイス（iPhoneとiPadとiPod） is_handheld(); // 小型デバイス全般（phoneやtabletやNintendoDSなど） |
↑の4つをiPhone 4sで確認したところ、is_mobile、is_ios、is_handheldは「true」が、is_tabletは「false」が返って来ました。
更に詳細なタグ
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<?php is_iphone(); is_ipad(); is_ipod(); is_android(); is_blackberry(); is_opera_mobile(); is_symbian(); is_kindle(); is_windows_mobile(); is_motorola(); is_samsung(); is_samsung_tablet(); is_sony_ericsson(); is_nintendo(); |
細かく調整したい場合はこのようなタグも使えます。
使い方
テーマ内のphpファイルに書き込みます。
|
1 2 3 4 |
<?php if (!is_mobile()) { get_sidebar(); } |
この場合、モバイル（iPhoneやAndroidなど）以外のデバイスで見た場合のみサイドバーが表示されます。
またPC用のタグはありませんが、下記の書き方でPC表示時の動作を指定出来ます。
|
1 2 3 4 |
<?php if (!is_handheld()) { //PC表示での動作 } |
ここも便利！
「mobble」を導入すると、bodyタグに自動的にデバイス名のclassを追加してくれます。
PCで見た場合
|
1 2 3 |
</head> <body id="" class="desktop gecko"> </body> |
と言った感じです。
これを利用すればcssからdisplay:noneで非表示にしたり、デザインの調整も可能です！
デフォルトでオンになっている機能ですが、設定画面からオフにすることも可能です。
ご注意ください
Quick CacheやWP Super Cacheのような、ページのキャッシュを保存して表示速度を早めるプラグインとの併用はできません。
閲覧デバイスに関わらずキャッシュに保存されている内容が表示されてしまうので、意図する動作を得られないはずです。
4件のコメントがあります。