スマホとPCのテーマ切り替えは「Multi Device Switcher」がいい感じ

2014-07-05［WordPress］

当サイトではアフィリエイト広告を利用しています。

WordPressでスマホとPCのテーマ切り替えの定番といえば「WPtouch」だと思いますが、デザインの差別化が難しいとの声もあり「卒業」を検討している人も多いと思います（すでに卒業している人も多いか）。
WordPress関連記事

そんな人が次に使って便利なプラグインが、スマホとPCのテーマ切り替えを簡単にできる「Multi Device Switcher」になります。ほんとWordPressのプラグインはかゆいところに手が届くものが多いですね。

個人的には「WPtouch」でもデザインを変更して使えば、デザイン的な差別化は可能だと思っていますが、そうするとアップデートの度にテーマ設定をする必要があって、その手間が面倒に感じている部分もあります（勢いでプラグインをアップデートしてテーマを設定し直すのを忘れたことが何度あったことか^^）。

そんなこんなで「Multi Device Switcher」のお話

Multi Device Switcherの設定

１、WordPressのダッシュボードに入り、［プラグイン］→［新規追加］をクリック
２、「Multi Device Switcher」と入力して［プラグインの検索］をクリック
３、ダウンロード後［有効化］して終了

インストール自体は他のプラグインと同じなので問題はないと思います。

続いて［外観］→［マルチデバイス］をクリック
※マルチデバイスの中に「Multi Device Switcher」の設定が入っています。
MultiDeviceSwitcher01

「テーマ」タブの中にスマートフォン用テーマ、タブレット端末用テーマとそれぞれ設定できるようになっているので、切り替えて［変更を保存］するをクリックします。
MultiDeviceSwitcher02

これだけで、スマートフォン用のテーマを切り替えることが可能です。

もっとも、、、、、
スマートフォン用のテーマを先に作る必要があり、ここのハードルが少し高いのは確かですね。

スマートフォン用のテーマ…

「Multi Device Switcher」はスマートフォン用に最適化されたテーマかどうかは判断していなくて、WordPressのテーマフォルダに入っているテーマをすべてピックアップしています。

したがってオリジナルでテーマを作った場合はPC版のテーマと同じところに入れればOKとなります。もちろん記述方法に関してもWordPressのテーマのルールに沿った形で書かないと反映されたないので注意してください。

＜WordPressのデフォルトオリジナルを使うのもあり＞
スマートフォン用のテーマを作るのが大変という人は、PC版はオリジナルのテーマ（もしくはPCに最適化されたテーマ）を使い、スマートフォン用にはレスポンシブデザインで作られているWordPressのデフォルトテーマ（最新だとTwenty Fourteen）を使うのもありかもしれません。

「PC表示」の実装も簡単

スマホとPCのテーマ切り替えで気になる所に「任意に表示の切り替えが行えるか」という点があります。簡単に言うとスマートフォンでもPCのデザインで見ることができるかになります（逆ももちろんあります）。

これも「Multi Device Switcher」では「PC Switcher」というタブにある［PC Switcher を追加］にチェックを入れるだけでOKとかなりの親切設計になっています。
MultiDeviceSwitcher03

「デフォルトのCSSを追加」は「PC Switcher」のデザインをどうするかの問題なので、面倒な人はデフォルトのCSSを使い、デザイン的に手を入れたい人は吐き出されるソースを確認してオリジナルのCSSを設定すればいいかな。

＜ちょっとだけ注意＞
「PC Switcher をフッターに追加する」で追加されるのはWordPressのテーマの中で『<?php wp_footer();?>』と書かれた部分になります。万が一この記述がない場合は表示されないので注意してください（オリジナルでテーマの作った場合忘れる可能性が少しあります）。

また、意図的に『<?php wp_footer();?>』を書かない、もしくは任意の場所に設定したい場合は以下の方法で記述することで「PC表示」を出すことが可能です。

PC表示
[code]<a href="?pc-switcher=1">PC表示</a>[/code]

スマホ表示
[code]<a href="?pc-switcher=0">スマホ表示</a>[/code]

スマホとPCのテーマの切り替えの方法には、レスポンシブデザインにする手もありますが、PCのデザインにコダワリがあったり、ワンソースで対応するにはデータが重くなりすぎる等々踏み切れていない人も多くいると思いますので、「Multi Device Switcher」を使ったテーマの切り替えは便利だと思いますよ。