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

広告切り替え用のコードを設置

Google AdSense 広告を表示する場所に次のコードを設置します。

<?php if ( is_mobile() ): ?> <!-- Mobile 用のコードを設置-->
<?php else: ?> <!-- PC 用のコードを設置 -->
<?php endif; ?>

以上で完了です。

参考にさせてもらったページ

• ［み］レスポンシブデザインのWordPressでAdSenseを切り替える方法 | みはら.com

ありがとうございます！