デバイスごとにテーマを分けるプラグイン『Multi Device Switcher』

前回の勉強会(ナビゲーションの回)でちろっと話題に出したプラグインについてです。
確か、レスポンシブデザインだとナビゲーションはマウスでクリックするわけじゃないから、太い指でも押せる大きさが必要とかいろいろ考慮が必要ですね、とかそんな話の流れだったかと思います。

マルチデバイス対応のサイトを作る方法として「レスポンシブデザイン」という手法があります。
レスポンシブデザインについては色々思うところは、別記事にしたのでそちらをご覧ください。(2015.7.17追記)

レスポンシブデザインの良いところとして、HTMLが同一であることやURLがデバイスによって変わらないという点はありますが、他方で、その特性ゆえに困難な点があります。

・HTMLが一緒であるためにPC向けの情報量とモバイル向けの情報量の切り分けが難しい
・スマホからPCの見た目でサイトを見ることができない

などが挙げられます。

そんな困りごとの解消になれば、と、紹介するプラグインは、デバイスごとにWPのテーマを切り替えてしまおう、というプラグインです。

『Multi Device Switcher』https://ja.wordpress.org/plugins/multi-device-switcher/

や、正直、その手があったかー!と思いましたとも。
ええ。

スクリーンショット 2015-07-16 18.03.14

インストールして有効化した後は、こんな風に、テーマを選ぶだけ。
簡単素敵。
※ドネーションウェアです。

実際に使ったときには、基本的にPC向けのページをレスポンシブデザインで構成しつつ、スマホやタブレット向けに、どうしても変えたい部分、例えば、ヘッダーやフッター、サイドバー部分みたいなところについて、PC向けのを親テーマにした子テーマでタブレット用、スマホ用を作って変更するようにしました。
レスポンシブデザインを基本にしたので、基本は親テーマのCSSで管理し、子テーマごとにjsの読み込みが必要であれば対応したり、という感じでした。
考えやすくなる部分も多かったので非常に助かりました。

ユーザーエージェントを取得して読み込むテーマを変えている、ということだと思うのですが、すみません、詳しい仕組みまでは把握してません・・・・。

スクリーンショット 2015-07-16 18.11.24

・ユーザーエージェントの編集、追加
・PC表示との切り替えボタンを設置
・PC表示との切り替えを無効にしたいページを指定できるらしい

案件によりけりだとは思いますが、レスポンシブデザインのちょっと痒いところに手がとどく感がなかなか良かったです。

今進めてる案件で使えたらいっぱい寄付する!!!まってて開発者さんっ!!!

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です