WordPress条件分岐、スマートフォンとブラウザ別に表示を変える方法15種

By

公開日: 更新日:

WordPress条件分岐、スマートフォンとブラウザ別に表示を変える方法15種

スマートフォンなどのモバイル端末にWebサイトを対応させるのに、CSS3のMedia Queries（メディアクエリ）を使って、レスポンシブデザインにすることが多いと思います。しかし、Google Adsenseなどの広告は表示がはみ出てしまったりします。

スマートフォンなどのモバイル端末には、別の表示にしたり、ブラウザ別に表示を変えたい時があるのではないでしょうか？例えば、PCサイトでGoogle Adsenseの728×90を使っているけどiPhoneやAndroidなどのモバイルでは、レイアウトが崩れるので300×250に変えたいな等です。

今回の投稿では、WordPressでスマートフォン別、ブラウザ別に条件分岐する方法を集めました。

スマートフォン・タブレット端末

スマートフォン・タブレット端末別の条件分岐方法です。

モバイル端末で表示を変えるwp_is_mobile()

PCブラウザ以外のモバイル端末に条件分岐し、コンテンツを表示するには、WordPressの3.4から実装された条件分岐タグwp_is_mobile()を使うことで実現できます。

ただし、この関数では、iPhoneなどのスマートフォンからiPad、Kindleなどのタブレット型端末まで含まれます。

<?php if ( wp_is_mobile() ) : ?>
  // モバイル用コンテンツ
<?php else: ?>
  // PC用コンテンツ
<?php endif; ?>

スマートフォンで表示を変える

iPad、Kindleなどのタブレットは表示領域が広いので、PCサイトと同じような表示をさせたい時もあると思います。タブレット端末を除いて、スマートフォンに表示させたい時は、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']);
}

上記のコードを記述することで、スマートフォンの条件分岐ができるようになります。

<?php if (is_mobile()) : ?>
  // スマートフォン用コンテンツ
<?php else: ?>
  // PC・タブレット用コンテンツ
<?php endif; ?>

iPhoneへ条件分岐$is_iphone

iPhoneへ条件分岐する時は、WordPressで用意されている変数$is_iphoneを使うことで可能です。変数$is_iphoneはブラウザのユーザエージェントを調べ、iPhone（’safari’および’mobile’の両方が含まれている）ならばtrueを返し、そうでない場合falseとなります。

<?php if ($is_iphone) : ?>
  // iPhone用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

iPadへ条件分岐

iPadの場合はfunctions.phpにコードを追加して関数で扱えるようにします。

function is_ipad() {
    $is_ipad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad');
    if ($is_ipad) {
        return true;
    } else {
        return false;
    }
}

上記のコードを記述して、条件分岐したいところで、下記コードを使います。

<?php if (is_ipad()) : ?>
  // iPad用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Kindleへ条件分岐

iPadと同様functions.phpにコードを追加して関数が扱えるようにします。

function is_Kindle() {
    $is_Kindle = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'Kindle');
    if ($is_Kindle) {
        return true;
    } else {
        return false;
    }
}

上記のコードを記述するして、条件分岐したいところで下記コードを使います。

<?php if (is_Kindle()) : ?>
  // Kindle用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Android・BlackBerry

上記のiPadとKindleと同じようにiPadとKindle記述してある部分をAndroidもしくは、BlackBerryに変更すればいけるんじゃないでしょうか。

ブラウザ別

ブラウザ別条件分岐方法です。WordPressで用意されている変数を使えばとっても簡単にできます。

Chromeへ条件分岐$is_chrome

ブラウザがChromeか調べます。

<?php if ($is_chrome) : ?>
  // Chrome用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Geckoへ条件分岐$is_gecko

ブラウザがGeckoか調べます。

<?php if ($is_gecko) : ?>
  // Gecko用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

IEへ条件分岐$is_IE

ブラウザがIEか調べます。またIEでは、macとWindowで分けることもできます。

<?php if ($is_IE) : ?>
  // IE用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

macのIEへ条件分岐$is_macIE

ブラウザがmacIEか調べます。

<?php if ($is_macIE) : ?>
  // macIE用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

WindowsのIEへ条件分岐$is_winIE

ブラウザがWindowsIEか調べます。

<?php if ($is_winIE) : ?>
  // winIE用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Lynxへ条件分岐$is_lynx

ブラウザがLynxか調べます。

<?php if ($is_lynx) : ?>
  // Lynx用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Netscape 4.xへ条件分岐$is_NS4

ブラウザがNetscape 4.xか調べます。

<?php if ($is_NS4) : ?>
  // Netscape 4.x用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Operaへ条件分岐$is_opera

ブラウザがOperaか調べます。

<?php if ($is_opera) : ?>
  // Opera用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

Safariへ条件分岐$is_safari

ブラウザがSafariか調べます。

<?php if ($is_safari) : ?>
  // Safari用コンテンツ
<?php else: ?>
  // その他用コンテンツ
<?php endif; ?>

あとがき

他にもこんな方法があるよなど、あったら教えてください。私のサイトはレスポンシブにして、スマートフォンとPCで表示させたくない部分をdisplay: none;するのがなんかやだなと思ったので条件分岐させてます。

しかし、スマートフォンでちゃんと表示されるときはされるんですが、何回かアクセスしてみると、たまに表示がうまくいってない時があるんですよね。プラグインの影響かな

関連記事

コメントは受け付けていません。