ページレイアウト集サブループセット

現在、ブラウザ右に貼り付いている青いヤツ。

以前書いた「表示タイプを（ほぼ）全部判別する条件分岐」の改訂版。

適用されているテンプレートファイル名、ブラウザ情報、デバイス情報なんかを追加。

ソース

<?php $post_type_name = get_post_type_object( get_post_type() )->label; ?>
<div class="template-info">
	<input name="template-info-toggle" type="checkbox" id="template-info-toggle" />
	<label for="template-info-toggle" class="template-info-toggle-label">template info</label>
	<div class="template-tag-info">
		<p class="current-info">現在「<strong><?php
if( is_404() ){
	echo '404';
}elseif( is_search() ){
	if( get_post_type() === 'post' ){
	echo '投稿の検索結果';
	}else{
		echo esc_html( $post_type_name ).'の検索結果';
	}
}elseif( is_page() ){
	if( is_front_page() ){
		echo 'フロントページ';
	}elseif( is_page( 'sitemap-page' ) ){
		echo 'サイトマップページ';
	}elseif( is_page( 'contact' ) ){
		echo 'お問い合わせページ';
	}else{
		echo '固定ページ';
	}
}elseif( is_home() ){
	echo '投稿トップ';
}elseif( is_single() ){
	if( is_attachment() ){
		echo '画像添付（アタッチメント）';
	}elseif( get_post_type() === 'post' ){
		echo '投稿シングル';
	}else{
		echo esc_html( $post_type_name ).':シングル';
	}
}elseif( is_archive() ){
	echo esc_html( $post_type_name );
	if( is_author() ){
		echo ':投稿者';
	}elseif( is_category() ){
		echo ':カテゴリー';
	}elseif( is_tag() ){
		echo ':タグ';
	}elseif( is_tax() ){
		echo ':タクソノミー';
	}elseif( is_day() ){
		echo ':日別';
	}elseif( is_month() ){
		echo ':月別';
	}elseif( is_year() ){
		echo ':年別';
	}else{
		echo ':アーカイブ';
	}
}else{
	echo 'そのほか';
}
			?></strong>」を表示中</p>
	<div class="template-tags-result"><?php
global $template;
$template_name = basename( $template );
echo '適用ファイル<span class="tag-result text">' . $template_name . '</span>';
echo '<p>post_type name<span class="tag-result text">' . get_post_type_object( get_post_type() )->name . '</span></p>';
echo '<p>post_type label<span class="tag-result text">' . get_post_type_object( get_post_type() )->label . '</span></p>';
if( is_front_page() ){
	echo '<p>is_front_page<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_front_page<span class="tag-result false">false</span></p>';
}
if( is_page() ){
	echo '<p>is_page<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_page<span class="tag-result false">false</span></p>';
}
if( is_single() ){
	echo '<p>is_single<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_single<span class="tag-result false">false</span></p>';
}
if( is_attachment() ){
	echo '<p>is_attachment<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_attachment<span class="tag-result false">false</span></p>';
}
if( is_home() ){
	echo '<p>is_home<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_home<span class="tag-result false">false</span></p>';
}
if( function_exists( 'is_post_type_top' ) ) {
	if( is_post_type_top() ){
		echo '<p>is_post_type_top<span class="tag-result true">true</span></p>';
	}else{
		echo '<p>is_post_type_top<span class="tag-result false">false</span></p>';
	}
}
if( get_post_type() ){
	echo '<p>get_post_type<span class="tag-result true">true</span></p>';
}else{
	echo '<p>get_post_type<span class="tag-result false">false</span></p>';
}
if( is_post_type_archive() ){
	echo '<p>is_post_type_archive<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_post_type_archive<span class="tag-result false">false</span></p>';
}
if( is_archive() ){
	echo '<p>is_archive<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_archive<span class="tag-result false">false</span></p>';
}
if( is_category() ){
	echo '<p>is_category<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_category<span class="tag-result false">false</span></p>';
}
if( is_tag() ){
	echo '<p>is_tag<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_tag<span class="tag-result false">false</span></p>';
}
if( is_tax() ){
	echo '<p>is_tax<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_tax<span class="tag-result false">false</span></p>';
}
if( is_search() ){
	echo '<p>is_search<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_search<span class="tag-result false">false</span></p>';
}
if( is_author() ){
	echo '<p>is_author<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_author<span class="tag-result false">false</span></p>';
}
if( is_date() ){
	echo '<p>'.$post_type_name.'投稿タイプのis_date<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_date<span class="tag-result false">false</span></p>';
}
if( is_day() ){
	echo '<p>is_day<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_day<span class="tag-result false">false</span></p>';
}
if( is_month() ){
	echo '<p>is_month<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_month<span class="tag-result false">false</span></p>';
}
if( is_year() ){
	echo '<p>is_year<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_year<span class="tag-result false">false</span></p>';
}
if( is_404() ){
	echo '<p>is_404<span class="tag-result true">true</span></p>';
}else{
	echo '<p>is_404<span class="tag-result false">false</span></p>';
}
if( wp_is_mobile() ){
	echo '<p>wp_is_mobile<span class="tag-result true">true</span></p>';
}else{
	echo '<p>wp_is_mobile<span class="tag-result false">false</span></p>';
}
echo '<p class="touch-result">タッチ<span class="tag-result text"></span></p>';
echo '<p class="screen-short-side">画面短辺<span class="tag-result text"></span></p>';
echo '<p class="current-view">水平方向幅<span class="tag-result text"></span></p>';
echo '<p class="device-orientation">デバイス方向<span class="tag-result text"></span></p>';
?>
		</div>
