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

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

といってもさほど新鮮味があるものではありません。

ただ実際に実装してみてその簡単さがあらためてわかったのでシェアします。

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

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

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

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

 

当ブログも一応レスポンシブルデザイン（PCとスマホ用）にはなっています。

でも完全版ではなんです。

完全版にできるほどの（テーマ構成）知識がまだないもんで中途半端なままです。

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

ただ中にはPCでは特に問題ないけどスマホで見るとちょっと邪魔だなぁとかいうものもいまだにあります。

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

これがWordpress3.4からは、上記の内容をたった一つの命令で済ませられる「wp_is_mobile」という関数が標準で搭載されるようになったんです。

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

 

例えば当ブログの右下には「Topへ戻る」ボタンがひょこっと出るようになってます。

これがそのままスマホ上でも表示されると見た目に邪魔で、他のコンテンツが見えにくくなりがちというデメリットがあります。

それにiPhoneの画面最上部をタップすれば「トップへ戻る」ボタンと同じ働きをしてくれるので、実際「なし」でも何の問題もないわけです。

（この機能を知ってる人、どれだけいるんだろう）

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

しかしこれからは「wp_is_mobile」を記述するだけで事は足りてしまいます。

実際の記述

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

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

 

②上と全く反対で、スマホでの表示時のみ特定のコンテンツを表示させない

（wpの前に反意を意味するびっくりマークを付けることで｢モバイル機器以外なら→つまりPCでの表示だったならば｣という意味になります）

 

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

 

なお”非表示”の方法としてはCSSの「display:none」を使う方法もあります。

ただしこれはさまざまな問題を引き起こしかねない諸刃の剣的なプロパティなので、できるだけ使わない方がいいでしょう。

以上です。