[ WordPress ] レスポンシブデザインで Google AdSense の広告サイズを切り替える方法

このブログのデザインは、レスポンシブデザインになっており、スマートフォンで見ると最適な幅に調整されるのですが、336 x 280 ピクセルの Google AdSense 広告が、スマートフォンの幅を超えてはみ出してしまいます。

と言う事で、パソコンからのアクセスの場合は、336 x 280 ピクセルの Google AdSense 広告を表示し、スマホから閲覧した場合は、250 x 250 ピクセルの Google AdSense 広告に差し替える様にカスタマイズしました。

作業内容は次のとおりです。

スマホからのアクセスはキャッシュしないようにする
———————————————————————-

このブログは、キャッシュプラグインを利用しているので、スマホからのアクセスはキャッシュしないようにします。

具体的には、W3 Total Cache プラグインの

– [ Page Cache Settings ] ページの [ Rejected User Agents ]
– [ Minify Settings ] ページの [ Rejected User Agents ]

の項目に、次のユーザーエージェントをコピペします。

iPhone
iPod
Android
dream
CUPCAKE
blackberry9500
blackberry9530
blackberry9520
blackberry9550
blackberry9800
webOS
incognito
webmate

function.php に関数を追加する
———————————————————————-

WordPress3.4 からだと、モバイルかどうかを判定する wp_is_mobile という標準の関数を使えるんですが、iPad もモバイルと判定されてしまうようなので、自前の関数を準備します。

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’]);
}