[WP]is_mobile 判定で、スマホとPCとで表示する情報を変える方法

WordPress

2013.11.29

最近は特に、スマートフォンやタブレットでのアクセスにも気を使いながらサイトやブログを構築することが多いので、PCサイトとiPhone、Android、iPad とで表示する情報を変えてあげることも必要になってきます。

今回はWordPress のブログやサイトで、スマートフォンやタブレットでアクセスされた場合に特定の処理を施す条件分岐の方法を紹介します。

is_mobile 条件分岐

利用中のテーマのfunctions.php に以下のようなコードを追加します。

<?php
function is_mobile () {
    $useragents = array(
      'iPad',
      'iPhone',
      'iPod',
      'Android'
    );
    $pattern = '/'.implode('|', $useragents).'/i';
    return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}
?>

<?php

function is_mobile () {

$useragents = array(

'iPad',

'iPhone',

'iPod',

'Android'

);

$pattern = '/'.implode('|', $useragents).'/i';

return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);

}

上記例ではiPad、iPhone、iPod、Android のデバイス（ユーザーエージェント）を判別していますが、他にも必要に応じてWindow Phone などを追加していけばOK です。

スマホの時だけ特定の要素を見せないようにする

具体的な条件分岐として、例えばPCサイトではサイドメニューを表示し、スマホでの閲覧時はis_mobile 判定でサイドメニューの記述をしないという処理が可能です。

<?php if(is_mobile()) {?>
<?php } else { ?>
    <div id="sidebar">
    サイドメニューの記述
    </div>
<?php } ?>

<?php if(is_mobile()) {?>

<?php } else { ?>

サイドメニューの記述

</div>

<?php } ?>

スマホの時だけ特定の要素を見るようにする

こちらは先の例とは逆のパターンですが、スマホでの閲覧時には320 pxのバナー画像（スマホ用広告）を表示させ、PCサイトの場合は画像は表示させない、なんて処理になります。

<?php if(is_mobile()) {?>
    <img src="sample.jpg" width="320" height="50" alt="広告画像" />
<?php } else { ?>
<?php } ?>

<?php if(is_mobile()) {?>

<?php } else { ?>

<?php } ?>