<?php
echo '<p class="user-agent"><strong>user agent：</strong><br>' . $_SERVER['HTTP_USER_AGENT'] . '<p>';
?>
	</div>
</div>

適当に表示・非表示のスイッチを付けてください。

※タッチ判定、スクリーンサイズ、デバイスの向きはjsなので、後述のjsが必要です。

※「is_post_type_top」は適当に作った自作関数なので、無視か「投稿タイプのトップを判定」をご参照ください。

Java Script

※急に気になって調べ始め、大分ゴニュゴニョ書き換えたので、ハードリロードしないと値が出ないかも。

タッチ対応、スクリーンサイズ、デバイスの向き取得用。

取得結果は「body」へのクラス追加。

※ほかに処理を追加しないなら、スクリプトはbody直後が良いみたい。フッターとかに置いちゃうと、ページスピードが落ちる可能性大。

const body_class = document.getElementsByTagName( 'body' );
var touch_event = window.ontouchstart;
if ( touch_event === null ) {
	body_class[0].classList.add( 'is-touch-device' );
} else {
	body_class[0].classList.add( 'not-touch-device' );
}
var screenWidth = screen.width;
var screenHeight = screen.height;
if ( screenWidth <= screenHeight ) {
	var screenLongSide = screenHeight;
	var screenShortSide = screenWidth;
} else {
	var screenLongSide = screenWidth;
	var screenShortSide = screenHeight;
}
var breakPointSmall = 743;
var breakPointMiddle = 768;
if( screenShortSide <= breakPointSmall ){
	body_class[0].classList.add( 'not-large-screen', 'is-small-screen' );
} else if ( screenShortSide > breakPointMiddle ){
	body_class[0].classList.add( 'is-large-screen', 'not-mobile-screen' );
} else {
	body_class[0].classList.add( 'not-large-screen', 'is-middle-screen' );
}
var orient = window.onorientation;
if( Math.abs( window.orientation ) === 0 || Math.abs( window.orientation ) === 180 ){
	body_class[0].classList.add( 'device-vertical' );
	if( screenShortSide <= breakPointSmall ){
		body_class[0].classList.add( 'view-narrow', 'view-narrow-small' );
	} else if ( screenShortSide > breakPointMiddle ){
		body_class[0].classList.add( 'view-wide' );
	} else {
		body_class[0].classList.add( 'view-narrow', 'view-narrow-middle' );
	}
} else {
	body_class[0].classList.add( 'device-horizontal' );
	if( screenLongSide <= breakPointSmall ){
		body_class[0].classList.add( 'view-narrow', 'view-narrow-small' );
	} else if ( screenLongSide > breakPointMiddle ){
		body_class[0].classList.add( 'view-wide' );
	} else {
		body_class[0].classList.add( 'view-narrow', 'view-narrow-middle' );
	}
}

タッチデバイス

判定を厳密にやると、古いiPadでは「タッチ非対応」になるようです。

一瞬、最近のIPadの「:hoverのイミュレーション」が関係あるのかと思ったけど、違った。

Androidのタブレット数機種で確認したところ、厳密判定でも「タッチ対応」になるけど、:hoverのイミュレーションはない。

ブレークポイント

ブレークポイントは、breakPointSmallとbreakPointMiddleの2か所。

• 小さい = 743pxまで – スマートフォン
• 中くらい = 768pxまで – 古いiPadや最近のiPad miniなど
• 大きい = 769px以上 – 新しいiPadやPC

