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を保存するようにします。

切り替えボタン（リンク）の設置

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

PC版で表示する
スマホ版で表示する

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

PC版で表示する
スマホ版で表示する

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

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

function my_scripts(){
    if (filter_input(INPUT_COOKIE, 'pcview')==0){
        wp_enqueue_style( 'responsive-css', get_stylesheet_directory_uri().'/responsive.css' );
        wp_enqueue_script( 'responsive-jquery', get_stylesheet_directory_uri() . '/responsive.js', array(), '1.0.0', true );
    }
}
add_action( 'wp_enqueue_scripts', 'my_scripts', 50 );

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

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