WordPressでスマホ、PC、タブレットで表示を分ける方法

大きい地図画像や、解像度の高い美しい画像をホームページに追加したはいいけど、スマホで見ると縮小されて非常に見づらい・・。

レスポンシブデザインの普及した現在、スマホとPCそれぞれで見せたい画像が違うせいで困った、という方はたくさんいるかと思います。

今回は、Wordpressで作成したサイトで、スマホ、PC、タブレットなどそれぞれで表示させたりさせなかったりする方法をお伝えします。

function.phpを利用する

このTIPSは、Wordpress3.4から実装された、「wp_is_mobile関数」を利用する方法です。お手元のWordpressのバージョンが3.4以上であることを確認してください。

3.4以下の場合は、使用中のテーマが対応しているかをご確認の上Wordpressを最新版へアップデートしてください。

そして、テーマのfunctions.phpを開いてください。

メニューの「外観」＞「テーマの編集」より選択が可能です。

「PC」と「スマホ・タブレット」を分岐させる

PCだけで表示させて、スマホ・タブレットでは表示させない。
また、PCでは表示させず、スマホ・タブレットでは表示させる場合です。

// 以下、PC or スマホ・タブレット条件分岐
// PCでのみ表示するコンテンツ
function if_is_pc($atts, $content = null )
{
$content = do_shortcode( $content);
 if(!wp_is_mobile())
 {
 return $content;
 }
}
add_shortcode('pc', 'if_is_pc');
// スマホ・タブレットでのみ表示するコンテンツ
function if_is_nopc($atts, $content = null )
{
$content = do_shortcode( $content);
 if(wp_is_mobile())
 {
 return $content;
 }
}
add_shortcode('nopc', 'if_is_nopc');

以上の文を、function.php最終行にそのままコピペで張り付けてください。

以上で設定は完了です。

WordPress投稿画面内で、

[pc] ～ [/pc]
でくくられた文章はPCのみで表示される（スマホ・タブレットでは表示されない）

[nopc] ～ [/nopc]
でくくられた文章はスマホ・タブレットのみで表示される（PCでは表示されない）

という状態になります。

「PC・タブレット」と「スマホ」を分岐させる

要は、スマホだけのコンテンツがある場合です。タブレットはPCと同等だ、と考える場合に以下のコードを利用します。

//スマホを判別
function is_mobile(){
    $useragents = array(
        'iPhone', // iPhone
        'iPod', // iPod touch
        'Android.*Mobile', // 1.5+ Android *** Only mobile
        'Windows.*Phone', // *** Windows Phone
        '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']);
}

// 以下、PC・タブレット or スマホ条件分岐
// PC・タブレットでのみ表示するコンテンツ
function if_is_nosp($atts, $content = null )
{
$content = do_shortcode( $content);
 if(!is_mobile())
 {
 return $content;
 }
}
add_shortcode('nosp', 'if_is_nosp');
// スマホでのみ表示するコンテンツ
function if_is_sp($atts, $content = null )
{
$content = do_shortcode( $content);
 if(is_mobile())
 {
 return $content;
 }
}
add_shortcode('sp', 'if_is_sp');

上記２つのコードを両方ともfunction.php最終行にそのまま記述してください。

以上で設定完了です。

WordPress投稿画面内で、

[nosp] ～ [/nosp]
でくくられた文章はPC・タブレットのみで表示される（スマホでは表示されない）

[sp] ～ [/sp]
でくくられた文章はスマホのみで表示される（PC・タブレットでは表示されない）

という状態になります。

以上となります。

スマホ、PC、タブレットなど解像度や利用用途が違ういろいろなデバイスが登場している中、レスポンシブデザインをそのまま使うだけではどうしてもユーザビリティを維持できない場合があります。

ユーザーにとって見やすい最適なサイトを構築するうえで、デバイス条件分岐は必須です。

ぜひ活用してください。