WordPressでPCとスマホで表示する要素を切り替える条件分岐のショートコード

レスポンシブデザインの場合、PCとスマホで表示する要素を切り替える場合、CSSであれば、デバイスの横幅を基準にしたメディアクエリを使ってdisplay:noneとdisplay:blockで要素の表示非表示を指定することができます。

WordPressの場合、関数のwp_is_mobile()を使って、アクセスしたデバイスを判別して要素の表示非表示を切り替えることができます。

今回は、WordpressでPCとスマホで表示する要素を切り替える条件分岐のショートコードについてご紹介します。

wp_is_mobile()とは？

wp_is_mobileは、ユーザーがWebサイトを閲覧している端末のヘッダー情報を見て、pc用のコンテンツとスマートフォン(タブレット)用のコンテンツを切り分ける、WordPressの条件分岐タグです。

wp_is_mobile()は、このようにiPadなどのタブレットからのアクセスも、モバイル端末からのアクセスだと判断します。

その為、PCとスマホで条件分岐することができますが、PCとタブレットとスマホで条件分岐することはできないことが特徴です。

wp_is_mobile()を使った設定と基本のコード

wp_is_mobile()を使ったショートコードで、PCとスマホで要素を出し分けをします。

使用しているテーマでwp_is_mobile()が利用できる設定をして、予備知識として使用するwp_is_mobile()の関数について学んでおきましょう。

設定：wp_is_mobile()を有効化

使用しているWordPressのテーマで、ショートコードに含まれるwp_is_mobile()の関数が利用できるように、以下のコードを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']);
}

基本：条件分岐でPCとスマホの要素を切り替える3つの関数

ここでご紹介する3つの関数は、PHPが使用できるファイルでのみ動作が可能です。

投稿や固定ページで使用したい場合は、この後にご紹介するショートコード をfunctions.phpに追記して使用しましょう。

PCとスマホで要素を切り替えたい場合

PCとスマホで要素を切り替えたい箇所に、以下のコードを記述します。

<?php if (wp_is_mobile()) :?>
スマホでの閲覧時に表示させる内容を記述します。
<?php else: ?>
PCでの閲覧時に表示させる内容を記述します。
<?php endif; ?>

PCの場合は要素を表示。スマホなら非表示の場合

PCで観覧している場合は要素を表示させるが、スマホなら非表示にする場合は、以下の様なコードを記述します。

<?php if (wp_is_mobile()) :?>
<?php else: ?>
PCでの閲覧時に表示させる内容を記述します。
<?php endif; ?>

スマホからの観覧時に表示させるコンテンツを記述しないことで、スマホから観覧した時は何も表示されません。PCから観覧した時は、PCからの観覧時に表示させる内容が表示されます。

PCの場合は要素を非表示。スマホでは表示する場合

PCで観覧している場合は要素を非表示にするが、スマホでは要素を表示させる場合は、以下の様なコードを記述します。

<?php if (wp_is_mobile()) :?>
スマホでの閲覧時に表示させる内容を記述します。
<?php else: ?>
<?php endif; ?>

PCからの観覧時に表示させるコンテンツを記述しないことで、PCから観覧した時は何も表示されません。スマホから観覧した時は、スマホからの観覧時に表示させる内容が表示されます。

ショートコードの作成と表示方法

wp_is_mobile()を含むショートコード です。

functions.phpに以下を記述しましょう。

//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');

使用するショートコード

投稿ページや固定ページで、表示させたい場合に応じた以下のショートコードを使います。

PCで表示させたい場合のショートコード

[pc]hoge[/pc]

スマホ・タブレットで表示させたい場合のショートコード

[nopc]piyo[/nopc]

一つのショートコードでPCとスマホの内容を出し分けするコード

PCとスマホでそれぞれ割り当てたショートコードで出力するのとは別に、毎回PCとスマホのコードを都度書くのが面倒な場合、一つのショートコードを書いて自動でPCとスマホの内容を出し分けしてくれるコードもあります。

それをする場合、以下のコードのPCとスマホで出し分けする場所の記述を変更して、functions.php にコピペしたら出来上がり。

出力したい場所にショートコード を 貼り付けしましょう。

//PC・スマホ別コンテンツの出し分けコード
function pcorsp_shortcode() {
if(is_mobile()) {
	// スマホでの出力内容

} else {
	// PC用での出力内容

	};
return $pcorspcode;
}
add_shortcode('pcorsp-code', 'pcorsp_shortcode');