CSS？条件分岐？テーマ切替？WordPressの賢いモバイル対応

サイトの表示をデバイス画面ごとに振り分けて表示させる、レスポンシブ。ただ、昨今のデバイス画面のサイズ多様化に対処するには、昔ながらの方法では厳しい面も見えています。

今回はWordPressサイトで、これに賢く対応する方法について書いてみました。

レスポンシブデザインをCSSで設定する時の弱点

CSSでレスポンシブデザインのサイトを作成する際、表示されるコンテンツをそのサイトが表示される画面サイズの大きさによって、どのように表示されるかをスタイル設定できる機能がメディアクエリです。

このスタイルの切替ポイントをブレークポイントといいます。

こんな感じでデバイスの表示幅でCSSの設定をします。

しかし、メディアクエリでの設定は、CSSをそれなりにわかっていても結構面倒ですし、デバイスサイズの多様化に合わせてブレークポイントを増やすのも大変ですね。

また、display:noneの連発というあまり好ましくない事態も招きかねません(^_^;)

WordPressなら、条件分岐で表示させるコンテンツの制御が可能

さて、WordPressの場合はCSSで制御しなくても、wp_is_mobileを使った条件分岐でモバイルとPCで表示の切り替えができる、というお話は以前の記事「WordPressウィジェット エリアの追加・表示・条件分岐の方法」で書きました。

この方法なら、WordPressが静的なHTMLを生成する段階で、モバイルではこの表示、PCではこの表示、とすることができるので、HTML上もきれいです。

しかし、wp_is_mobileの場合、「モバイルとPC」という2つの振り分けのみ、

携帯電話・スマートフォンを特定して検知するわけではなく、タブレットもモバイルデバイスとして認識される
-引用：「WordPress Cordex関数リファレンス/wp is mobile」

なので、タブレット端末もモバイルに振り分けられる、んですね。

タブレットと言うと、iPadが真っ先に思い浮かぶのではないかと思いますが、昨今では各メーカーが競うようにタブレット端末を発表しています。

ここで問題になるのが、ノートPCの様に使われるタブレット端末でもモバイル表示で良いのか？というコト。

例えば、サーフェス プロ3 はモバイル端末として認識されるので、wp_is_mobileで振り分けると、表示もモバイル仕様になります。

スマートフォン想定表示を12インチ画面で見ると・・すっかすかになっちゃいますね(・∀・;)

もし、それが嫌なら、レスポンシブにするためのCSS設定（前述のメディアクエリですね）にIE用の特別なCSS設定をしとけってことらしいです^^;

まあ、相変わらずの唯我独尊なMSはさておき、このような事から、

• スマートフォン表示はなるべく軽く「モバイルフレンドリー」に
• でもタブレットにはPC寄りの見た目にしたい
• PC画面だけは大画像のスライドショーなども載せてデザインにこだわりたい

といった、よりデバイスに沿った表示振り分けを、出来れば簡単にしたいですよね。

そこでここでは、WordPressサイトでの、こういった場合の対応方法についてまとめてみました。

条件分岐設定をカスタマイズする

プラグインなどを使わずに、自分でカスタマイズしたい場合、次の記事の「is_mobileを使ってスマホとそれ以外を分岐する」で実現できます。

【WP初心者向け】is_homeとis_mobileを使ってカスタマイズの幅を広げよう！http://naifix.com/is_home-and-is_mobile/

※Elloraさん、いつも参考にさせていただいております、ありがとうございます(^^)

分岐する条件をコピー、後は表示・非表示の条件分岐をテーマに加筆していけば、OKです(^^)

条件分岐についての理解も深まる素晴らしい記事なので、ぜひご一読を(^^)

カスタマイズするのはやぶさかではないけれど、モバイルの細かい設定を管理するのが面倒だなぁという方には、プラグインもあります。

WordPressプラグイン、mobbleを使用する

mobbleのFAQページを見ると、実際に使用できる表示の条件分岐用タグを確認することができます。

一般的には、is_mobile　と　is_tablet　さえあれば何とかなりそうですが、これだけ有れば条件分岐に困ることはなさそうです。

但し、このプラグインではキャッシュプラグインW3 Total Casheとのコンフリクト（：プログラム同士の競合してうまく働かなくなる状態）が報告されています。

フォーラムなどで確認してみた限りでは、時々うまく動かないといった報告が寄せられています。キャッシュプラグインを使われている方は最初の方法をとられた方が良いと思います。

いっそのことMulti Device Switcher

さて、ちまちま条件分岐なんかしてるのめんどくさい！！！でも画面切り替えはしたい！！！もっと簡単にできるの無いの！？という方々は、いっそのこと、プラグインMulti Device Switcherが良いんじゃないかな、と思います。

PC画面の場合、タブレットの場合、スマホの場合、とテーマを切り替えることができるので、WordPressサイトをレスポンシブじゃないテーマで作っちゃった～（T-T）といった場合にはほんとに助かるプラグインという認識でしたが、

デバイスサイズの多様化が進む昨今、CSSでのレスポンシブだけで細かく対応するのも厳しい、条件分岐はテーマをいじらないとできない、でもPHPなんてわからないし！！(>_<)という場合にも良いじゃん！！(^^)とその良さを再認識した次第です。

SNSなどの独自の設定もプラグインを使えば全ての場合に適用されるので、簡単です(^^)
PCだけ、スマホだけ、といった設定はそれぞれ指定したテーマに設定すればOKです。

ではでは、今日はこの辺で。
「CSSメディアクエリ?条件分岐?テーマ切替?WordPressの”レスポンシブ”考」の巻でした(^^)

お役に立ちましたらシェアなどしていただけるとハッピーです(^^)

• ツイート
•