アイキャッチ画像
HOME > Wordpress > 【WordPress】wp_is_mobile関数のおかげでとっても簡単になったスマホ対策条件分岐
記事公開日:2013.2.13
記事更新日:2013.2.21
この記事は約3分で読めます。
当ページのリンクにはプロモーションが含まれています。

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

この記事は最終更新日から10年以上経過しているため現状にそぐわない可能性もあります。
この記事は2013.2.21に加筆修正しました

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

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

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

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

スポンサーリンク

スポンサーリンク

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

とあるアンケート結果によれば、スマホなどのモバイル機器でのウェブサイト閲覧は全体の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」を使う方法もあります。

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

追記 -2013.2.21-

「wp_is_mobile」はiPhone(スマホ)だけでなくiPad(タブレット)も含みます。

もしもiPad(タブレット)上はPCと同じ表示にしたい場合は「is_mobile」を使った方がいいでしょう。

その際はコード3行目の「iPad」を表記から外しておきます。

以上です。

ワードプレス有料テーマの探し方画像

スポンサーリンク

記事はお役にたてましたか?

記事に興味をもっていただけたらソーシャルボタンでの共有お願いします^^

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

3件のコメント

コメントはお気軽にどうぞ

メールアドレスは公開されません。
* が付いている欄は必須項目です。

内容に問題なければ下記の「コメントを送信する」ボタンを押してください。

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