PC＆タブレットとスマートフォンで表示を切り替える条件分岐

2015/10/18
2016/04/16
WordPress
条件分岐, WordPress

PCとタブレットを同じ表示で、スマートフォンだけ別の表示をしたい場合は｢wp_is_mobile｣という条件分岐関数を調整する必要があります。
また、投稿と固定ページへの記述と、テンプレートファイルへの記述方法をまとめます。

wp_is_mobileの調整

｢wp_is_mobile｣関数は、Webサイトを閲覧するデバイスのヘッダー情報を見て、PC用のコンテンツと、スマートフォン用のコンテンツを切り分ける、WordPressで予め用意されている条件分岐タグです。
この関数はPCと、スマートフォン（タブレットを含む）を分岐するため、タブレットをPCに含みたい場合は調整が必要になります。

functions.php

//スマートフォンを判別
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']);
}

記述方法

テンプレートファイルへの記述方法

<?php if ( is_mobile() ) : ?>
  // スマホで表示させたい内容
<?php else: ?>
  // PC・タブレット（スマートフォン以外）で表示させたい内容
<?php endif; ?>

投稿・固定ページへの記述方法

投稿と固定ページは直接phpの記述ができないのでショートコードを使用します。

functions.php

//PC・タブレットでのみ表示するコンテンツ
function pc_tab_cont($atts, $content = null )
{
$content = do_shortcode( $content);
$ua = $_SERVER['HTTP_USER_AGENT'];
  if( strpos($ua, 'iPad') !== false){
    return $content;
    }elseif(!wp_is_mobile())
    {
    return $content;
  }
}
add_shortcode('pc', 'pc_tab_cont');

//スマートフォンのみ表示するコンテンツ
function sp_cont($atts, $content = null )
{
$content = do_shortcode( $content);
$ua = $_SERVER['HTTP_USER_AGENT'];
  if(wp_is_mobile())
    {
    if(strpos($ua, 'iPad') !== false){
    return false;
    }else{
    return $content;
    }
  }
}
add_shortcode('sp', 'sp_cont');

PCとタブレット

[pc]
	表示したいコンテンツ
[/pc]

スマートフォン

[sp]
	表示したいコンテンツ
[/sp]

表示したいコンテンツをショートコードのタグで囲ってください。

まとめ

プラグインを使わずにPCとモバイルの表示を切り替えたいとき、一部のページで表示を切り替えたいときに使える記述方法でした。

参考にさせて頂いたサイト

WordPressでスマートフォン・タブレット・PCで表示を変更する条件分岐方法