CSSなら、メディアクエリを使ってウインドウ幅でデザインを分けることができますが、
アドセンス広告などで、どうしてもHTMLを出しわけたいことがあります。
レスポンシブ対応をする場合、cssのdisplayで表示するHTMLを分けるのが一番わかりやすいですが、
今回はCookieを使って出しわける方法です。
結果だけ見たい方は下の方をどうぞ。
WordPress標準搭載の「wp_is_mobile」関数
まず定番としてあるのが、「wp_is_mobile」関数。
ユーザーエージェントでスマホ用とそうでないものを分ける条件分岐タグです。
WordPressで標準搭載されているので、手軽に使えるのですが、一つ問題があります。
タブレットもスマホと同じになってしまう
のです。
タブレットの幅であれば、PCと同じデザインの方が見やすいことがほとんどだと思います。
実際私は、CSSはスマホ用とそれ以外を、ウインドウ幅が480px以上かどうかで分けているので
タブレットはPCのCSSが適用されます。
そこで、「wp_is_mobile」関数をタブレットがPCの仲間入りをするように改造されたのが、
「is_mobile()」関数。
「is_mobile()」関数
「is_mobile()」関数（参考：みはら.com）は、スマホだけを判定してくれます。
これも、世にあるスマホのユーザーエージェントを配列に入れ、一致するかどうかを判定してくれる関数です。
ほとんどの場合はこれでいけます。
・・・が、しかし、これでもちょっと気になるところが。
- 今後機種が増えてユーザーエージェントが増えた時に追加の必要があるかも
- CSSはウインドウ幅で切り替えているので、ユーザーエージェントではなくできればウインドウ幅で切り替えたい
というわけで、ウインドウ幅で切り替える方法を模索。
Cookieを使ってウインドウ幅によってスマホとPC・タブレットでHTMLを出しわける
PHPはサーバーサイドプログラムなので、各端末のウインドウ幅を取得することはできません。
ではJavaScriptでウインドウ幅を取得し、PHPに渡す方法はないだろうか
この一見単純そうに見える処理が簡単にはできないのです。
JavaScriptのコードを読み込んでる時点ではPHPの処理はおわっており、JavaScriptの変数をPHPに渡すことはできません。
一番スマート（だと思われる）なやり方は、jQueryの$.ajaxを使用して外部PHPを実行→変数を受け取る方法。
しかし、WordPressでajaxを使おうとすると、「/wp-admin/admin-ajax.php」にリクエストを送らなければならず、一癖あってちょっと難しいです。
JavaScriptの変数をどこかにメモっておいて、phpでそれを使えるようにできないか。
…前置きが長くなりましたが、それを可能にするのがCookieです。
JQueryで画面幅を取得し、クッキーに書き込みます。それをPHPで取得し、条件分岐します。
ただし、クッキーを無効にする設定をしているブラウザや、iphoneのプライベートブラウズでは無効になってしまいます。
その救済措置として、is_mobile()を使います。
以下、その手順です。
①jquery.cookie.jsを設置
値を取り出すのに、「jquery.cookie.js」を使います。
ダウンロードし、headでこれを読みます。
パスの部分は置いたところに変更してください。
WordPressはwp_head();でjqueryを読み込んでいるようですので、そのあとに入れます。
②jQueryで画面幅を取得し、デバイスを判定してクッキーに書き込む
(function($) {
$(function() {
var setCookie =function() {
// 読み込み時の画面の幅
var w = $(window).width();
// 切り替えを行いたいサイズ
var x = 480;
if (w <= x) {
$.cookie('device', 'mobile');
} else {
$.cookie('device', 'pc');
}
};
// 初回に1回実行
setCookie();
// ウィンドウのサイズが変わったときにクッキー書き換え実行
var timer;
$(window).on('resize', function() {
clearTimeout(timer);
timer = setTimeout(function() {
setCookie();
}, 500);
});
});
})(jQuery);
ウィンドウサイズが変わるとクッキーを書き換えますが、自動でリロードはしません。（してしまうとその都度アドセンスが読まれてしまうため）
画面幅変更→手動リロードの時に、htmlが変わるようになります。
クッキーの確認は、ブラウザの開発者ツールでできます。
■Google chrome
■firefox
③PHPの条件分岐文を書く
<?php $device = filter_input(INPUT_COOKIE, 'device'); ?> <?php if ($device === 'mobile' or (!$device and is_mobile())): ?> //スマホの場合の処理 <?php else: ?> //PC、タブレットの場合の処理 <?php endif; ?>
filter_input(取得する変数のタイプ , 取得する変数の名前)で、クッキーを取得することができます。
クッキーは各個人のブラウザで無効にすることもでき、書き込めない場合もあります。
その時は仕方ないので、救済措置として「is_mobile()」も条件に入れておきます。
④救済措置で入れた「is_mobile()」を使えるようにする。
function is_mobile() {
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android.*Mobile', // 1.5+ Android Only mobile
'dream', // Pre 1.5 Android
'CUPCAKE', // 1.5+ Android
'blackberry9500', // Storm
'blackberry9530', // Storm
'blackberry9520', // Storm v2
'blackberry9550', // Storm v2
'blackberry9800', // Torch
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);
$pattern = '/'.implode('|', $useragents).'/i';
return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
以上です。