中小企業のマーケティングやブランディングのコンサルティング。事業運営、組織運営のPDCA改善やホームページの制作、ウェブサイト改善などITネット活用を中心にサービスを提供しています。

テーマの切り替えを無効にする新機能「Disable Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりました

デバイス毎にテーマを切り替える WordPressプラグイン「Multi Device Switcher」を大幅に新機能を追加してアップデートしました。

アップデート内容は4つあります。テーマの切り替えを無効にする新機能「Disable Switcher」はじめ、WordPressのコマンドラインツール WP-CLI に対応した「Multi Device Switcher Command」、WordPressの管理画面にあるテーマカスタマイザー対応、Cookieを実装して JavaScript でのデバイス判定も可能になりました。

テーマの切り替えを無効にする「Disable Switcher」

「Disable Switcher」は、アクセスしたURLアドレスと設定画面で設定したパスとが一致した場合、そのページのテーマの切り替えが無効になります。また上級者向けに正規表現モードをオンにすると、通常文字列で判定されるところを、正規表現を使ったテーマの切り替えの無効ができます。

たとえば、以下のようにパスを設定すると。

/sample-page
/2015/01/hello-world

http://DOMAIN/sample-page と http://DOMAIN/2015/01/hello-worldにスマホ等でアクセスした場合、通常はスマホ用のテーマに切り替わって表示されるところ、PC用のテーマで表示されます。

「正規表現を有効化」をチェックして正規表現モードで以下のように設定すると。

\/sample\-
\/2015\/01

http://DOMAIN/sample- と http://DOMAIN/2015/01 の正規表現に一致するアドレスの場合、PC用のテーマが表示されます。

コマンドラインツール「Multi Device Switcher Command」

「Multi Device Switcher Command」は、WordPress の管理画面で設定していたことを、ターミナルを使ってコマンドで操作ができるコマンドラインツールです。

WordPressのコマンドラインツール「WP-CLI」がインストール済みの場合、WordPressプラグイン「Multi Device Switcher」を有効化すると、コマンドラインツール「Multi Device Switcher Command」がアドオンされます。ターミナルから Multi Device Switcher の設定ができるコマンドが使えます。

ターミナルから以下を入力すると、

wp multi-device status

Multi Device Switcher の設定一覧が確認できます。

Active Theme: Twenty Fifteen | twentyfifteen
+--------------------------+-----------------+----------------+-------------------------------------------------------------------------+
| Device                   | Theme           | Slug           | UserAgent                                                               |
+--------------------------+-----------------+----------------+-------------------------------------------------------------------------+
| smartphone (Smart Phone) | Twenty Fourteen | twentyfourteen | iPhone, iPod, Android, dream, CUPCAKE, Windows Phone, webOS, BB10, Blac |
|                          |                 |                | kBerry8707, BlackBerry9000, BlackBerry9300, BlackBerry9500, BlackBerry9 |
|                          |                 |                | 530, BlackBerry9520, BlackBerry9550, BlackBerry9700, BlackBerry 93, Bla |
|                          |                 |                | ckBerry 97, BlackBerry 99, BlackBerry 98                                |
| tablet (Tablet PC)       | Twenty Thirteen | twentythirteen | iPad, Kindle, Sony Tablet, Nexus 7                                      |
| mobile (Mobile Phone)    | Twenty Twelve   | twentytwelve   | DoCoMo, SoftBank, J-PHONE, Vodafone, KDDI, UP.Browser, WILLCOM, emobile |
|                          |                 |                | , DDIPOCKET, Windows CE, BlackBerry, Symbian, PalmOS, Huawei, IAC, Noki |
|                          |                 |                | a                                                                       |
| game (Game Platforms)    | Twenty Eleven   | twentyeleven   | PlayStation Portable, PlayStation Vita, PSP, PS2, PLAYSTATION 3, PlaySt |
|                          |                 |                | ation 4, Nitro, Nintendo 3DS, Nintendo Wii, Nintendo WiiU, Xbox         |
+--------------------------+-----------------+----------------+-------------------------------------------------------------------------+
PC Switcher: on
default CSS: on

