ご相談・お問い合わせはこちらから

WordPressプラグイン「Multi Device Switcher」でAndroidスマホとタブレット端末のWordPressテーマ切り替え方法

(2015年5月25日追記) WordPressプラグイン「Multi Device Switcher」バージョン 1.4.2 以降からアンドロイド端末のスマホとタブレット別々にテーマが切り替わるように仕様を変更しました。いままでこの記事を参考に手動でやってもらっていましたが、これからは必要ありません。WordPressプラグイン「Multi Device Switcher」を有効化するだけでテーマが切り替わります。すでにユーザーエージェントを変更されている方は、 Default UserAgent を参考にユーザーエージェントが編集できます。これからもWordPressプラグイン「Multi Device Switcher」 をよろしくお願いいたします。

WordPressプラグイン「Multi Device Switcher」は iPhone, iPod, Nexus 7 などデバイスの名称 (ブランド) をベースに WordPress のテーマを切り替えることを基本としています。

そこで問題になるのが Android OS のデバイスです。 Android はオープンソースで、メーカーは Android を自由にデバイスに組み込めるため、いろいろな Android 端末がリリースされます。ほんとうに多彩です。

現状「Multi Device Switcher」でもデフォルトのユーザーエージェント設定は、スマートフォン用のユーザーエージェントに「Android」が入っています。Android が搭載されているスマホとタブレット端末の両方がスマートフォン用テーマに切り替えられます。

そこで「Android スマホとタブレット端末別々に切り替えられないの?」「やってみたけれどうまくできなかった」とご質問をいただきます。

Android スマートフォンとタブレット端末でウェブページをブラウザで閲覧するとユーザーエージェントには両方とも「Android」の文字列が入ります。ここがくせ者になっています。

またタブレット端末は PC 用のウェブサイトが表示されることを期待している場合も。

ということで前置きが長くなりましたが、WordPressプラグイン「Multi Device Switcher」で Android に対応したテーマの切り替え方法をシェアしたいと思います。

Androidスマホとタブレット端末のWordPressテーマ切り替え設定の仕方

WordPressプラグイン「Multi Device Switcher」の新機能「Custom Switcher」を使って Android スマホとタブレット端末のテーマを切り替えます。

Android スマホはスマートフォン用テーマに切り替え、タブレット端末は PC 用ウェブサイト (通常のテーマ) を表示する

  1. WordPress メニュー「外観 > マルチデバイス」へ
  2. Custom Switcher に「Android」と入力して「追加」ボタンを押します。
  3. タブを「ユーザーエージェント」に切り替えて「Android」の項目に「Android.*mobile」を入力。
    Android.*mobile
  4. 「スマートフォン」にあるユーザーエージェント「Android」を削除。
    iPhone, iPod, dream, CUPCAKE, Windows Phone, webOS, BB10, BlackBerry8707, BlackBerry9000, BlackBerry9300, BlackBerry9500, BlackBerry9530, BlackBerry9520, BlackBerry9550, BlackBerry9700, BlackBerry 93, BlackBerry 97, BlackBerry 99, BlackBerry 98
  5. タブを「テーマ」に切り替えてテーマを選びます。Custom Switcher「Android」で Android スマホでウェブサイトを見たときに切り替えるテーマを選びます。
  6. 「タブレット端末用テーマ」で「None」を選びます。
  7. 「変更を保存」ボタンを押します。
  8. 設定完了

Android スマホはスマートフォン用テーマに切り替え、タブレット端末はタブレット端末用テーマに切り替え表示する

  1. WordPress メニュー「外観 > マルチデバイス」へ
  2. Custom Switcherに「Android」と入力して「追加」ボタンを押します。
  3. タブを「ユーザーエージェント」に切り替えて「Android」の項目に「Android.*mobile」を入力。
    Android.*mobile
  4.  「スマートフォン」にあるユーザーエージェント「Android」を削除。
    iPhone, iPod, dream, CUPCAKE, Windows Phone, webOS, BB10, BlackBerry8707, BlackBerry9000, BlackBerry9300, BlackBerry9500, BlackBerry9530, BlackBerry9520, BlackBerry9550, BlackBerry9700, BlackBerry 93, BlackBerry 97, BlackBerry 99, BlackBerry 98
  5. 「タブレット端末」にユーザーエージェント「Android」を追加。
    iPad, Kindle, Sony Tablet, Nexus 7, Android
  6. タブを「テーマ」に切り替えてテーマを選びます。Custom Switcher「Android」で Android スマホでウェブサイトを見たときに切り替えるテーマを選びます。
  7. 「タブレット端末用テーマ」でテーマを選びます。
  8. 「変更を保存」ボタンを押します。
  9. 設定完了

以上、「Custom Switcher」を使った Android スマホとタブレット端末のテーマ切り替え方法でした。いかがでしたでしょうか。是非活用してみてください。

WordPressプラグイン「Multi Device Switcher」のダウンロード・インストール / 関連リンク・記事

コメント(0)

名前 必須
メールアドレス
URL
コメント

新しいサービスのアイデアに役立つデベロッパーブログです。IT/Web技術メモや問題解決策、開発に役立つTips、作ったソフトウェアやツールの紹介。

プロフィール

Thingsym (シングスワイエムと発音します)

個人事業・小規模・中小企業のマーケティングやITネット活用、ウェブサイト改善をしています。個別プログラムで経営者の経営課題を戦略・施策実務・技術の面で解決に導くのが主な仕事。ウェブサービスをつくってアイデアをカタチにしているウェブエンジニア・デベロッパーの面も。プログラムを書いたり、設計をしたり、メディアを作ったり。

最近のテーマは、創造性 (creativity)、マーケティング (marketing)、マネジメント (management)

グローバルブログ (英語)

Twitter, GitHub, WordPress

最近のコメント

  • ありがとうございます。 特に不具合はおき (thingsym)
  • Custom Post Type Wid (ShiyuuNoda)
  • キャッシュ系のプラグインをWordPre (thingsym)
  • いつもお世話になっています。 初めて質問 (岡田)
  • ご報告ありがとうございます。 そうですね (thingsym)
  • こんにちは。Custom Post Ty (Kei)
  • ご報告ありがとうございます。 エラーは (thingsym)
  • こんにちは最近 vagrant を使い始 (enomoto)
  • 切り替えにスマホ用のテーマはインストール (thingsym)
  • はじめまして。WP初心者になります。スマ (野澤)
ページの先頭へ