WordPressでレスポンシブ対応するのですが、スマホで表示するときに、レスポンシブ化せずに表示させるときに、たとえばプラグインを使う方法がありますが、あえてプラグインを使わずにスマホ表示とPC表示を切り替えられるようにする方法です。
以外と簡単だったので、さくっとまとめます。
jquery.cookieの準備
基本的に、PC表示かスマホ表示かは、cookeiに保存するので、まずはjquery.cookieを用意します。
まず、header.phpで、タグの中に以下を記述します。
|
1 |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> |
もし、ダウンロードして使いたいなら、こちらから。
https://github.com/carhartl/jquery-cookie
viewportの切り替え
おなじくheader.phpのタグの中に以下を記述します。
viewportをPC表示と、スマホ表示で切り替えるようにします。
|
1 2 3 4 5 |
<?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <?php else: ?> <meta name="viewport" content="width=940" /> <?php endif; ?> |
width=940のところは、サイトの横幅に合わせてください。
JQueryで切り替え
おなじくheader.phpのタグの中に以下を記述します。
リンクをクリックすると、cookieに、view_switchという名前でPC表示（非レスポンシブ）のときは1を保存するようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<script> jQuery(function($) { $("#pcview").click(function() { $.cookie("view_switch", 1); location.reload(); return false; }); $("#mpview").click(function() { $.cookie("view_switch", 0); location.reload(); return false; }); }); </script> |
切り替えボタン（リンク）の設置
つぎに、切り替えボタン（リンク）を任意の場所に用意します。
|
1 2 3 4 5 6 7 8 |
<ul class="screen_mode"> <?php //if (wp_is_mobile()): ?> <?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?> <li><a id="pcview" href="#">PC版で表示する</a></li> <?php else: ?> <li><a id="mpview" href="#">スマホ版で表示する</a></li> <?php endif; ?> <?php //endif; ?> |
このリンクをクリックすると、さきほどのJQueryが稼働するようになります。
もし、モバイルからのアクセスのときだけ、表示したければ、wp_is_mobileをつかえばいいですね。
|
1 2 3 4 5 6 7 8 |
<ul class="screen_mode"> <?php if (wp_is_mobile()): ?> <?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?> <li><a id="pcview" href="#">PC版で表示する</a></li> <?php else: ?> <li><a id="mpview" href="#">スマホ版で表示する</a></li> <?php endif; ?> <?php endif; ?> |
レスポンシブ用のCSSを切り替え
レスポンシブ用のCSSをフックで追加しているのなら、フック中に次のようにifを追加すればレスポンシブを解除できます。
|
1 2 3 4 5 6 7 |
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
|
1 2 3 |
<?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?> <script src="<?php echo get_stylesheet_directory_uri().'/responsive.css' ?>"></script> <?php endif; ?> |
面倒くさそうですが、実際にやってみるとそんなに大変ではありません。
まとめ
header.phpに以下を追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
<?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" /> <?php else: ?> <meta name="viewport" content="width=940" /> <?php endif; ?> <?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?> <script src="<?php echo get_stylesheet_directory_uri().'/responsive.css' ?>"></script> <?php endif; ?> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script> <script> jQuery(function($) { $("#pcview").click(function() { $.cookie("switchScreen", 1); location.reload(); return false; }); $("#mpview").click(function() { $.cookie("switchScreen", 0); location.reload(); return false; }); }); </script> |
任意の場所に切り替えリンク（ボタン）を追加
|
1 2 3 4 5 6 7 8 9 |
<ul class="screen_mode"> <?php if (wp_is_mobile()): //モバイルでのアクセスのときだけ表示する ?> <?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?> <li><a id="pcview" href="#">PC版で表示する</a></li> <?php else: ?> <li><a id="mpview" href="#">スマホ版で表示する</a></li> <?php endif; ?> <?php endif; ?> </ul> |
参考になったサイトさん
プラグインを使った方法
http://blog.thingslabo.com/archives/000251.html
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
