【 PC / スマホ切り替え】Multi Device Switcher を使用して、PCとスマホでテーマ切り替えをする

初心者でも簡単に、サイト訪問者のデバイスを自動判定して、PC・タブレット・スマホそれぞれでWordPressのテーマを切り替えるには、プラグインを使ってみるのも良いと思います。
使用するのは、「Multi Device Switcher」というプラグインです。当然テーマが別れることによって情報を更新する手間が増えますが、それでもデバイス判定してテーマを切り替えたい！できればURLは変えたくない！という場合にはオススメです。

Contents

「Multi Device Swither」を導入するメリット
ダウンロードから設定まで
- 1. プラグインをダウンロードして有効化する
- 2. 設定を調整する

「Multi Device Swither」を導入するメリット

メリット① PC・スマホそれぞれでテーマを設定できる

PC・スマホそれぞれ別のテーマを表示させることで、画像サイズを最適化でき、スマホで見た時のページ読み込みデータ容量を削減することができます。また、PC・スマホどちらかでしか使用しないJavaScriptがある場合も、それらを最適化すれば、ページ表示の高速化に役立ちます。

メリット② PCサイト・スマホサイトどちらも同じURLを使用できる

PCサイト・スマホサイトが同じURLになるのは、SNS等でサイトを拡散させる時に単一URLを使えるのでスムーズです。htaccess等の設定でリダイレクトをかけても良いのですが、その場合ページ表示に時間がかかる・勝手にリダイレクトがかかることを嫌がるユーザーがいるなどの問題があります。

メリット③ PCサイトとスマホサイトの表示切替の設定が簡単にできる

PC・タブレット・スマホそれぞれでどのテーマを表示させるか、スマホサイトを閲覧中にPCサイトに切り替えるボタンを設置するかどうかなど、管理画面から簡単に設定変更できます。すっごい簡単です。

ダウンロードから設定まで

1. プラグインをダウンロードして有効化する

「Multi Device Switcher」を検索して、プラグインを追加しましょう。

プラグインのサイトはこちらです。

2. 設定を調整する

WordPress管理画面の、[外観] > [マルチデバイス] をクリックして、プラグインの設定画面を開きます。

それぞれのデバイスで表示させるテーマを設定できます。PCサイトはデフォルトで有効にさせているテーマが反映されます。

「PC Switcherを追加」にチェックを入れると、スマホでサイトを閲覧する際に、一番下にPCサイトでの表示に切り替えるボタンが表示されます。そのデザインは以下のようなものです。

ハンバーガーメニューで開いたグローバルナビに「PC表示に変更」ボタンを並べる時など、任意の場所に表示切り替えリンクを置きたい時は、以下のように記載すればOKです。

HTML


<div class="switcher">
	<a href="http://DOMEIN/PATH/TO/?pc-switcher=1">PC表示に切り替える</a>
</div>

CSS


.switcher a:before{
	font-family: FontAwesome;
	content: "/f26c";
	padding-right: 7px;
}

※CSSはお好みで。

カテゴリー