スマートフォン・タブレットでのみ広告や内容を表示する方法
サイトを運営していて、スマートフォンやタブレットのみ広告や内容を表示したい場合があると思います。スマートフォンやタブレットといったデバイスの種類を自動で判別することで、デバイスに応じて出力する広告や内容を変えるといった設定が簡単にできます。
一般的にレスポンシブサイトなどではCSSの「display:none」と「display:block」を使用して、表示非表示をすることができます。
しかし、スマートフォンかタブレットかを判断することはできないため、WordPressに装備されている変数や関数を使用設定して、条件分岐させます。
このページでは、スマートフォンやタブレットでのみ表示させる方法を紹介します。
スマートフォンやタブレットでの表示
WordPressにはスマートフォンやタブレットを判別するテンプレートタグが標準で装備されています。
これを上手に使えば、PCで表示される広告とスマートフォンやタブレットで表示される広告を使い分けることが出来ます。
「wp_is_mobile()」はスマートフォンとタブレットのみに表示させるテンプレートタグです。
これは、ブラウザがサーバーに送信する「ユーザーエージェント」の情報を元にデバイスの種類を判別する関数です。
|
1 2 3 |
<?php if ( wp_is_mobile() ) : ?> //スマートフォン・タブレット用コンテンツ <?php endif; ?> |
上記のコードをスマートフォンやタブレットの表示させたい部分に記入します。
これで、スマートフォンやタブレットの場合は、広告や内容が表示されます。
また、スマートフォンやタブレットで表示される内容とPCで表示される内容を同じ位置で分けたい場合は、以下のように記入します。
|
1 2 3 4 5 |
<?php if ( wp_is_mobile() ) : ?> //スマートフォン・タブレット用コンテンツ <?php else: ?> // PC用コンテンツ <?php endif; ?> |
表示の確認
Google chromeのデベロッパーツールを使用すると、その場でスマートフォンやタブレットの表示とPCの表示を確認することができます。
デバイスの種類をiPhoneに設定したときの広告表示
デバイスの種類をiPadに設定したときの広告表示
デバイスの種類をオフにしたPC状態での広告表示。PCには広告を設定していないため表示されていません。
スマートフォンのみに表示させる
更に細かい設定として、タブレットには広告を表示させず、スマートフォンにのみに広告を表示させることもできます。
WordPressには、標準でスマートフォンのみに広告を表示させるテンプレートタグは用意されていません。そのため、functions.phpに独自の関数を作成します。
ここでは、is_mobile()という関数を作成しました。
functions.phpに次の設定を記入します。
|
1 2 3 4 5 6 7 8 9 10 11 |
//スマートフォンのみに広告を表示 function is_mobile() { $ua = $_SERVER['HTTP_USER_AGENT']; if ( strpos( $ua, 'iPhone' ) || ( strpos( $ua, 'Android' ) && strpos( $ua, 'Mobile' ) ) || strpos($ua, 'Windows Phone') ) { return true; } else { return false; } } |
「iPhone」「AndroidでMobile」「Windows phone」といった3種類のスマートフォンであれば広告を表示させることができます。
次にスマートフォンで表示させたい部分に以下のコードを記入します。
|
1 2 3 4 5 |
<?php if ( is_mobile() ) : ?> // スマートフォン用コンテンツ <?php else: ?> // PC・タブレット用コンテンツ <?php endif; ?> |
表示の確認
デバイスの種類をiPhoneやスマートフォンに設定したときの広告表示
デバイスの種類をiPadに設定したときの広告表示。タブレットに広告を設定していない場合は表示されていません。
PCでの広告表示。PCに広告を設定してい場合は表示されていません。
応用設定
更に細かく多数のスマートフォンを判別する方法もあります。
必要に応じて使用してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
//スマートフォンを判別 function is_mobile(){ $useragents = array( 'iPhone', // iPhone 'iPod', // iPod touch 'Android.*Mobile', // 1.5+ Android *** Only mobile 'Windows.*Phone', // *** Windows Phone '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」や「Android.*Mobile」などの文字があれば、スマートフォンと判別するように指定しています。
次にスマートフォンで表示させたい個所に以下のコードを記入します。
|
1 2 3 4 5 |
<?php if ( is_mobile() ) : ?> // スマートフォン用コンテンツ <?php else: ?> // PC・タブレット用コンテンツ <?php endif; ?> |
応用方法として、スマートフォン以外に表示させたい場合は、先ほどの「is_mobile」に「!」を使用するとできます。
|
1 2 3 |
<?php if ( !is_mobile() ) : ?> // PC・タブレット（スマートフォン以外）用コンテンツ <?php endif; ?> |
「!」を記入すると、 スマートフォン以外に表示ということになり、PCやタブレットのみ表示されます。
スマートフォン別に表示内容を変える
「iPhone」や「iPad」、「Kindle」といったスマートフォン別に表示させたいということがある場合は以下の設定を記入します。
「iPhone」でのみ表示させる内容
WordPressには「iPhone」でのみ表示させる変数が用意されています。
「$is_iphone」を使用すると、サイトに訪問した方のユーザーエージェント調べて、「iPhone」という語句があれば表示します。
|
1 2 3 4 5 |
<?php if ($is_iphone) : ?> // iPhone用コンテンツ <?php else: ?> // その他用コンテンツ <?php endif; ?> |
「iPad」でのみ表示させる内容
WordPressにはiPadでのみ表示される変数はありません。そのため、functions.phpに以下のコードを記入して、独自の関数を作成します。
|
1 2 3 4 5 6 7 8 |
function is_ipad() { $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); if ($is_ipad) { return true; } else { return false; } } |
iPadでのみ表示させたい部分に以下のコードを記入します。
|
1 2 3 4 5 |
<?php if (is_ipad()) : ?> // iPad用コンテンツ <?php else: ?> // その他用コンテンツ <?php endif; ?> |
「Kindle」でのみ表示させる内容
WordPressにはKindleでのみ表示される変数はありません。そのため、functions.phpに以下のコードを記入して、独自の関数を作成します。
|
1 2 3 4 5 6 7 8 |
function is_kindle() { $is_kindle = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Kindle'); if ($is_kindle) { return true; } else { return false; } } |
kindleでのみ表示させたい部分に以下のコードを記入します。
|
1 2 3 4 5 |
<?php if ( is_kindle() ) : ?> // Kindle用コンテンツ <?php else: ?> // その他用コンテンツ <?php endif; ?> |
その他のデバイスで表示させる内容
他にも様々なスマートフォンやタブレットといったデバイスがあります。
これらもユーザーエージェントの文字を調べれば、独自の関数で先程の「iPhone」「iPad」「Kindle」の内容のように作成することができます。
例えば、AndroidやBlackBerryであれば、function is_Android()やfunction is_BlackBerry()のように変更します。
ブラウザ別に表示させる
ブラウザ別に広告や内容を表示させることもできます。WordPressには標準で用意されている変数を使えば可能になります。
「Chrome」でのみ表示させる内容
Google chromeであれば内容を表示します。
|
1 2 3 4 5 |
<?php if ($is_chrome) : ?> // Chrome用コンテンツ <?php else: ?> // その他用コンテンツ <?php endif; ?> |
「IE」でのみ表示させる内容
Internet Explorerであれば内容を表示します。
|
1 2 3 4 5 |
<?php if ($is_macIE) : ?> // macIE用コンテンツ <?php else: ?> // その他用コンテンツ <?php endif; ?> |
更に、 WindowsかMacかを調べて分けることもできます。
Macの場合は以下のコードを記入します。
|
1 2 3 4 5 |
<?php if ($is_macIE) : ?> // macIE用コンテンツ <?php else: ?> // その他用コンテンツ <?php endif; ?> |
Windowsの場合は以下のコードを記入します。
|
1 2 3 4 5 |
<?php if ($is_winIE) : ?> // winIE用コンテンツ <?php else: ?> // その他用コンテンツ <?php endif; ?> |
その他のブラウザで表示させる内容
その他「Opera」や「Safari」なども対応可能です。
「Opera」の場合は、「$is_opera」を使用します。
「Safari」の場合は、「$is_safari」を使用します。
「Gecko」の場合は、「$is_gecko」を使用します。
これらを使い分けることによって様々のブラウザで表示させることが可能です。
まとめ
PCで表示させる内容とスマートフォンやタブレットで表示させる内容を分けることは、一度設定すれば後は簡単ですので上手く使用してください。
レスポンシブサイトの場合はCSSの「display: none;」を使用して、表示非表示をすることもできます。しかし、細かくスマートフォンやタブレットで表示内容変える場合は、関数や変数を使用する方が効果的です。
Google adsenseなどでは、PCやスマートフォンで表示させる広告を上手く分けることによって、クリック率が上がることもあります。PCでは大きな広告サイズを使用して、スマートフォンでは小さい広告サイズを使用するなどといったことも可能です。
最近のサイトは、レスポンシブサイトが多いのでCSSでの条件分岐とこのページの方法を使用して、良いサイトを設計してください。