初心者でも簡単に、サイト訪問者のデバイスを自動判定して、PC・タブレット・スマホそれぞれでWordPressのテーマを切り替えるには、プラグインを使ってみるのも良いと思います。
使用するのは、「Multi Device Switcher」というプラグインです。当然テーマが別れることによって情報を更新する手間が増えますが、それでもデバイス判定してテーマを切り替えたい！できればURLは変えたくない！という場合にはオススメです。
Contents
「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です。
<div class="switcher">
<a href="http://DOMEIN/PATH/TO/?pc-switcher=1">PC表示に切り替える</a>
</div>
.switcher a:before{
font-family: FontAwesome;
content: "/f26c";
padding-right: 7px;
}
※CSSはお好みで。
pichihiroshi.com
コメントを残す
コメントを投稿するにはログインしてください。