WordPressでPCとスマートフォンで表示を切り替える方法【条件分岐タグ】

WordPressには条件分岐タグという便利なものがあって、これをうまく使うとデバイスによって表示の出し分けをすることができます。

今回紹介するのはその条件分岐タグを使って、PCとスマートフォンで表示を切り替える方法です。

条件分岐タグ　wp_is_mobile()

wp_is_mobileという条件分岐タグを使うと、スマホからのアクセスかどうかを判別することができます。

jQueryのif文のように「スマホからのアクセスだった時、そうじゃない時」の両方の処理がかけるので、PCとスマホそれぞれの表示の出し分けをすることができます。

条件分岐タグは他にもたくさんありますが、wp_is_mobile()はそのひとつです。

wp_is_mobile()はこんな時に便利

PCとスマホで表示の出し分けができると、例えばこんな時に便利です

• PC・スマホで別々の広告の表示をわけたい
• PC・スマホでメニューの表示をわけたい
• PC・スマホのどちらかにだけ表示させたいものがある

などなど、使い方はたくさんありますがちょうどCSSのメディアクエリーのような出し分けができます。メディアクエリーは幅に応じて切り替えますが、こちらは端末で判断します。

wp_is_mobile()の使い方

wp_is_mobile()を使う時はこのように記述します。

<?php if ( wp_is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php else: ?>
 // PCで表示させたい内容
<?php endif; ?>

ifを使って端末がモバイルかどうかを判別して、true/falseでそれぞれの処理を行うだけです。

それぞれの処理については空欄にしておけば何も処理しないということになるので、空欄のままでもOKです。

WordPressのテーマの中にあるPHPファイルに記述してあげると実装することができます。

wp_is_mobile()はタブレットもスマホ扱いになるので注意

ちなみにWordPressのwp_is_mobileはスマホだけではなくタブレットも含みます。つまり

• mobile → スマートフォン＆タブレット
• PC → パソコン

という分類ですね。タブレットは結構幅があるので、スマホ扱いじゃなくてPC扱いにしてほしい！ということもあると思います。

タブレットをPC扱いにする時は、is_mobile()を作って解決

そういう時はis_mobile()という条件分岐タグを自分で作ると実装できます。自分で作る時はWordPressの使っているテーマファイルの中のfunctions.phpに以下のコードを入れてください。

function is_mobile() {
    $useragents = array(
        'iPhone',          // iPhone
        'iPod',            // iPod touch
        '^(?=.*Android)(?=.*Mobile)', // 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という名前でスマホの端末を識別させる方法ですね。タブレットはこの中に入っていないので、PCと同じ扱いになります。

<?php if ( is_mobile() ) : ?>
 // スマホで表示させたい内容
<?php else: ?>
 // PCで表示させたい内容
<?php endif; ?>

is_mobile()を使いたい時は、先ほど紹介した書き方でwp_is_mobile()をis_mobile()にするだけで良いです。そうするとfunctions.phpに記述した内容で端末を判別してくれます。

is_mobileのコードについてはこちらの記事を参考にさせていただきました。設定する内容を変えれば「iPhoneだけ」「Androidだけ」といったこともできそうですね。

【WordPress】 is_mobile()でスマホとタブレットを分ける方法

短いコードで実装できるのでぜひ試してみてください！