【WordPress】WP_Queryでカテゴリー別に並び替えてデータを出力する方法

こんにちは、ぷぷのすけです。

あるWebサイトを作っていた時にお客様から検索に該当した投稿データをカテゴリー毎に日付の新しい順に並び替えて一覧を表示してほしいと要望がありました。
やりたいことはこんな感じ。

・投稿データ

カテゴリー	最終更新日	品目
野菜・果物	2018/10/2	バナナ
肉・魚	2018/10/3	牛肉
お惣菜	2018/10/1	竜田揚げ
肉・魚	2018/10/5	イワシ
お惣菜	2018/10/4	おひたし
野菜・果物	2018/10/5	トマト

↓

・検索結果

カテゴリー	最終更新日	品目
野菜・果物	2018/10/5	トマト
野菜・果物	2018/10/2	バナナ
肉・魚	2018/10/5	イワシ
肉・魚	2018/10/3	牛肉
お惣菜	2018/10/4	おひたし
お惣菜	2018/10/1	竜田揚げ

 

カテゴリー別に並び替えてデータを取得できない

サブループ１回でカテゴリー別に並び替えてデータを取得出来ると簡単に考えていたら考えが甘かった…
WordPressのリファレンスを見てみると以下のようになっている。

orderbyパラメーターに日付は指定できるがカテゴリー別に並び替えるパラメーターがそもそも存在しない…
取得したデータの配列をソートすれば出来なくはないが別の方法はないかと見ていたら…

• ‘meta_value‘ – カスタムフィールドで並び替える。

カスタムフィールドの文字を発見！
投稿のカテゴリーはそのままにしてカスタムフィールド使用して検索結果の順番を投稿の管理画面で指定できるようにした。

Advanced Custom Fieldsの設定

Advanced Custom Fieldsプラグインはインストールされていたのでそれを使うことにした。

カスタムフィールドの設定は下の画像のように設定。
並び替える順番を数字で指定しカテゴリーと同じ項目をラベルに指定する。

作成したフィールドグループを表示する条件を「投稿タイプ」に設定。

投稿データを作成

投稿の新規追加または変更で下の画像の様に設定して「公開」する。
赤枠の様に商品種類とカテゴリーを一緒に指定する。
カテゴリーを使用しなかったら指定しなくてもOK！

HTML5を使用していることを明示する

WordPress は組み込みの HTML5 検索フォームを使用するためfunction.phpに下記のコードを追加。

add_theme_support( 'html5', array( 'search-form' ) );

 

searchform.phpを作成

searchform.phpに検索フォームを作成。
前項でWordPress は組み込みの HTML5 検索フォームを指定したのでformタグのclassに”search-form”を指定する。
またテキストタイプのinputタグのtype属性は”search”を指定する。

参考：関数リファレンス/get search form

<h2>検索フォーム</h2>
<form class="search-form" role="search" method="get" action="<?php echo home_url('/'); ?>">
	<div class="type">
		<h3>商品種類</h3>
		<label><input type="checkbox" name="type[]" value="1">野菜・果物</label>
		<label><input type="checkbox" name="type[]" value="2">肉・魚</label>
		<label><input type="checkbox" name="type[]" value="3">お惣菜</label>
	</div>
	<div class="price">
		<h3>価格</h3>
		<select class="price_low" name="low">
			<option value="0" selected>下限なし</option>
			<option value="100">100円以上</option>
			<option value="200">200円以上</option>
			<option value="300">300円以上</option>
			<option value="400">400円以上</option>
			<option value="500">500円以上</option>
			<option value="600">600円以上</option>
			<option value="700">700円以上</option>
			<option value="800">800円以上</option>
			<option value="900">900円以上</option>
			<option value="1000">1000円以上</option>
		</select>
		<span>～</span>
		<select class="price_high" name="high">
			<option value="200">200円以下</option>
			<option value="300">300円以下</option>
			<option value="400">400円以下</option>
			<option value="500">500円以下</option>
			<option value="600">600円以下</option>
			<option value="700">700円以下</option>
			<option value="800">800円以下</option>
			<option value="900">900円以下</option>
			<option value="1000">1000円以下</option>
			<option value="9999999" selected>上限なし</option>
		</select>
	</div>
	<div class="free_word">
		<h3>フリーワード</h3>
		<input class="search-field" type="search" name="s">
	</div>
	<input type="submit" value="検索">
</form>

 

検索フォームを任意の場所に表示する

このサンプルではトップページ（front-page.php）に検索フォームを設置した。

front-page.phpはこちら↓

<?php
get_header(); ?>

<div><?php get_search_form(); ?></div>

<?php
get_sidebar();
get_footer();

 

検索結果を表示する

検索フォームに入力された値を元にsearch.phpに検索結果を表示する処理を実装する。
サンプルでは検索フォームのデータを「GET」で受け取っているが「POST」でもOK！

search.phpはこちら↓

<?php
get_header();

	$type = $_GET['type'];
	$low = $_GET['low'];
	$high = $_GET['high'];
	$s = $_GET['s'];

	// 商品種類をエスケープ処理して配列にセット
	foreach($type as $val) {
		$array[] = htmlspecialchars($val, ENT_QUOTES, 'UTF-8');
	}
	// カスタムフィールドのメタデータを配列に設定
	$metaq[] = array('relation' => 'AND',
									 array('key' => 'type',				// キー：カスタムフィールド名（type）
												 'value' => $array,			// 値：フォームで入力された値を配列で渡す
												 'compare' => 'IN', ),	// 条件判定：指定した値のいずれかに該当
									 array('key'=>'price',				// キー：カスタムフィールド名（price）
												 'value'=> array(htmlspecialchars($low, ENT_QUOTES, 'UTF-8'),
																				 htmlspecialchars($high, ENT_QUOTES, 'UTF-8')),
												 												// 値：フォームで入力された値を配列で渡す
												 'compare'=> 'BETWEEN',	// 条件判定：指定した値の範囲内
												 'type'=> 'NUMERIC',)		// 数値
									);

	// 商品種類が昇順で投稿日付の新しい順に並び替えてデータを取得
	$orderby = array(
		'type' => 'ASC',														// 商品種類（type）は降順
		'modified' => 'DESC'														// 更新日は昇順
	);
	// WP_Queryのパラメーターを設定
	$args = array('post_type' => 'post',					// 投稿（post）
								'meta_query' => $metaq,					// カスタムフィールドの値
								'orderby' => $orderby,					// 商品種類が昇順で投稿日付の新しい順
								's' => $s,											// フリーワード
								'posts_per_page' => -1					// 取得件数
								);
	$the_query = new WP_Query($args);
	if($the_query->have_posts()):
		while($the_query->have_posts()):
			$the_query->the_post();
?>
			<div><?php the_content(); ?></div>
<?php
		endwhile;
			wp_reset_postdata();
	else:
?>
			<p>該当なし</p>
<?php
	endif;
get_footer();

 

これで実行した結果がこちら↓

デモはこちら

デメリットは投稿するときにカスタムフィールドとカテゴリーと同じものを選ぶ手間が発生する。まぁカテゴリーを使わずにカスタムフィールドで代用するのであればその手間をはぶけるけどね。

この記事を見て間違いやもっといい方法があったら教えていただけると嬉しいです。