【WordPress】wp_is_mobile関数のおかげでとっても簡単になったスマホ対策条件分岐

Total 2,198 views
この記事の所要時間は約 3分です。

久しぶりのワードプレスネタです。

といっても新鮮味があるものではないのですが、
実際に実装してみてその簡単さがあらためてわかったのでシェアします。

スポンサーリンク


表題の関数は「モバイル機器で見たときは……」という条件式のことで
とっても使いやすいんですよ。

 

モバイル対応は避けて通れない時代

とあるアンケート結果によれば
スマホなどのモバイル機器でのウェブサイト閲覧は
全体の 50%にもなると報じられています。

実際、解析を見ていてもそれを裏付けるかのような数字が
何度も目に飛び込んできますね。

 

 

当ブログも一応レスポンシブルデザイン(PC と スマホ用)にはなっているのですが
完全版ではありません。
完全版にできるほどの知識がまだないもんで中途半端なままです。(^^;

それでも iPhone などで見るとそれなりに見やすくなるよう調整はしています。

将来的にはテンプレートも変えてレスポンシブウェブデザインになっているかもしれません。
追記 -2014.10.10-現在は自作テンプレートではなくレスポンシブデザイン対応テンプレートを使ってます。

そんなとき、
PCでは特に問題ないけどスマホで見るとちょっと邪魔だなぁとかいうものも
少なくないんです。

その場合、これまでは functins.php に以下の機能を付け足して
PCとスマホ用の表示を分けていました。

でも WordPress 3.4 からは
上記の内容をたった一つの命令で済ませられる「wp_is_mobile」関数が
標準で搭載されるようになったんです。

それがあることは知ってたんですが、実際に実装したのは今回が初めて。

例えば当ブログの右端には「Top へ戻る」ボタンがひょこっと出ますが
そのままスマホ上でも表示されると結構邪魔で他のコンテンツが見えにくいんですね。

この設定は iPhone でも表示されるよう時々変更する場合があります。

それに iPhone の画面最上部をタップすれば「トップへ戻る」ボタンと同じ働きをしてくれるので、実際「なし」でも何の問題もないわけです。
(この機能を知ってる人、どれだけいるんだろう)

 

これまでは上記の functions.php を使って
『スマホ上では「Top へ戻る」ボタンを表示させない』ようにしていました。
しかしこれからは「wp_is_mobile」を記述するだけで事は足りてしまいます。

 

実際の記述

実際の書き方としては下の 3種類でしょうか。

①スマホでの表示時のみ、特定のコンテンツを表示させる

<?php if (wp_is_mobile()) :?>
スマホで見たときのみ表示させるコンテンツ)
<?php endif; ?>>

②上と全く反対でスマホでの表示時のみ特定のコンテンツを表示させない
(wp の前に反意を意味するびっくりマークを付けることで「モバイル機器以外なら→つまり PC での表示だったならば」という意味になります)

<?php if (!wp_is_mobile()) :?>
PC で見たときのみ表示させるコンテンツ)
<?php endif; ?>

③PC と スマホで表示コンテンツをそれぞれ分ける

<?php if (wp_is_mobile()) :?>
(スマホで見たときのみ表示させるコンテンツ)
<?php else: ?>
(PC で見たときのみ表示させるコンテンツ)
<?php endif; ?>

なお非表示の方法としてはCSS の「display:none」を使う方法もありますが
これはさまざまな問題を引き起こしかねない諸刃の剣的なプロパティなので
できるだけ使わない方がいいと思います。

追記-2013.2.21-

「wp_is_mobile」は iPad も含んでいるようなので、iPad でも PC と同じように見せたい場合は「is_mobile」を使った方がいいかもしれません。

もちろんその際は「iPad」を表記から外しておきましょう。

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

3件のトラックバック

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)