無料相談・お問い合わせ
ブログを移転しました。
移転先 札幌のホームページ制作・Wordpressのハルリのブログ
Haluri Blog

wordpressでレスポンシブデザインのサイトを作る時に便利な条件分岐タグ is_mobile

2014年 1月7日  Wordpress

スマートフォン

このサイトのアクセス解析を見ると、スマートフォン・タブレットからのアクセスが多い時では、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 if (wp_is_mobile()): ?>
モバイルの時
<?php else: ?>
パソコンの時
<?php endif; ?>

たったこれだけでOKです!
とっても簡単ですね。

広告の切り替えなどで使えるかと思うので、wordpressでレスポンシブデザインのサイトを作る際はぜひお試しください。

  • このエントリーをはてなブックマークに追加


Facebookページにご参加ください

ホームページの作成やSEO対策、Wordpress、WEBマーケティングなど、様々なタメになる情報を配信しています。Facebookページへの参加は下の『いいね!』ボタンをクリックしてください。

関連記事

人気記事

コメント

お名前

コメント本文


pagetop