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

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

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

jquery.cookieの準備

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

<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表示と、スマホ表示で切り替えるようにします。

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

<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>

 

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

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

<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をつかえばいいですね。

<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を追加すればレスポンシブを解除できます。

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

 <?php if (filter_input(INPUT_COOKIE, 'pcview')==0): ?>
 <script src="<?php echo get_stylesheet_directory_uri().'/responsive.css' ?>"></script>
 <?php endif; ?>

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

まとめ

header.phpに以下を追加

<?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>

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

<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

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
  • このエントリーをはてなブックマークに追加