長辺で判定したい場合は19行目と22行目の「screenShortSide」を「screenLongSide」に変更。

このあたりはテーマに合わせてください。

ディスプレイサイズの取得

screenでやってます。windowで判定するとディベロッパーツールと一致しないので。

また、手持ちの実機では常に、

• screen.width ⇒ 短辺
• screen.height ⇒ 長辺

となりますが、手持ちに無いデバイスは分からないし、ディベロッパーツールではデバイスの向きを変えると縦横が入れ替わる。

ので、簡単な比較で小さい値の方を短辺、としています。

関連してそうな記事を少し見た感じでは、width、heightの定義はどうもはっきりしない様子。

メディアクエリーと組み合わせるためには閲覧状態での水平方向幅も必要なので、デバイスの向きごとに横幅も取得。「screen」で取得するとこの辺が面倒。

スクリーンサイズを素直に表示するサンプル

<h1>screen.width：<span id="screen-width"></span></h1>
<h1>screen.height：<span id="screen-height"></span></h1>
<script>
	document.getElementById('screen-width').textContent = screen.width;
	document.getElementById('screen-height').textContent = screen.height;
</script>

実行結果

screen.width：

screen.height：

参考記事

• タッチデバイス判定
• 端末がタッチ（タップ）に対応しているか確認する
• レスポンシブWebデザインのサイトでデバイスやウインドウ幅によってJavaScriptの処理を条件分岐させる

CSS

ここは任意で。

ただし、jsの判定結果を「bodyへのクラス追加」にしているので、その辺だけは必須。

また、常時表示していると邪魔なので開閉式にしてます。

<style>
/* ---------- テンプレート情報 ---------- */
#template-info-toggle, .template-info-toggle-label, .template-tag-info	{
	position: fixed;
	top: 120px;
	right: 0;
}
#template-info-toggle	{
	opacity: 0;
}
.template-info-toggle-label	{
	writing-mode: vertical-lr;
	text-transform: capitalize;
	font-weight: bold;
	color: #FFF;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 30px;
	padding-top: 0.5em;
	padding-bottom: 0.5em;
	background-color: #15c;
	border: none;
	z-index: 2;
}
#template-info-toggle:checked + .template-info-toggle-label	{
	background-color: #d93600;
}
.template-info-toggle-label:before	{
	font-family: dashicons;
	content: "\f177";
	font-weight: normal;
	margin-bottom: 0.25em;
}
#template-info-toggle:checked + .template-info-toggle-label:before	{
	font-family: dashicons;
	content: "\f530";
}
.template-info-toggle-label:hover	{
	cursor: pointer;
}
.template-tag-info	{
	color: #FFF;
	background-color: rgba( 102, 102, 102, 0.6 );
	padding: 0.5em 1em;
	right: -100%;
	transition: right 0.25s;
	z-index: 1;
}
#template-info-toggle:checked ~ .template-tag-info	{
	padding-right: calc( 30px + 1em );
	right: 0;
}
.template-tags-result	{
	column-count: 2;
	column-gap: 1.3em;	
}
.template-tag-info .tag-result	{
	font-weight: bold;
	text-shadow: 0px 0px 2px rgba( 255, 255, 255, 0.5 );
}
.template-tag-info .tag-result.text	{
	color: #000;
	margin-left: 0.5em;
}
.template-tag-info .tag-result.true	{
	color: #15c;
	margin-left: 0.5em;
}
.template-tag-info .tag-result.false	{
	color: #d93600;
	margin-left: 0.5em;
}
.not-touch-device .touch-result .tag-result:after	{
	content: '非対応';
	color: #d93600;
}
.is-touch-device .touch-result .tag-result:after	{
	content: '対応';
	color: #15c;
}
.is-large-screen .screen-short-side .tag-result:after	{
	content: '769px～'
}
.is-middle-screen .screen-short-side .tag-result:after	{
	content: '744px～768px'
}
.is-small-screen .screen-short-side .tag-result:after	{
	content: '～743px'
}
.device-horizontal .device-orientation .tag-result:after	{
	content: '横'
}
.device-vertical .device-orientation .tag-result:after	{
	content: '縦'
}
.view-narrow-small .current-view .tag-result:after	{
	content: '～743px'
}
.view-narrow-middle .current-view .tag-result:after	{
	content: '744px～768px'
}
.view-wide .current-view .tag-result:after	{
	content: '769px～'
}
.template-tag-info .user-agent	{
	max-width: 24em;
}
@media (max-width: 743px)	{
	.template-tag-info	{
		font-size: 12rem;
	}
}
</style>