[ 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

ありがとうございます！