条件分岐を使ってスマホ・タブレット・PCの表示を切り分ける方法【WordPress】

デザイン
この記事は約 < 1 分で読むことができます。

webサイトなどで、スマホ・タブレット・PCそれぞれ表示を切り替えたい場合は条件分岐を使う方法がおすすめです。

画像の表示・非表示を切り替えるだけではなく、htmlやJSなどの構造ごと切り替えることができるので、表現の幅が広がりますよ!

ASK
ASK
今回紹介する条件分岐はphpファイルに記載するためのコードだよ。
普通の固定ページや投稿ページに記載しても意味がないので注意してね!
スポンサーリンク

スマホ・タブレット・PCそれぞれ表示を切り替える条件分岐

<?php
$ua = $_SERVER['HTTP_USER_AGENT'];
if ((strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) || (strpos($ua, 'iPhone') !== false) || (strpos($ua, 'Windows Phone') !== false)) {
?>

  //スマホで表示させたい内容を記載

<?php } elseif ((strpos($ua, 'Android') !== false) || (strpos($ua, 'iPad') !== false)) { ?>

  //タブレットで表示させたい内容を記載

<?php } else { ?>

  //PCで表示させたい内容を記載

<?php } ?>

スマホとそれ以外で表示を切り替える条件分岐

<?php
	$ua=$_SERVER['HTTP_USER_AGENT'];
	$browser = ((strpos($ua,'iPhone')!==false)||(strpos($ua,'iPod')!==false)||(strpos($ua,'Android')!==false));
		if ($browser == true){
		$browser = 'sp';
	}
	if($browser == 'sp'){
?>

  //スマホで表示させたい内容を記載

<?php }else{ ?>

  //タブレット・PCで表示させたい内容を記載

<?php } ?>

CSSで表示を切り分けちゃダメなの?

最近はレスポンシブデザインが主流ではありますが、時にはPC・スマホで別々の画像を表示させたい場面が出てきます。

詳しくはこちらで解説しています↓

PCとスマホでバナーを切り替えたほうが良い3つの理由!アダプティブデザインの効果を徹底解説!
どうもこんにちは、WEBデザイナーのASK(@ASK84032731)です。 みなさんはバナーを制作するときPCとスマホの2パターン用意していますか? ASK おいおい、時代はレスポンシブデザインだろ、何を...

そんな時にCSSのdisplay:noneを駆使して表示を切り替えてもいいのですが、これには1つ問題があります。

ページを表示する際、表示されていない画像のコードも毎回読み込まれるので、ページの表示速度に影響が出てしまいます。

そこまで大した差ではありませんが、こういった小さな積み重ねで結果的にサイトが重くなってしまうのです。

なるべく無駄なコードを無くすためにもなるべく条件分岐を使うようにしましょう!

まとめ

今回紹介したコードをphpファイルにコピペするだけで条件分岐を使うことができます。

Webサイトを作成するうえで必ず使うコードですので、お気に入りに登録しておくことをおすすめします。

最初は難しく思えるかもしれませんが、やってみると簡単ですのでぜひ試してみてください!

この記事が気に入ったら
いいね ! しよう

Twitter で

コメント