どうも深夜に急にテーマいじりを始める @georgek5555 です。
さて、WordPressのテーマをいじり始めるとつまづくスマホとPCでの表示切り替えに関する簡単な方法を備忘録的に書いておきます。
wp_is_mobile()を使った簡単な切り替え
WordPressでレスポンシブデザインのテーマを導入している人も多いかとは思いますが、どうしてもPCとスマホで同じ内容を表示していると色々と問題が起きてきます。
しかし、Wp touchも使いたくないし、かといってスマホ用のテーマを一から用意するのも面倒という人にはWordPress3.4から実装された『wp_is_moble()』を使うととっても便利です。
PHPに詳しくなくてもなんとかなる
WordPressはPHPが使われていて、テーマをいじるときに色々と悩んだり、よくわからなかったりしますが、今回紹介する関数の使い方はとっても簡単です。
＜?php if(is_mobile()) { ?＞
＜!-- スマートフォン用の内容 --＞
＜?php } else { ?＞
＜!-- PC用の内容 --＞
＜?php } ?＞
※当ブログは単一記事内でもPHPが使えるようになっているので、上記の『＜＞』は全て全角になっています。
上記のコメントアウトのところ（<>で囲まれているところ）に表示したい内容をPCとスマホでそれぞれ入力すればOKです。
アドセンスとか、ソーシャルボタンなどで表示を切り替えたい時はこちらを導入していただくといいと思います。
ウィジェットなどでもExec-PHPなどのウィジェットなどでもPHPコードが使えるプラグインを入れれば簡単に実装できますので、テーマを直接いじらないということも可能です。
また、これに加えてfunction.phpに下記を加えておくとスマホでの切り替えが正確にいくようです。
function is_mobile(){
$useragents = array(
'iPhone', // iPhone
'iPod', // iPod touch
'Android', // 1.5+ Android
'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']);
}
コードの書き方はいくつかあるようなのですが、筆者はこれで簡単に設定出来ましたのでひとまずこれでよいかと思います。
以上 @georgek5555 の備忘録的に残しておきます。
一旦スタジオにお返しいたします。