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

Posted on by

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

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

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

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

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

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

Google ウェブマスター向け公式ブログ: タブレット端末ユーザーにはフルサイズのウェブを表示しましょう
Official Google Webmaster Central Blog: Giving Tablet Users the Full-Sized Web
ということで前置きが長くなりましたが、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」を入力。
    4. Android.*mobile
  4. 「スマートフォン」にあるユーザーエージェント「Android」を削除。
    5. 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」を入力。
    4. Android.*mobile
  4. 　「スマートフォン」にあるユーザーエージェント「Android」を削除。
    5. 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」を追加。
    6. iPad, Kindle, Sony Tablet, Nexus 7, Android
  6. タブを「テーマ」に切り替えてテーマを選びます。Custom Switcher「Android」で Android スマホでウェブサイトを見たときに切り替えるテーマを選びます。
  7. 「タブレット端末用テーマ」でテーマを選びます。
  8. 「変更を保存」ボタンを押します。
  9. 設定完了

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

This article referenced from http://blog.thingslabo.com