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

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とモバイルの表示を切り替えたいとき、一部のページで表示を切り替えたいときに使える記述方法でした。