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

モバイルサイトとPCサイトを切り替える新機能「PC Switcher」がWordPressプラグイン「Multi Device Switcher」に加わりました

デバイス毎にテーマを切り替える WordPress プラグイン「Multi Device Switcher」には、いままでスマートフォン用サイトと PC 用サイトの切り替え機能を付けていなかったのですが、今回アップグレードして新たに付けてみました。

以前も @inc2734 さんが Add-On な感じで「MW Theme Switcher on Multi Device Switcher」を作ってくれています。

日本国内ではいろいろ紹介されて活用されていますが、

プラグイン「Multi Device Switcher」は海外でも使われていることもあり、できないの? と海外からご要望もあったりします。そこで今回のアップグレードで、PC 用サイト (デフォルトで設定しているテーマ) に切り替えができる「PC Switcher」という機能をつけて対応することにしました。

プラグイン「Multi Device Switcher」でテーマが切り替わってスマートフォン用サイトなどを閲覧している時に、切り替えボタンをタップするだけで PC 用サイト (デフォルトで設定しているテーマ) に切り替えて見ることができます。

切り替えボタンの設置は 3 つの方法があります

1. オプション設定でフッターに表示

一番簡単な方法。

multi-device-switcher-1.2.0-screenshot-3.png
  • WordPress メニュー「外観 > マルチデバイス」へ
  • オプション「PC Switcher」でチェックボックス「PC Switcher をフッターに追加する」をチェック
  • 完了

2. ウィジェットエリアに表示

プラグイン「Multi Device Switcher」を有効化すると、ウィジェット「PC Switcher」が Add-On されます。サイドバーにあるウィジェットエリアに切り替えボタンが設置できます。

設定は、

  • WordPress メニュー「外観 > ウィジェット」へ
  • ウィジェット「PC Switcher」をウィジェットエリアにドラッグ & ドロップ
  • 完了

3. テーマにコードを埋め込んで表示

テーマ開発者やテーマをカスタマイズする方向け。出力するHTMLをそのまま使ってもいいのですが、テーマに埋め込むだけで切り替えボタンが設置できるコードを用意してみました。

以下のコードをテーマPHPファイルに追加してください。

<?php if ( function_exists('multi_device_switcher_add_pc_switcher') ) { multi_device_switcher_add_pc_switcher(); } ?>

デフォルトのボタンも CSS でデザインをカスタマイズ

デフォルトの切り替えボタンは、オプション「PC Switcher」でチェックボックス「デフォルトCSSを追加する」をチェックするとこんな感じのボタンになります。

multi-device-switcher-1.2.0-screenshot-4.png

チェックを外すと、デフォルトCSSを読み込みません。スタイルシートで切り替えボタンがデザインできるようにしてみました。

切り替えボタンの HTML は、

<div class="pc-switcher"><span class="active">モバイル</span><a href="http://DOMEIN/PATH/TO/?pc-switcher=1">PC</a></div>

切り替わっているときの HTML は、

<div class="pc-switcher"><a href="http://DOMEIN/PATH/TO/?pc-switcher=0">モバイル</a><span class="active">PC</span></div>

以上、よかったら是非活用してみてください。

Languages:

English

Download:

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

Installation:

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

UserAgent Settings Samples (Wiki):

Code Repository:

thingsym / multi-device-switcher (GitHub)

Licenses:

Licensed under GPL version 2.0

Donationware:

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

Donationware

コメント(1)

環境が悪いのか、スマートフォン(モバイル)使用時にPCテーマが表示される場合が多々あります。

ですので、任意の場所にSwitcherをPCテーマにも表示させたいのですがどうすればよいでしょうか?(スマホテーマ時には最下部に表示されていました)

CloudflareというCDNを利用しています。

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

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

プロフィール

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

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

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

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

Twitter, GitHub, WordPress

最近のコメント

  • キャッシュ系のプラグインをWordPre (thingsym)
  • いつもお世話になっています。 初めて質問 (岡田)
  • ご報告ありがとうございます。 そうですね (thingsym)
  • こんにちは。Custom Post Ty (Kei)
  • ご報告ありがとうございます。 エラーは (thingsym)
  • こんにちは最近 vagrant を使い始 (enomoto)
  • 切り替えにスマホ用のテーマはインストール (thingsym)
  • はじめまして。WP初心者になります。スマ (野澤)
  • 先ほどupdateして、問題なく動作する (kome)
  • ご報告ありがとうございます。 本日バグ修 (thingsym)
ページの先頭へ