スマートフォン向けWordPressサイトにPCとスマホのテーマ切り替えボタンを設置する方法

PCにとスマートフォンのユーザーエージェントを判別して、デバイス毎にテーマを切り替えるプラグインはいくつもありますが、今の時点ではもっとも「使える」プラグインを発見しました！

ユーザーの任意でテーマを切り替えることができなかったり、切り替えボタンがあってもサイト最下部に固定というプラグインが多いですが、このプラグインはテーマの切り替えスイッチを簡単に任意の場所に設置することができます。

仕様するプラグインは「Multi Device Switcher」

PCとスマホ表示を切り替えに使用するプラグインとしては有名ドコロなのではないでしょうか。

プラグインはこちらからダウンロード↓
http://wordpress.org/plugins/multi-device-switcher/

このプラグイン、昔はテーマ切り替え機能が付いていかなったのですが、いつの間にか実装されていました！

ちなみに切り替え機能実装以前は、「MW Theme Switcher on Multi Device Switcher」という有志の方が作成された拡張プラグインを使用して、テーマ切り替えボタンを設置していたのですが、もう必要ありません！！

また「any mobile theme switcher」というテーマ切り替えのプラグインもありますが、こちらはURLの末尾に”?am_force_theme_layout=desktop”と付けたリンクと、”?am_force_theme_layout=mobile ”と付けたURLで切り替えが出来るようです。

ただ僕の環境では、スマホテーマからPCテーマに切り替えた後、ページ移動するとまたスマホテーマに戻ってしまい使用を断念しました。

使い方は簡単！URLの末尾にパラメーターを付けるだけ！

そもそも「Multi Device Switcher」にテーマ切り替え機能が付いていますので、それを使用すればいいのですが、それだとサイトの最下部にしか設置されません。

ただ、その機能をオフにしていても、テーマ切り替えのためのURLさえ設置できていれば、その場所が切り替えリンクとなります。

PCテーマに切り替えるためのリンク

<?php bloginfo('url'); ?>/?pc-switcher=1

テーマを戻すためのリンク

<?php bloginfo('url'); ?>/?pc-switcher=0

これだけです！

PCからアクセスしたユーザーにはテーマを戻すボタンを見せない設定にする

スマートフォンからアクセスしたユーザーに対し”PCテーマへの切り替えリンク”を、さらにPCテーマに切り替えた後に”元のテーマに戻す”が表示する設定にしてしまうと、PCからアクセスしたユーザーにも、スマホテーマに戻すためのリンクが見えてしまいます。

そこで、wp_is_mobile関数を使用して、PCユーザーにはスマホテーマに戻すためのリンクを見せないように設定しましょう。

<?php if (is_mobile()) : ?>
	// スマートフォン向けの記述（ようするにテーマを戻すリンク）
<?php else: ?>
	// その他用コンテンツ（何も書かないでいんじゃないかな）
<?php endif; ?>

しかしここにも落とし穴が！！そのままのwp_is_mobile関数を使用しただけでは、iPhoneやAndoroid以外にiPadなどのタブレットにも反応してしまいます。

ですので、fanction.phpに以下の記述を付け足して、wp_is_mobile関数の適用範囲を決めましょう！

function is_mobile(){
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        'Android',         // 1.5+ Android
        'dream',           // Pre 1.5 Android
        'CUPCAKE',         // 1.5+ Android
        'blackberry9500',  // Storm
        'blackberry9530',  // Storm
        'blackberry9520',  // Storm v2
        'blackberry9550',  // Storm v2
        'blackberry9800',  // Torch
        'webOS',           // Palm Pre Experimental
        'incognito',       // Other iPhone browser
        'webmate'          // Other iPhone browser
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

これで、完璧です！！

最後に言うのもアレですが、どうもキャッシュを残すプラグインや機能との相性が悪い様です。なんだか上手く反映されない！って時には、その辺のプラグインを一度停止してみたら上手く行くかもしれません。

テーマ切り替えプラグインが反映されない等のトラブル時は

テーマ切り替えプラグインを有効化しているのに、反映されないトラブルの原因として、style.cssできちんとテーマを宣言していないというミスが挙げられます。

/*
Theme Name: hogehogee
Theme URI: http://hogehoge.com/
Description: hogehoge
Author: me
Author URI: http://hogehoge.com/
Version: 1.0
*/

Theme Name以外は適当でも問題ありませんので、style.cssの初めの部分に、しっかりとこの記述を書いておきましょう。

またheader.phpに「wp_header();」、footer.phpに「wp_footer();」が記述されていない何て凡ミスも時々みかけます。「デフォルトの切り替えボタンが反映されない」というアナタは、もしかしたらこれが原因かもしれませんね！