スマートフォン用のテーマを設定するには、

wp multi-device theme smartphone twentyfifteen

モバイル用のテーマを確認するには、

wp multi-device mobile

タブレットのユーザーエージェントを設定するには、

wp multi-device useragent tablet 'iPad, Kindle, Sony Tablet, Nexus 7'

Custom Switcher を追加するには、

wp multi-device add example

切り替えるテーマとユーザーエージェントと一緒に Custom Switcher を追加するには、

wp multi-device add example twentyfifteen 'iPad, Kindle, Sony Tablet, Nexus 7'

Custom Switcher を削除するには、

wp multi-device delete example

デフォルトCSSをオンにするには、

wp multi-device css on

オフは、

wp multi-device css off

という感じでコマンドだけでできるようになりました。

ヘルプは以下の通り。

NAME

wp multi-device

DESCRIPTION

Multi Device Switcher Command

SYNOPSIS

wp multi-device <command>

SUBCOMMANDS

add              add Custom Switcher
css              turn on/off default CSS
delete           delete Custom Switcher
pc-switcher      turn on/off PC Switcher
reset            reset Settings to Default UserAgent
status           get status of settings
theme            get or switch a theme
useragent        get or set UserAgent

使い方やサブコマンドの詳細は、wp help multi-device <SUBCOMMANDS> で確認できます。

テーマカスタマイザー対応

WordPressの管理画面にあるテーマカスタマイザーで切り替えるテーマが選べるようになりました。

こんな感じで切り替えるテーマが選べます。

JavaScript と Cookie でデバイス判定をして表示切り替えも可能に

以前にデバイスを判定する is_multi_device関数を実装してテーマ開発で活用できるようになりましたが、今回新たに切り替えの状態を保持した Cookie を実装しました。JavaScript で Cookie を取得してデバイスの判定ができます。広告など表示の切り替えも可能になりました。

サンプルコード

 <script src="http://DOMEIN/PATH/TO/jquery.cookie.js"></script>
<script>
(function($) {
$(function() {
if ( $.cookie( 'multi-device-switcher' ) == 'smart' ) {
/* smartphone specific stuff here */
} else if ( $.cookie( 'multi-device-switcher' ) == 'tablet' ) {
/* tablet specific stuff here */
} else {
/* pc or other stuff here */
}
});
})(jQuery);
</script>

Cookieは、multi-device-switcher disable-switcher pc-switcher と3つあります。それぞれの状態を組み合わせた判定も可能です。

Cookie

  • multi-device-switcher 切り替えているデバイス名 (value: null | device name)
  • disable-switcher 切り替え無効の状態 (value: null | 1)
  • pc-switcher スマホ等でのPC表示切り替え中の状態 (value: null | 1)

以上、テーマのカスタマイズで是非活用してみてください。


Download:

WordPress のプラグインページからどうぞ。

Installation:

WordPress プラグイン「Multi Device Switcher」のインストール詳細はこちらからどうぞ。

Code Repository:

thingsym / multi-device-switcher (GitHub)

Licenses:

Licensed under GPL version 2.0

Donationware:

よろしければ、開発とメンテナンスのために寄付していただければうれしいです。


Donationware




シェア

テーマの切り替えを無効にする新機能「Disable Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりましたへの2件のコメント

  1. golorih

    Multi Device Switcherをありがたく利用させて頂いております。
    あるサーバで Disable Switcher 機能が正常に動作しなかったので簡単にご報告だけさせてください。
    Ver 1.4.1 の【 multi-device-switcher.php 】の260行目辺りにある下記の行の正規表現が原因でした。
    $disable_path = preg_split( ‘/\R/’, $options[‘disable_path’], -1, PREG_SPLIT_NO_EMPTY );
    使用しているサーバの改行コードがデフォルトで \r\n だったらしく、ここで split に失敗して動作しない状態になっておりました。
    こちらでは正規表現部を ‘/\r\n/’ に変更することで対応できました。
    報告は以上です。
    最後になりますが、大変便利なプラグインをご提供くださりありがとうございます!

  2. thingsym

    ご報告ありがとうございます。見直してみます。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

購読