WordPressでデバイスにごとに表示内容を変更する方法【is_mobile】

WordPressで「display:none;」ではなく、デバイスごとに表示内容を変更する方法について解説します。

PCとスマホでHTMLを切り替える
wp_is_mobile はタブレットもモバイル端末に含む
- is_mobile 関数を設定
まとめ

PCとスマホでHTMLを切り替える

PCサイトとモバイルサイトで表示するコンテンツを変える場合、HTML自体を変更しなければいけない為、メディアクエリでは対応できません。
WordPressでデバイスごとにHTMLを切り替える場合、条件分岐タグを使用することで、簡単に表示するHTMLを切り替える事ができます。

条件分岐 if で記述する

<wp_is_mobile> を使って、以下のようなルールでコードを記述します。

<?php if(wp_is_mobile()): ?>

モバイルサイト向けの記述

<?php else: ?>

PCサイト向けの記述

<?php endif; ?>

<?php if(wp_is_mobile()): ?>

モバイルサイト向けの記述

<?php else: ?>

PCサイト向けの記述

<?php endif; ?>

スマホで閲覧した場合と、PCで閲覧した場合の内容を条件分岐で記述します。

モバイルサイトのみ表示する場合

モバイルサイトのみに表示させたい場合の記述です。

<?php if(wp_is_mobile()): ?>

モバイルサイト向けの記述

<?php endif; ?>

<?php if(wp_is_mobile()): ?>

モバイルサイト向けの記述

<?php endif; ?>

モバイルサイト向けにコンテンツを追加する場合に使用します。

モバイルサイトに表示させたくない場合

モバイルサイトに表示させたくない場合の記述です。

<?php if(! wp_is_mobile()): ?>

モバイルサイト以外に表示させる内容を記述

<?php endif; ?>

<?php if(! wp_is_mobile()): ?>

モバイルサイト以外に表示させる内容を記述

<?php endif; ?>

<wp_is_mobile>の前に「 ! 」を追加することで、モバイルサイトを除外します。

モバイルサイトでのみテンプレートファイルを読み込む場合

モバイルサイトでのみ広告やバナーのテンプレートファイルを読み込む場合に使います。

<?php wp_is_mobile('テンプレートファイル名'); ?>

1	<?php wp_is_mobile('テンプレートファイル名'); ?>

当サイトでは、読み込む広告用のテンプレートファイルをPCとモバイルで切り替えています。条件分岐タグを使用して表示するコンテンツを調整すれば、ディスプレイサイズに合わせたコンテンツを表示できると同時に、モバイル端末での読み込み速度に配慮する事ができます。

wp_is_mobile はタブレットもモバイル端末に含む

とても使いやすく便利な<wp_is_mobile>ですが、タブレットもモバイル端末として認識するという問題があります。それで問題がない場合は良いのですが、スマホのみをモバイル端末として認識させたい場合は、新たに条件分岐タグを設定します。

is_mobile 関数を設定

function.php に以下のコードを記述して、新たに<is_mobile>関数を設定します。

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

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

}

あとは<wp_is_mobile>が記述している部分を<is_mobile>に書き換えるだけで、タブレットをモバイル端末から除外する事ができます。

まとめ

メディアクエリで「display:none」を指定して表示を切り替えると、ディスプレイに表示されていなくてもコンテンツの読み込みをしてるので、読み込むコンテンツによってはサイト表示速度に影響が出ます。条件分岐タグを使えば、余計なコンテンツを読み込む必要がないので表示速度的にも有効です。記述も簡単で初心者でも使いやすいと思います。

WordPressでデバイスにごとに表示内容を変更する方法【is_mobile】でした。