シングスブログ

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

メニュー

モバイルサイトと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. オプション設定でフッターに表示

一番簡単な方法。

  • 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を追加する」をチェックするとこんな感じのボタンになります。

チェックを外すと、デフォルト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

シェア

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

  1. まる

    環境が悪いのか、スマートフォン(モバイル)使用時にPCテーマが表示される場合が多々あります。
    ですので、任意の場所にSwitcherをPCテーマにも表示させたいのですがどうすればよいでしょうか?(スマホテーマ時には最下部に表示されていました)
    CloudflareというCDNを利用しています。

コメントを残す

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

購読