WordPress「Twenty Twelve」で「Google AdSense」をはみ出さないようにモバイル端末に対応する方法


WordPressでレスポンシブWebデザインを採用している方、「 Google AdSense 」の広告サイズの表示方法に苦労した方多いのではないでしょうか。私もその1人です。

今回は、「 Google AdSense 」をモバイル端末に対応する方法を記載しようと思います。

 1.「 Google AdSense 」の広告サイズについて

スクリーンショット_2013_05_02_17_51
当Webサイトでは、TOPページに「 468 x 60 」の「 Google AdSense」のバナー広告を表示しています。しかし、この状態だと「 iPhone 」「 iPad 」などのモバイル端末からWebサイトにアクセスした際、広告が領域に収まらずはみ出てしまいます。

「 Google AdSense 」では、広告サイズのフォーマット変更は規約違反になるので、表示する広告は設置する箇所に一番近いサイズを利用しましょう。

私は、PC用の「 468 x 60 」のバナーの他に、モバイル用の「 250 x 250 」のバナーを「 Google AdSense 」に登録しました。

 2.「 wp_is_mobile 」では、iPadがモバイル端末扱いとなってしまう

PC用Webサイトには、「 468 x 768 」の広告を表示し、モバイル用(iPhone/Android)には「 250 x 250 」の広告を表示するように、PC用、モバイル用に広告を切り替えて表示するように少し仕掛けをします。

WordPress 3.4以降では、「 wp_is_mobile 」関数を利用することで、アクセスしてきた端末よりPC用、モバイル用と切り替えて「 Google AdSense 」を表示することが出来ますが「 wp_is_mobile 」では、「UserAgent」からPC用かモバイル用かを判別しており、iPadはモバイル端末と判別されてしまいモバイル用の広告表示となってしまいます。

UserAgetとは

Webサイトにアクセスしてきた利用者の「ブラウザ」、「OS」などの環境情報です。これらの利用情報を元に、利用者の環境情報を分析しWebサイトを最適化する上で欠かせない情報の一つです。

以下、User-Agentの例です
Mozilla/5.0 (iPad; CPU OS 6_0 like Mac OS X) AppleWebKit/536.26 (KHTML, like Gecko) Version/6.0 Mobile/10A403 Safari/8536.25

 3.functions.php追記

テーマフォルダの中にある、「 functions.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']);
}

is_mobile関数のコードを見てみましょう。以下の処理になります。あらかじめ、モバイル端末用の判別コード(iPhone/blackberry9500)を用意し、ユーザがアクセスしてきた際の「UserAgnet」と照らしあわせをし、マッチすれば「True」を返し、マッチしなければ「False」を返します。

1. モバイル用のUserAgentsを用意し$useragents配列を作成

2. $useragnetsの配列の区切り文字をパイプに設定し$patternに保存

3. $patternとUserAgent(利用者アクセス情報)を正規表現でマッチングを行いマッチした場合trueを返します。

4. 「 Google AdSense 」を切り替える仕掛けを追記 

「 Google AdSense 」を表示している箇所に以下のコードを追加します。

<?php if (is_mobile()) { ?>
/*モバイル用のGoogleAdSenseを記述*/
<?php } else{ ?>
/*PC用のGoogleAdSenseを記述*/
<?php } ?>
PHPの制御構造、条件分岐(if)を使用します。条件分岐とは、条件式を指定し当てはまる場合、当てはまらない場合と処理を分岐します。今回の場合、is_mobile()の結果(True,False)から、Trueの場合モバイル用の広告を表示し、Falseの場合はPC用の広告が表示される動きとなります。

 5.付録

今回は、「 Google AdSense 」の切り替えに利用しましたが、他にもPCサイト用、モバイル端末用とCSSを分ける際などにも利用できます。

<?php if (is_mobile()) { ?>
<link rel="stylesheet" type="text/css" href="/css/mobile.css" />
<?php } ?>

 

この記事が気に入ったら
いいね ! しよう

Twitter でin44y

最新の関連記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です