loading
 読み込み中...
ウェブの触手-日々の生活に新たなスパイスを-
アイキャッチ画像
Home > [Wordpress] > 【Wordpress】wp_is_mobile関数のおかげでとっても簡単になったスマホ対策条件分岐
この記事は約3分で読めます。
この記事は最終更新日から4年以上経過しているため現状にそぐわない可能性もあります。

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

投稿日:2013.2.13

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

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

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

SIRIUSレビューイメージ画像

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

とあるアンケート結果によれば
スマホなどのモバイル機器でのウェブサイト閲覧は
全体の 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」を表記から外しておきましょう。

以上です。

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

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

 ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓ ↓

スポンサーリンク

おススメTCDテーマ

WordPressテーマ「LAW (TCD031)」

コメント(3件)

コメントをどうぞ

入力いただいたメールアドレスは公開されません。
個人情報などを記入された場合、投稿いただいたコメントの該当箇所を編集して公開するか、もしくは非公開にします。

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

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

先頭へ