WordPress｜スマホでアドセンスの表示を切り替える２つの方法

以前、任意の記事にアドセンス広告を表示させる方法を紹介したけど、今回はスマホから見た場合と、PCから見た場合のアドセンスの表示を切り替える方法を紹介します。

この方法を使えば、PCでみた場合はアドセンスを２つ並べて表示させて、スマホから見た場合はアドセンスを1つだけ表示させるってことが出来ます。

それでは早速やり方を見ていきましょう。

１．wp_is_mobile関数を使って切り替える

１つ目の方法はWordPressバージョン3.4から実装された関数「wp_is_mobile」を使って表示を切り替える方法です。

使い方はメチャクチャ簡単で、

<?php
if ( wp_is_mobile() ) {
    ここにモバイル向けの内容を記述する
}
?>

としてやれば、モバイル端末からのアクセスとPCからのアクセスで表示を切り替えることが出来ます。

具体的にアドセンス広告を制御する場合はこんな感じ。

//アドセンスショートコード
if(wp_is_mobile()){
function adsshow() {
    return '<div class="ads-sp">ここにスマートフォン用アドセンスコード</div>';
 } 
}else {
    function adsshow() {
    return '<div class="ads-pc">ここにアドセンスコード１
　　　　ここにアドセンスコード２</div>';
}
 }
add_shortcode('ads', 'adsshow');

※上のコードはショートコードを使って本文中にアドセンス広告を表示させるためのモノです。

これでPCからはアドセンスを２つ表示させて、モバイル端末からは１つだけ表示させられます。スタイルはご自分でお好きなようにいじってください。

でもこの方法だと、タブレット端末からのアクセスも「モバイル端末」として認識されます。

「タブレットからのアクセスでもスマホからと同じ扱いでいい」ってことならこれで問題ないけど、「タブレットはPCと同じにしたい」って場合は以下の方法があります。

1-1. 自作のis_mobile関数を使う

自作と言っても簡単なことです。functions.phpに以下のコードをコピペすれば使えるようになります。

// 自作のis_mobile関数

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

後はさっきと同じように

//アドセンスショートコード
if(is_mobile()){
function adsshow() {
    return '<div class="ads-sp">ここにスマホ用アドセンスコード</div>';
 } 
}else {
    function adsshow() {
    return '<div class="ads-pc">ここにアドセンスコード１ここにアドセンスコード２</div>';
}
 }
add_shortcode('ads', 'adsshow');

こんな感じで使ってやれば、スマホとタブレット＆PCで表示を切り替えることが出来ます。

２．CSSで切り替える

上記の方法はプログラムで切り替えを行ったけど、CSSで切り替えることも出来る。

この方法は細かく画面サイズによってき切り替えらるのがポイント。

まずはこんな感じでクラス名を与えてアドセンスを表示させる。

//アドセンスショートコード

function adsshow() {
    return '<div class="ads-sp">ここにスマホ用アドセンスコード</div>
　　　　<div class="ads-pc">ここにアドセンスコード１ここにアドセンスコード２</div>';

 }
add_shortcode('ads', 'adsshow');

んで、あとはCSSで

.ads-sp {
    display: none;
}
.ads-pc {
    display: block;
}

@media screen and (max-width: 767px){
    .ads-sp {
        display: block !important;
    }
    .ads-pc {
        display: none !important;
    }
}

こんな風に画面サイズに応じて消したり表示させたりと制御することが出来ます。

画面サイズ767px以上は.ads-pcが表示されて、767px以下は.ads-pcが消えて、.ads-spが表示されるようになっています。

まとめ

意外と簡単にモバイル端末とPCからの表示を切り替えることが出来ます。

今やレスポンシブデザインは必須だから上記の関数やCSSを駆使して上手くデザインしてください。