表示デバイスと画面サイズの両方を使った判断方法

wp_is_mobileやis_mobile関数(表示デバイスを取得する方法)は、デバイス種類(PC,タブレット,スマホ)を取得できますが、PCの開発環境でタブレットやスマホの画面デバッグができません。

一方、$size = $_SESSION[windowSize];(表示デバイスを取得する方法)は、PCの開発環境でタブレットやスマホの画面デバッグはできますが、一回目のセッションでは機能しません。

そこでこれらを合わせて

①1回目のセッションでは、表示デバイスで処理する。

②2回目以降のセッションでは、画面サイズで処理する。

という考え方にすると、デバッグ環境でも利用できるデバイス判断関数を作成する事ができます。

　メモ

上記の考え方で正しく画面が表示されないケースは下記条件が一致した時のみになります。

・1回目のセッション

・開発用PCでプログラムをデバックしている時

・Windowsサイズがスマホやタブレットのサイズになっている時

よって上記条件は、実使用上問題ありません。

1.判断関数を作る為の仕様

wp_is_mobileやis_mobileは、ダイレクトにデバイスタイプを返します。

しかし画面サイズの取得は、画面サイズとデバイスタイプの関係を定める必要があります。

このサイトのCSSは、上記の関係が下記の様になっています(BootstrapとFlexboxの特徴と違い）

	スマホ	タブレット	PC
表示幅(px)	～767	768～991	992～
名称	xs	sm	pc

そこでPHP側で判断するこの関数も、上記ブレークポイントを採用します。

　メモ

スマホやタブレットは、デバイスを回転させる為に画面サイズ(px)が変化します。

例えば私が所有しているデバイスでは

・スマホ :縦表示=360px、横表示=598px

・ｉPAD :縦表示=768px、横表示=1024px

になっており、上記ブレークポイントで言うと、スマホはxs、iPADの縦表示はsm、横表示はmdになります。

2.新規判断関数の作成【is_my_mobile()】

functions.phpに下記関数を追加します。

<?php
/*****************************************************************************
Window幅及びWordPress関数からデバイスタイプを返す関数
*******************************************************************************/
function is_my_mobile()
{
 $size = $_SESSION[windowSize];
 if($size == 0)
  {
  if(is_mobile()){return 'xs';}
  elseif(wp_is_mobile()){return 'sm';}
  else{return 'pc';}
  }
 elseif($size <= 767){return 'xs';}
 elseif(768 <= $size && $size <= 991){return 'sm';}
 else{return 'pc';}
}
?>

※1.$_SESSION[windowSize]が0の時が、1回目のセッション(初期画面)になります。

※2.この時は、is_mobile()とwp_is_mobile()でデバイスタイプを返します。

※3.それ以降は、画面サイズをブレークポイントで判断してデバイスタイプを返します。

3.is_my_mobile の使い方

下記は左側にコンテンツ、右にサイドバーを表示するが、デバイスがスマホの時はサイドバーをボタン表示し、その下にコンテンツを表示するプログラムになっています。

<?php get_header(); ?>
<?php if(is_my_mobile() == 'xs'):?>
	<?php get_template_part('sidebar-xs'); ?> 
<?php endif;?>
<div id='background'>
	<div id='post-contener'>
　　<?php while ( have_posts() ) : the_post(); ?>
			<div class='contents'>
				<?php the_content();?>
			</div>
		<?php endwhile;?>
	</div>
　<div id='widget-contener'>
　　<?php get_sidebar(); ?>
　</div>
</div>
<?php get_footer(); ?>

上記プログラムは下記の様な動作になります。

①headerを書く。

②is_my_mobile()関数で判断し、デバイスがスマホならスマホ用のサイドバーメニュをheaderの下に表示する。
(sidebar-xsはサイドバーをボタンにしたphpプログラムです)

③次に画面は左側にコンテンツ(post-contener)、右にサイドバー(widget-contener)で表示する。
(但し、CSSで画面サイズがスマホの時はwidget-contenerをdisplay:noneに設定する)

④footerを書く。

　メモ

当然、この関数は下記の様な書き方も可能ですが、CSSのメディアクエリ(@media)と併用した方が簡潔なプログラムになります。

<?php if(is_my_mobile() == 'xs'):?>
　　スマホの画面
<?php elseif(is_my_mobile() == 'sm'):?>
　　タブレット画面示
<?php else:?>
　　PC画面
<?php endif；?>