基本的な設置方法（HTMLサイト用）
参照している人が多かったこちらのサイトのコードをコピペして使わせてもらっています。
レスポンシブWebデザインのサイトにPCとスマートフォンの表示切り替えボタンをつけてみた | A40
HTMLサイトに設置する手順
何はともあれ、jQueryと、jquery.cookie.jsをサイトに設置して、ヘッダーにリンクをつけます。
jQueryのダウンロード：jQuery
jquery.cookieのダウンロード：GitHub - carhartl/jquery-cookie: No longer maintained, superseded by JS Cookie:
jquery.cookie.jsの本体は、srcフォルダ内にあります：jquery-cookie/src at master · carhartl/jquery-cookie · GitHub
リンクの設置は、ヘッダーに以下のコードを入れます。
上記に続けて、以下のコードを記述。
<script>
$("head").append("");
$(document).ready(function() {
$("#btnPC, #btnSP").click(function() {
$.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0);
location.reload();
return false;
});
});
</script>
また、切替スイッチとして、以下のコードを所定の場所に設置。
<ul> <li><a id="btnPC" href="#">PC</a></li> <li><a id="btnSP" href="#">SP</a></li> </ul>
ulに適当なクラス名を付与して、切替ボタンとして見栄えを調整すれば出来上がり。
WordPressに設置する場合
上記のやり方をそのままWordPressに持ち込んでも動く事はないので注意が必要です。動かないのは、WordPressがデフォルトで持っているjQueryが他のライブラリと衝突しないように変数を変えていることが原因です。
WordPressへの設置の手順
※WordPressにデフォルトで組み込まれているjQueryライブラリを使用する前提で記します。
header.phpのhead内に、 <?php wp_head(); ?>を記載していることを確認。なければ記載します。これでjQueryライブラリが読み込まれます。
次に、テーマを格納しているフォルダのどこかにjquery.cookie.jsを保管する。
通常はテーマフォルダ内にjsフォルダを作って入れると思うので、その前提で。
<?php wp_head(); ?>より後に、jquery.cookie.jsを読み込ませます。
<script type="text/javascript" src="<?php bloginfo('template_url') ;?>/js/jquery.cookie.js"></script>
続けて、切替スイッチのコードの記述。
<script> jQuery(document).ready(function($){ $("head").append("<meta name='viewport' content=" +($.cookie("switchScreen") == 1 ? "'width=970'" : "'width=device-width'") +" />"); $(document).ready(function() { $("#btnPC, #btnSP").click(function() { $.cookie("switchScreen", $(this).attr("id") == "btnPC" ? 1 : 0); location.reload(); return false; }); }); }); </script>
なお、この記述方法は次のサイトを参照しました。
WordPress で jQuery を使う時の注意点 – EastCoder;
スイッチとなるタグは同じです。
<ul> <li><a id="btnPC" href="#">PC</a></li> <li><a id="btnSP" href="#">SP</a></li> </ul>
