【WordPress】スマホ・タブレット・PCでデザインを変える方法

WordPressには便利なテンプレートタグが多くありますが、少し工夫することでさらに使いやすくカスタマイズすることができます。

『スマホ』と『タブレット・PC』の表示内容やデザインを変えて表示する方法。

『スマホ・タブレット』と『PC』の表示内容やデザインを変えて表示する方法。

この2つに関しては参考記事がありますが、

『スマホ』『タブレット』『PC』それぞれの表示内容・デザインを変えて表示する方法についての参考記事がありませんでしたので、紹介します。

【スマホ・タブレット】【PC】の表示を分ける条件分岐

WordPressには元々スマホ・タブレットとPCを切り分けて出力するテンプレートタグがあります。

それが wp_is_mobile です。

表示内容やデザインを変えたい場所に

<?php wp_is_mobile(): ?>
  // スマホ・タブレットに表示させたい内容
<?php else: ?>
  // PCに表示させたい内容
<?php endif; ?>

と記述すればそれぞれのデバイスで出力されます。

【スマホ】【タブレット・PC】の表示を分ける条件分岐

スマホの表示と、タブレット・PCを別のデザインにしたい場合があります。

残念ながら、Wordpressにはそのテンプレートタグがありませんので、functions.phpに追記する必要があります。

functions.php

function is_mobile() {
	$useragents = array(
	'iPhone',
	'iPod',
	'Android',
	'dream',
	'CUPCAKE',
	'blackberry9500',
	'blackberry9530',
	'blackberry9520',
	'blackberry9550',
	'blackberry9800',
	'webOS',
	'incognito',
	'webmate'
	);
	$pattern = '/'.implode('|', $useragents).'/i';
	return preg_match($pattern, $_SERVER['HTTP_USER_AGENT']);
}

と記述してから

各テンプレートに

<?php if ( is_mobile() ) : ?>
  // スマホに表示
<?php else: ?>
  // タブレット・PCに表示
<?php endif; ?>

と条件分岐を記述すれば、スマホのみ違うデザインで表示できます。

【スマホ】【タブレット】【PC】の表示を分ける条件分岐

次は全デバイスの表示を切り分けていきます。

【スマホ】【タブレット・PC】の表示を分けるときと同じように、functions.phpにis_mobileの関数を記述してください。

それができたら、各テンプレートに

<?php if ( is_mobile() ) : ?>
	//スマホのみに表示
<?php else: ?>
    <?php wp_is_mobile(): ?>
        // タブレットのみに表示
    <?php else: ?>
        // PCのみに表示
    <?php endif; ?>
<?php endif; ?>

と記述します。

ここではif文を入れ子構造にして使っています。

1. スマホかどうかを判定
2. スマホのみで表示させる内容を記述
3. それ以外(タブレット・PC)を判定
4. wp_is_mobileはスマホとタブレットへの条件判定ですが、3行目でスマホは弾かれるので、結果としてタブレットのみの判定となります。
5. タブレットに表示させる内容を記述
6. タブレット以外を判定
7. PCに表示させる内容を記述
8. wp_is_mobileの条件分岐終了
9. is_mobileの条件分岐終了

まとめ

案件によってはデザインやアニメーションなどの動きを全デバイス別にしたい場合があるかと思いますので、そんな時に使ってください。

コンテンツに関する質問やご要望は

Facebook

Twitter

より受け付けております。

お気軽にご質問ください。(内容によってはお答えできない場合もございます)