WordPressでPCとスマートフォンの表示を切り替える場合
WordPressでPCとスマートフォンの表示を切り替える場合の方法をまとめました。
条件分岐タグを使って、PCとスマートフォンで表示を切り替えます。
目次
条件分岐タグについて
条件分岐タグの基本的な書き方
<?php if (条件) : ?> 条件に合う時の処理を書く <?php else: ?> 条件に合わない時の処理を書く <?php endif; ?>
基本的にはphpのif文で構成します。
条件に合わない時の処理が必要ないときは、elseを省略可能。
条件分岐タグ wp_is_mobile()について
wp_is_mobileという条件分岐タグは、スマホからのアクセスかどうかを判別します。
PC・スマホで表示する内容を変える時にとても便利です。
<?php if ( wp_is_mobile() ) : ?> スマホの時の処理を書く <?php else: ?> PCの時の処理を書く <?php endif; ?>
基本的には、タブレットもスマホ扱いになるので注意しましょう。
タブレットもPC扱いにする場合
タブレットもPC扱いにしたい時などはis_mobile()という条件分岐タグを定義し、テーマファイルのfunctions.phpに追加します。
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']);
}
タブレットはこの中に入れていないため、PCと同じ扱いになります。
iPhoneだけの場合、Androidだけの場合なども上記をカスタマイズすれば判別が可能です。
<?php if ( is_mobile() ) : ?> スマホの時の処理を書く <?php else: ?> PC・タブレットの時の処理を書く <?php endif; ?>
詳細はWordPressのオフィシャルページをご確認ください。