WWordPressカスタマイズ事例

フォームでタグやカテゴリなどの複合条件を選択して絞り込み検索するテーマ販売あり

お仕事情報サイトなどで、お仕事条件をチェックボックスやプルダウンで選択して絞り込むのありますよね。今回はその絞り込み検索を作ります。
例として、タクソノミーに設定した勤務地をプルダウンで選択して絞り込んでみます。

まず検索ページ。サイドバーに設置したりしますね。

<?php
$jobs_area_terms = get_terms('jobs_area',array( 'orderby' => 'term_order','order' => 'ASC' )); //タクソノミー「勤務地」のターム取得
$jobs_area_selected = array(); //前回の検索条件を保持するための配列
$jobs_areas = isset($_GET['jobs_area']) ? $_GET['jobs_area'] : null; //検索条件をget値から取得
if($jobs_areas){
	foreach((array)$jobs_areas as $value){
		$jobs_area_selected[]=htmlspecialchars($value); //現時点の検索条件を配列に格納
	}
}
?>
<form method="get" action="<?php echo home_url('/'); ?>jobs/"> //jobページにgetで値を渡し、検索結果を出す
	<table>
		<tr>
			<th class="small">エリア</th>
			<td>
				<select name="jobs_area">
					<option value="">すべて</option>
					<?php foreach($jobs_area_terms as $jobs_area_term){
						echo '<option value="'.$jobs_area_term->slug.'" ';
						if($jobs_area_selected){ //現時点の検索条件に selected="selected" を設定
							foreach($jobs_area_selected as $value){
								if($value==$jobs_area_term->slug){
									echo 'selected="selected"';
								}
							}
						}
						echo '>'.$jobs_area_term->name.'</option>';
					} ?>
				</select>
			</td>
		</tr>
	</table>
	<input id="submit" type="submit" value="検索" />
</form>

次に検索結果ページです。

$jobs_area_terms = get_terms('jobs_area',array( 'orderby' => 'term_order','order' => 'ASC' )); //タクソノミー「勤務地」のターム取得

$jobs_area = array();
$jobs_areas = array();
$jobs_area_selected = array();
$jobs_areas = isset($_GET['jobs_area']) ? $_GET['jobs_area'] : null;
if($jobs_areas){
	foreach((array)$jobs_areas as $value){ //get値がある場合は該当項目をセット
		$jobs_area[]=htmlspecialchars($value);
		$jobs_area_selected[]=htmlspecialchars($value);
	}
}else{
	foreach($jobs_area_terms as $jobs_area_term){ //get値がない場合は全項目をセット
		$jobs_area[] = $jobs_area_term->slug;
	}
}


$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query( array(
	'post_status' => 'publish',
	'post_type' => 'jobs',
	'tax_query' => array(
		'relation' => 'AND',
		array(
			'taxonomy' => 'jobs_area',
			'field' => 'slug',
			'terms' => $jobs_area,
		),
	),
	'paged' => $paged,
	'posts_per_page' => 20, // 表示件数
	'orderby'     => 'date',
	'order' => 'DESC',
) );


if ($the_query->have_posts()) :

	while ($the_query->have_posts()) : $the_query->the_post();

		$jobs_area_label = get_taxonomy( 'jobs_area' )->label;
		$jobs_areas_arr = wp_get_object_terms($post->ID, 'jobs_area');
		$jobs_area_name = $jobs_areas_arr[0]->name;

?>

		<div>
			<div><h3><?php the_title(); ?></h3></div>
			<div>
				<table>
					<tr>
						<th><?php echo $jobs_area_label; ?></th>
						<td><?php echo $jobs_area_name; ?></td>
					</tr>
				</table>
			</div>
		</div>

	<?php endwhile;

else :?>
	<h3>条件に合致する求人情報はありません</h3>
<?php endif;?>

はい、できました。

では次に、
タクソノミーに設定した業務スキルをチェックボックスで複数選択して絞り込む場合をやってみます。

まず検索ページ。

