iPhone-chp

WordPressプラグインでスマホサイトを振り分ける

PCサイトとスマートフォンサイトの振り分けWordPressプラグインでスマホサイトを振り分ける「Multi Device Switcher」をご紹介します。

Multi Device Switcher」は、国産のWordpressプラグインですので、安心して使用できますし、標準でスマホとPCの切り替えが出来ようになっていますので、別途プラグインを導入する必要がありません。

「Mobile Smart」はエラー発生

PCサイトとスマホサイトを振り分けて、Wordpressのテーマを切り替えるプラグインは、「Mobile Smart」を使用していましたが、不具合があるらしく、下記の様にサイトの一番下にエラーが表示されてしまいます(H25.12.10現在)。

Mobile Smartを有効化するとサイトの最下位部にエラーが表示される
Mobile Smartを有効化するとサイトの最下位部にエラーが表示される

このエラーは、デバッグモード時に表示されるもので、通常時は表示されません。

私は、サイトをデザインするときは、まずMacのローカル環境で修正・確認してから、本番環境にコピーしていますので、このエラーに気付きました。通常では気付かないため、もし「Mobile Smart」を使用している方は、プラグインを変更されることをおすすめします。

「Multi Device Switcher」の導入・設定

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

  1. WordPressの「Multi Device Switcher」プラグインページからZIPファイルをダウンロードします。
  2. ダウンロードしたZIPファイルを解凍します。
  3. 「Multi Device Switcher」フォルダーをプラグインディレクトリ “/wp-content/plugins/” にアップロードします。
  4. WordPress管理メニュー「プラグイン」で「Multi Device Switcher」を有効化します。

または、

  1. WordPressの管理メニュー「プラグイン > 新規追加」から「Multi Device Switcher」で検索します。
  2. 「Multi Device Switcher」を今すぐインストールして有効化します。

「Multi Device Switcher」の設定

「Multi Device Switcher」の設定は、Wordpressの管理メニュー「外観 > マルチデバイス」から行います。

「Multi Device Switcher」のメイン設定画面が下の画像です。

Multi Device Switcher メイン オプション

  • スマートフォン用テーマ
  • タブレット端末用テーマ
  • 携帯モバイル端末用テーマ
  • ゲームプラットフォーム用テーマ

上記の各種デバイス用のテーマを個別に設定することが出来ます。

スマホとPC用テーマの切り替えボタンの設定

また、スマホとPC用テーマの切り替えも設定できます。

スマホとPC用テーマの切り替えスイッチ

下記が実際にモバイルサイトに表示されるスマホとPC用テーマの切り替えボタンです。
モバイルとPCの切り替え


コメントを残す