WordPress(ワードプレス)でホームページを作りたい、カスタムしたいという人のためのサイトです。

PCとモバイルで表示を切り替えるテンプレートタグ 「wp_is_mobile」

TOP > テンプレートタグ > PCとモバイルで表示を切り替えるテンプレートタグ 「wp_is_mobile」

WordPressを使ってということに限らずですが、サイトを運営しているとモバイル環境への対応を考えるときがあると思います。
よく聞くレスポンシブウェブデザインもどのデバイス(閲覧環境)でも表示を最適化させようという目的で導入しますよね。
ただ、今一般的にいわれているレベルでのレスポンシブウェブデザインだけではどうしても対応できない場合もあります。
例えばコンテンツ内容を環境によって切り替えるというものとか。
今の一般的なレスポンシブウェブデザインはCSSで画面解像度に合わせて表示を切り替えるというものです。
そのためHTMLや画像は基本的には同じものを使用して、見た目のみを変化させるというスタイルが主流です。
なのでPCの場合はPC用のコンテンツ、モバイルの場合はモバイル用コンテンツと切り替えるという対応ではありません。

基本的にはこういう切り替えるタイプのものはプログラム側、サーバー側で処理することなので現状のレスポンシブウェブデザインだけでは難しいです。(やろうと思えばできますが難易度は高いのでオススメできません。)

でも、Wordpressなら安心。
きちんと対応してくれるタグがあります。
それがwp_is_mobile

wp_is_mobileを使ってPCとモバイルの表示を切り替えよう!

wp_is_mobileの具体的な使用方法はこちら。

wp_is_mobileの記述例

<?php if (wp_is_mobile()) : ?>
モバイル用コンテンツを表示
<?php else: ?>
PC用コンテンツを表示
<?php endif; ?>

この記述をテンプレート内に書き込めばOKです。
内容を完全に切り分けできるので汎用性が非常に高いです。
現状のレスポンシブウェブデザインの問題である「全てのコンテンツを表示させるので表示が遅い」という問題もクリアできます。

具体的な利用シーン

では実際にどのような場面で使うか考えてみます。
例えば広告の表示を切り替える場合。
PCではネットショッピングサイトへのアフィリエイト広告を表示させ、モバイルではクリック課金型の広告を表示させるということが可能です。
直接の販売になりやすいPC、クリック単価の高いモバイル課金型広告を持っている場合に役に立ちそうです。

例えばFlashを使用したい場合。
iPhoneが登場してきてからというものFlashは今や過去のコンテンツというような位置付けになりつつありますが、表示させるデバイスを切り分ければFlashはまだまだ現役で使えるよい表現の方法です。
PCではFlashを表示させ、モバイルではHTML5を使ったリッチコンテンツで表示させるということも可能です。
Flashでしかできない視覚効果の高いビジュアルでの訴求をきちんと対応できるメリットはとても大きいと思います。

というように、使い方によってとても便利に使えるタグです。
覚えておくことに損はないので、是非覚えましょう。


« »

ABOUT THE AUTHOR

こしもあんず
こしもあんず

Wordpressをカスタマイズすることが好きなギーク女子です。
好きなエディタはSublimetext2です。
Google+やってるので、よろしくです。
デザインは好きですが、PHPはあまり得意ではないのでその辺ご容赦くださいね。


Twitterはこちら
https://twitter.com/wordpresscusto1

ad