レスポンシブデザイン制作の際、CSSを別に設定したSP版専用のデザインを反映したい場合、使えるwp_is_mobile()をメモします。

wp_is_mobile()とは

これは、モバイルとPCを判別するために予め用意された関数でwp-includes/vars.phpで定義されています。

vars.php

function wp_is_mobile() {
if ( empty( $_SERVER['HTTP_USER_AGENT'] ) ) {
$is_mobile = false;
} elseif ( strpos( $_SERVER['HTTP_USER_AGENT'], 'Mobile' ) !== false // Many mobile devices (all iPhone, iPad, etc.)
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Android' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Silk/' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Kindle' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'BlackBerry' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mini' ) !== false
|| strpos( $_SERVER['HTTP_USER_AGENT'], 'Opera Mobi' ) !== false ) {
$is_mobile = true;
} else {
$is_mobile = false;
}

/**
* Filters whether the request should be treated as coming from a mobile device or not.
*
* @since 4.9.0
*
* @param bool $is_mobile Whether the request is from a mobile device or not.
*/
return apply_filters( 'wp_is_mobile', $is_mobile );
}

判別方法はHTTP リクエストヘッダに付いてくるユーザーエージェントを見ています。

条件分岐の書き方

条件分岐書き方はいつも通り。

if ( wp_is_mobile() ) {
/* モバイル向けの処理 */
} else {
/* PC 向けの処理 */
}

または

<?php if ( wp_is_mobile() ) : ?>
/* モバイル向けの処理 */
<?php else: ?>
/* PC 向けの処理 */
<?php endif; ?>

となります。

Ipadへの対応

wp_is_mobile関数は大変便利ですが、「Many mobile devices (all iPhone, iPad, etc.)」とあるようにデフォルトだとIpadもモバイルとして処理され、意図しない表示になります。

そこで、お馴染みのfunctions.phpに自作の関数を追加します。

functions.php

function is_mobile() {

$match = 0;

$ua = 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
'BlackBerry', // BlackBerry
'webOS', // Palm Pre Experimental
'incognito', // Other iPhone browser
'webmate' // Other iPhone browser
);

$pattern = '/' . implode( '|', $ua ) . '/i';
$match = preg_match( $pattern, $_SERVER['HTTP_USER_AGENT'] );

if ( $match === 1 ) {
return TRUE;
} else {
return FALSE;
}

}

これによりIpadはモバイルに含まれなくなります。

条件分岐の書き方

基本は同じです。関数のみオリジナルにおします。

if ( is_mobile() ) {
/* モバイル向けの処理 */
} else {
/* PC 向けの処理 */
}

または

<?php if ( is_mobile() ) : ?>
/* モバイル向けの処理 */
<?php else: ?>
/* PC 向けの処理 */
<?php endif; ?>

となります。

ショートコードで使用できるようにする

投稿ページや固定ページで表示内容を切り替える処理をする場合に有用なショートコードを設定します。functions.phpに以下を追加します。

functions.php

function if_pc($atts, $content = null ) {
$content = do_shortcode( $content);
if(!wp_is_mobile()) {
return $content;
}
}
add_shortcode('pc', 'if_pc');

function if_sp($atts, $content = null ) {
$content = do_shortcode( $content);
if(wp_is_mobile()) {
return $content;
}
}
add_shortcode('sp', 'if_sp');

投稿、固定ページには以下のように記述します。

PC向けの内容

サイトを運用する上で、マイナーアップデートは日常でCSSだけでは対応が難しい場面も多々あります。

もちろん Javascriptも可能ですがキャッシュの問題もあるので安定した切り替えは本関数が有用じゃないかと思います。