wordpressでレスポンシブデザインのサイトを作る時に便利な条件分岐タグ is_mobile
このサイトのアクセス解析を見ると、スマートフォン・タブレットからのアクセスが多い時では、40%近くになっていて、モバイル対応の大切さを感じる今日この頃です。
モバイルの対応方法はいくつかありますが、最近多くなってきているのが、レスポンシブデザインです。
レスポンシブデザインとは?
わかりやすく説明すると、通常はパソコン用・モバイル用の2つのサイトが必要になるのですが、レスポンシブデザインはパソコン用・モバイル用両方兼ねたサイトの作り方のことです。
1つのサイトで済むので管理が楽、そして最近グーグルもレスポンシブデザインを推しているようなので、SEO対策の観点で見ても良いのかもしれません。
「それならモバイル対応するのなら、全部レスポンシブデザインで作ればいいじゃないか!」と思うかもしれませんが、通常のモバイル対応の方法はパソコン用・モバイル用で2つのサイトを作るので作業量が2倍なのに対し、レスポンシブデザインだと、作業量は1.5倍くらいで、モバイルで表示した時のことも考えながらコーディングしていくので、面倒臭さは2倍です(笑)
あとは、ちょっと作り方が難しいのもあって、レスポンシブデザインをやっていないホームページ作成会社もあります。
私もレスポンシブデザインは良いと思うので、時間を作って個人的なサイトをコツコツレスポンシブデザインにリニューアルしています。
まだまだ一般的に知られていることではなく、知らないお客様もいるかと思いますので、通常サイトで依頼をしていただいたお客様にもレスポンシブデザインをご説明して、おすすめしています。
少しレスポンシブデザインの説明が長くなりましたが、まだご存じない方がいらっしゃったら、この機会に覚えていただければ幸いです。
wordpressでレスポンシブデザインのサイトを作る時に便利なis_mobile
まだレスポンシブデザインの知名度が低いため、まずは説明から入った方がいいだろうという親切心から前置きが長くなりました(笑)
今回はwordpressでレスポンシブデザインのサイトを作る時に便利な条件分岐の話です。
レスポンシブデザインでサイトを作る時に、ブラウザの幅によってCSSを切り替えるので、パソコンの時はモバイル用の部分をdisplay:none;(モバイルの時はその逆)でも良いのですが、wordpressにはレスポンシブデザインの時に便利な条件分岐タグがあります。
それが、is_mobileです。
is_mobileの使い方
is_mobileの使い方は通常の条件分岐と同じです。
is_mobileの場合は、モバイルの時は~、それ以外(パソコン)の時は~といった使い方です。
実際のコードは以下の通りです。
モバイルの時
<?php else: ?>
パソコンの時
<?php endif; ?>
たったこれだけでOKです!
とっても簡単ですね。
広告の切り替えなどで使えるかと思うので、wordpressでレスポンシブデザインのサイトを作る際はぜひお試しください。