WordPressのレスポンシブデザインでPC表示を選択できるようにする

WordPressでレスポンシブ対応するのですが、スマホで表示するときに、レスポンシブ化せずに表示させるときに、たとえばプラグインを使う方法がありますが、あえてプラグインを使わずにスマホ表示とPC表示を切り替えられるようにする方法です。

以外と簡単だったので、さくっとまとめます。

jquery.cookieの準備

基本的に、PC表示かスマホ表示かは、cookeiに保存するので、まずはjquery.cookieを用意します。
まず、header.phpで、タグの中に以下を記述します。

もし、ダウンロードして使いたいなら、こちらから。
https://github.com/carhartl/jquery-cookie

viewportの切り替え

おなじくheader.phpのタグの中に以下を記述します。
viewportをPC表示と、スマホ表示で切り替えるようにします。

width=940のところは、サイトの横幅に合わせてください。

JQueryで切り替え

おなじくheader.phpのタグの中に以下を記述します。
リンクをクリックすると、cookieに、view_switchという名前でPC表示(非レスポンシブ)のときは1を保存するようにします。

 

切り替えボタン(リンク)の設置

つぎに、切り替えボタン(リンク)を任意の場所に用意します。

このリンクをクリックすると、さきほどのJQueryが稼働するようになります。
もし、モバイルからのアクセスのときだけ、表示したければ、wp_is_mobileをつかえばいいですね。

 

レスポンシブ用のCSSを切り替え

レスポンシブ用のCSSをフックで追加しているのなら、フック中に次のようにifを追加すればレスポンシブを解除できます。

もちろん、header.php内で直接cssファイルをきりかえてもOK

面倒くさそうですが、実際にやってみるとそんなに大変ではありません。

まとめ

header.phpに以下を追加

任意の場所に切り替えリンク(ボタン)を追加

参考になったサイトさん

プラグインを使った方法
http://blog.thingslabo.com/archives/000251.html

WPスマホ用テーマで『PC版への切り替えボタン』を実装できるプラグイン「MW Theme Switcher on WPtap」の使い方

jquery.cookie.jsをつかって、viewportの切り替え
http://katoshun.com/blog/switch-screen.html

jquery.cookie.jsについて
http://weboook.blog22.fc2.com/blog-entry-404.html

phpでcookieを設定したり、読み込んだり
http://bashalog.c-brains.jp/08/05/20-175803.php

0
タイトルとURLをコピーしました