WordPressで条件分岐してPC・スマホ表示を切り替える方法

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

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

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とスマホでバナーを切り替える方法【アダプティブデザイン】

どうもこんにちは、WEBデザイナーのASK(@ASK84032731)です。みなさんはバナーを制作するときPCとスマホの2パターン用意していますか？ASKおいおい、時代はレスポンシブデザインだろ、何を言っているんだコイツはと思った方も是非最

hazideza.com

2020.08.27

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

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

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

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

💻 Webデザインスキルを本格的に学びたい方へ

HTML/CSS・WordPress・UIデザインなど、Webデザインの実務スキルは独学では遠回りになりがちです。デジLIG（旧LIG）なら現役Webデザイナーに教わりながら実践的スキルを最短習得。補助金を活用すれば、費用の最大70%が還付されます。

▶ 【無料】デジLIG カウンセリングを予約する（補助金確認OK）

※完全無料・オンライン可・強引な勧誘なし

まとめ

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

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

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

よくある質問