<?php
$jobs_skill_terms = get_terms('jobs_skill',array( 'orderby' => 'term_order','order' => 'ASC' ));
$jobs_skill_selected = array(); //前回の検索条件を保持するための配列
$jobs_skills = isset($_GET['jobs_skill']) ? $_GET['jobs_skills'] : null; //検索条件をget値から取得
if($jobs_skills){
	foreach((array)$jobs_skills as $value){
		$jobs_skill_selected[]=htmlspecialchars($value); //現時点の検索条件を配列に格納
	}
}
?>
<form method="get" action="<?php echo home_url('/'); ?>jobs/" > //jobページにgetで値を渡し、検索結果を出す
	<?php foreach($jobs_skill_terms as $jobs_skill_term){
		echo '<label><input type="checkbox" name="jobs_skill[]" value="'.$jobs_skill_term->slug.'" ';
		if($jobs_skill_selected){ //現時点の検索条件に checked を設定
			foreach($jobs_skill_selected as $value){
				if($value==$jobs_skill_term->slug){
					echo 'checked';
				}
			}
		}
		echo '> '.$jobs_skill_term->name.'</label>';
	} ?>
	<input id="submit" type="submit" value="検索" />
</form>

そして、検索結果ページ

$jobs_skill_terms_pros = get_terms('jobs_skill',array( 'orderby' => 'term_order','order' => 'ASC', 'parent'=>'0' )); //親タームを取得
foreach($jobs_skill_terms_pros as $jobs_skill_term_pros){
	$jobs_skill_terms[] = $jobs_skill_term_pros;
	$jobs_skill_terms_elems = get_terms('jobs_skill',array( 'orderby' => 'term_order','order' => 'ASC', 'parent'=> $jobs_skill_term_pros->term_id )); //子タームを取得

	foreach ($jobs_skill_terms_elems as $jobs_skill_terms_elem){
		$jobs_skill_terms[] = $jobs_skill_terms_elem;
	}
}

$jobs_skill = array();
$jobs_skills = array();
$jobs_skill_selected = array();
$jobs_skills = isset($_GET['jobs_skill']) ? ($_GET['jobs_skill']) : null;
if($jobs_skills){
	foreach($jobs_skills as $value){ //get値がある場合は該当項目をセット
		$jobs_skill[]=htmlspecialchars($value);
		$jobs_skill_selected[]=htmlspecialchars($value);
	}
}else{
	foreach($jobs_skill_terms as $jobs_skill_term){ //get値がない場合は全項目をセット
		$jobs_skill[] = $jobs_skill_term->slug;
	}
}

$paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
$the_query = new WP_Query( array(
	'post_status' => 'publish',
	'post_type' => 'jobs',
	'tax_query' => array(
		'relation' => 'AND',
		array(
			'taxonomy' => 'jobs_skill',
			'field' => 'slug',
			'terms' => $jobs_skill,
		),
	),
	'paged' => $paged,
	'posts_per_page' => 20, // 表示件数
	'orderby'     => 'date',
	'order' => 'DESC',
) );

if ($the_query->have_posts()) :

	while ($the_query->have_posts()) : $the_query->the_post();

		$jobs_skill_label = get_taxonomy( 'jobs_skill' )->label;
		$jobs_skills_arr = wp_get_object_terms($post->ID, 'jobs_skill',array( 'orderby' => 'term_order' ));

?>

	<div>
		<div><h3><?php the_title(); ?></h3></div>
			<div>
				<table>
					<tr>
						<th><?php echo $jobs_skill_label; ?></th>
						<td><?php
						$n = 0;
						foreach($jobs_skills_arr as $jobs_skill){
							if($n!=0){
								echo ', '; //複数の場合はカンマ区切りにする
							}
							echo $jobs_skill->name;
							$n++;
						} ?></td>
					</tr>
				</table>
			</div>
		</div>

	<?php endwhile;

else :?>
	<h3>条件に合致する求人情報はありません</h3>

<?php endif;?>

いかがでしたでしょうか？
フォームでメタタグやカテゴリなどの複合条件を選択して絞り込み検索する、でした。

プルダウンとチェックボックスを分けてご紹介していますが、2つを合体すれば1つのページで表現できます。
　
　
さて、今回はノーマルなページ遷移して検索結果を表示するパターンを作りましたが、こういうのもありますのでご興味のある方はどうぞ。
Ajaxでページ遷移なしの絞り込み検索をつくる

【この事例を解決するためのWordPressテーマを購入できます】

現在あなたが利用されているWordPressテーマを活かしたまま、このページの事例を解決できるWordPressテーマを、子テーマとして購入できます。
この子テーマを有効化するだけで、現在お使いのデザインテーマにこの事例解決の機能が自動付与されます。
デザインが入っていないため、一般より格段に低い価格（事例の難易度により200円～1.3万円）です。
※ テーマは買い切りです
※ 自由に改変してお使いいただいて構いません
※ すでに子テーマでサイト運用されている方は、当該子テーマをマージしてください