SPOTブログ

2013/01/31

Multi Device Switcherでスマホ表示してる際に、PC用テンプレートに切り替え出来るプラグイン MW Theme Switcher on Multi Device Switcherをカスタマイズしてみた

追記:2013/04/12 本家プラグインでPCとスマホの切り替え機能が実装されたようです。そちらで当ブログ記事もご紹介頂きました、ありがとうございます。

wordpressでスマホ対応といえば、WPtouchが定番ですが、コーポレートサイトの場合、そうもいきません。
レスポンシブWEBデザインもありなのですが、どうもデザインの制約が出てしまうと、検証コストの問題で断念し、今回はPCテンプレートとスマホテンプレートの二つをそれぞれ作ることにしました。

閲覧デバイスを判別し、テンプレートの切り替えを自動で行う動作はMulti Device Switcherに任せたのですが、このままだと、スマホで見た人はPC版のサイトを見ることが出来ません。

WPtouchには、切り替えボタンがついてるのですが、今回選択したMulti Device Switcherにはその機能はありません。
どうしたものかとググっていると、Multi Device Switcherにテーマ切り替え機能を追加するMW Theme Switcher on Multi Device Switcherというプラグインを作ってくださっている方がいたので、これをありがたく流用させていただくことにしました。

このプラグインをそのまま入れた状態だと、こんな感じになります。

うーん、ちょっとかっこわるい&使いにくそう。

そこで、カスタマイズして、このような表示に変えました。

どうでしょう?使いやすそうになってません??良くある感じでしょ?
今表示してるのがスマホ用なのかPC用なのか判別して、色がつくようなボタンに変えてみました。

本当はCSSだけで出来れば良かったんですが、無理そうなので、直接プラグインファイルをいじりました。

73~78行目までのコードを以下のように変更しました。

また、CSSは以下のようにしました

これで、良い感じのPC・スマホ切り替えボタンが出来ました。
PC版では切り替えボタンがちっちゃく見えてしまうので、サイズは%指定した方がより良いかもしれませんが、ご参考にどうぞ