WordPressカスタマイズ事例

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

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

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

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

<?php
<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' => 10, // 表示件数
	'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 = wp_get_object_terms($post->ID, 'jobs_area');
		$jobs_area_name = $jobs_areas[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;?>

はい、できました。

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

まず検索ページ。

/* 親タームを取得して、親タームの後ろに子タームを加える */
$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;
	}
}

<?php
<form method="get" action="<?php echo home_url('/'); ?>jobs/" > //jobページにgetで値を渡し、検索結果を出す
	<?php foreach($jobs_skill_terms as $jobs_skill_term){
		if ($jobs_skill_term-> parent == '0'){
			echo '<h6 class="mt-10 left"><strong>【'.$jobs_skill_term->name.'】</strong></h6>'; //親タームなら
		}else{
			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>';
		}
	} ?>
	<hr class="dashed" />
	<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){
		$jobs_skill[]=htmlspecialchars($value);
		$jobs_skill_selected[]=htmlspecialchars($value);
	}
}else{
	foreach($jobs_skill_terms as $jobs_skill_term){
		$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' => 10, // 表示件数
	'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 = 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 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つのページで表現できます。


その他のWordPressカスタマイズ事例