今やユーザーはPCよりもスマートフォンでホームページを閲覧される事が多く、スマートフォン表示の対応が必要不可欠になってきました。

スマートフォンでの表示を行うには、

  • レスポンシブデザインのテーマを使用する
  • スマホ向けのプラグインを使用する

の方法があります。

弊社テーマではほとんどのテーマでレスポンシブテーマとなっておりますが、そうでない場合はレスポンシブに対応したテーマに切り替える必要があります。また、あえて、PCサイトとスマホサイトのテーマを変更したいという場合もあるかもしれません。

そういった場合に、デバイスごとにWordPressテーマの切り替えが可能なプラグイン「Multi Device Switcher」を、紹介します。

「Multi Device Switcher」のインストール

管理画面から「Multi Device Switcher」を検索してインストールして下さい。

mds01

もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。

Multi Device Switcher

インストール後、管理画面の【プラグイン】より【Multi Device Switcher】を有効化してください。有効化すると「外観」→「マルチデバイス」の画面が表示されます。

「Multi Device Switcher」の設定方法

下記が設定画面となります。初期設定では、各デバイスの部分が「なし」となっており、パソコンの表示と同じになります。

※レスポンシブ対応テーマの場合は、特に設定を行わなくても、テーマ仕様どおりのスマホ用表示となります。

テーマ

mds02

各デバイスの設定を行うには▼のボタンをクリックします。下記のようにテーマが選択できますので、
インストール済みのテーマから好きなテーマを選択してください。
mds10

テーマを変更しましたら、設定を保存してください。

※スマホ用に設定したテーマのテーマオプションや「スマホ用ウィジェット」等の独自機能は、テーマ仕様どおりにはご利用いただけない場合もありますのでご注意ください。

ユーザーエージェント

ユーザーエージェントのタブをクリックすると下記のページが表示されます。
ここに出てきた一覧が対応している機種となっています。特定の製品のみ表示を変更したい場合などは下記より設定してください。
mds03

PC Switcher

PC Switcherは、ユーザーが表示テーマを切り替えるためのボタンです。
タブレットやスマホでも通常のパソコン表示テーマの方で表示させたいという場合があります。
ユーザー側が選択出来る事でユーザビリティー向上につながります。
mds04

チェックをいれ保存するとスマホでは下記のように表示されます。
mds11

「PC Switcherをフッターに追加する」で追加されるのはWordPressのテーマの中で『＜?php wp_footer();?＞』と書かれた部分になります。万が一この記述がない場合は表示されないので注意してください。

また、任意の場所に切り替えボタンを表示したいという場合は下記のタグを直接入力してください。

//PCへの切り換えボタン
<a href="?pc-switcher=1">PC表示</a>
//スマホへの切り換えボタン
<a href="?pc-switcher=0">スマホ表示</a>

切り替え無効

表示させたいページのURL（ドメインは除く）を記述して保存するとPC版で表示することができます。

mds05

ただし、スマホ版で表示されていた画面が突然PC版が表示されるのでユーザビリティーを考えると不要な機能かもしれません。

テーマの切り替え例

それでは、実際にTCDテーマでレスポンシブではない「Grider(TCD015)」を例に、スマホでは「LUXE(TCD022)」に変更してみます。
通常時は「外観」→「テーマ」より「Grider(TCD015)」を設定しておきます。

「Multi Device Switcher」を何も設定していない状態では、このように表示されます。

PC表示
mds12

スマホ表示
mds15

「Multi Device Switcher」を用い、スマホ表示では、「LUXE(TCD022)」となるように設定します。
mds14

そうすると、スマホでの表示は以下のようになります。
mds16

もちろん「PC Switcher」機能を設定している場合は、PCボタンを押すと、「Grider(TCD015)」の表示にすることができます。

まとめ

以上で「Multi Device Switcher」の解説を終了します。レスポンシブデザインが一般化しており、レスポンシブ化のために使う事は少ないかもしれませんが、PCサイトとスマホサイトの表示を変えたい場合には非常に便利なプラグインとなります。ぜひお試し下さい。