WordPressのレスポンシブデザインテーマで、モバイル用の広告などモバイルとPCの表示を切り替える方法を紹介します。 レスポンシブデザインが増えてきて、モバイル用のオーバーレイ広告や、PCだけで表示したいものなどを切り分けて表示するケースが増えていると思うので、その方法です。
広告などモバイルとPCの表示を簡単に切り替える方法
結論から書くと、まず以下のコードを利用しているテーマのfunctions.phpに記載します。
[php]
function is_mobile(){
$useragents = array(
‘iPhone’, // iPhone
‘iPod’, // iPod touch
‘iPad’, // iPad
‘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’]);
}
[/php]
この記事を参考にしました。 http://www.kens-web.com/2011/06/1244 そして、表示を切り分けたい部分に以下のコードを記述するだけです。
[php]
<!–?php if(is_mobile()) { ?–>
モバイルで表示させたいもの
<!–?php } else { ?–>
PCで表示させたいもの
<!–?php } ?–>
[/php]
モバイルだけで表示させたいだけの場合は以下のように記述します。
[php]
<!–?php if(is_mobile()) { ?–>
モバイルで表示させたいもの
<!–?php } ?–>
[/php]
ユーザーエージェントで判定して、モバイル系のユーザーエージェントの場合のルールを作成し、表示を切り分ける方法ですね。 オーバーレイ広告などは、PCでは表示させないように広告側で設定されていると思いますが、通信自体させない方が良いと思うので、上記方法で設定するのが良いと思います。 設定時には、バックアップをとって実施してくださいねと。