WordPressで求人情報や商品一覧などを掲載する際、ユーザーが希望条件に合った情報を素早く見つけられるよう「絞り込み検索」の機能が求められることがあります。
この記事では、プラグインを使わずに、複数条件での絞り込み検索を実装する方法を紹介します。対象読者は、WordPressでのカスタマイズにある程度慣れている方向けです。
それでは、早速基本的な実装ステップを見ていきましょう。
1. 完成イメージ
完成イメージは以下のとおりです。
必要最低限のスタイルのみ当てています。
求人一覧画面で、初期表示はすべての求人が表示されます。
任意の項目をチェックした後に、「検索」を押下すると条件に合致する求人のみが表示れます。
2. 実装手順
2-1. カスタム投稿タイプと分類項目（タクソノミー）を定義する
まずは、求人情報などを投稿するためのカスタム投稿タイプ「job」を登録します。あわせて、「勤務地」「職種」「雇用形態」といった検索条件となるカスタムタクソノミーを用意します。
以下をfunctions.phpに記述してください。
/* ==========================================================
// カスタム投稿タイプとタクソノミーの追加
========================================================== */
// カスタム投稿タイプ「job」
function register_job_post_type() {
register_post_type('job', [
'label' => '求人',
'public' => true,
'has_archive' => true,
'supports' => ['title', 'editor'],
'rewrite' => ['slug' => 'jobs'],
]);
}
add_action('init', 'register_job_post_type');
// タクソノミー「勤務地」
register_taxonomy('job_location', 'job', [
'label' => '勤務地',
'hierarchical' => true,
'public' => true,
]);
// タクソノミー「職種」
register_taxonomy('job_category', 'job', [
'label' => '職種',
'hierarchical' => true,
'public' => true,
]);
// タクソノミー「雇用形態」
register_taxonomy('employment_type', 'job', [
'label' => '雇用形態',
'hierarchical' => true,
'public' => true,
]);
投稿タイプやタクソノミーは作成したい投稿内容に合わせて適宜調整してください。
2-2. 検索機能を追加する
続いて検索機能を追加します。
検索機能は、WordPressで投稿データを読み込む直前に実行することができる「pre_get_posts」というアクションフックを使用することで実現できます。
以下のコードをfunctions.phpに記述してください。
/* ==========================================================
// 検索機能
========================================================== */
function filter_job_search_query($query) {
if (!is_admin() && $query->is_main_query() && is_post_type_archive('job')) {
$tax_query = ['relation' => 'AND'];
// 勤務地
if (!empty($_GET['job_location'])) {
$tax_query[] = [
'taxonomy' => 'job_location',
'field' => 'slug',
'terms' => [sanitize_text_field($_GET['job_location'])], // 配列にする
];
}
// 職種（複数チェック対応）
if (!empty($_GET['job_category'])) {
$tax_query[] = [
'taxonomy' => 'job_category',
'field' => 'slug',
'terms' => array_map('sanitize_text_field', $_GET['job_category']),
'operator' => 'IN',
];
}
// 雇用形態（複数チェック対応）
if (!empty($_GET['employment_type'])) {
$tax_query[] = [
'taxonomy' => 'employment_type',
'field' => 'slug',
'terms' => array_map('sanitize_text_field', $_GET['employment_type']),
'operator' => 'IN',
];
}
// tax_queryがあればセット
if (!empty($tax_query)) {
$query->set('tax_query', $tax_query);
}
// フリーワード
if (isset($_GET['s']) && $_GET['s'] !== '') {
$query->set('s', sanitize_text_field($_GET['s']));
}
}
}
add_action('pre_get_posts', 'filter_job_search_query');
それぞれの処理は、「その値が設定されていれば」というif文で分岐しているので、何も値が設定されていなければ、投稿データが全件表示されます。
2-3. 絞り込み検索用のテンプレートを作成する
次に、検索フォームと検索結果を表示するテンプレートファイルを作成します。
■検索フォーム
今回は「template-parts」というフォルダの中に、job-search-form.phpというフォーム用のテンプレートパーツを作成します。
<form method="get" action="<?php echo get_post_type_archive_link('job'); ?>">
<div class="form__inner">
<input type="text" name="s" placeholder="フリーワード" value="<?php echo get_search_query(); ?>">
<!-- 勤務地 -->
<select name="job_location">
<option value="">勤務地を選択</option>
<?php
$locations = get_terms('job_location');
foreach ($locations as $loc) {
echo '<option value="' . esc_attr($loc->slug) . '">' . esc_html($loc->name) . '</option>';
}
?>
</select>
<!-- 職種 -->
<div>
<h2>職種</h2>
<?php
$categories = get_terms('job_category');
foreach ($categories as $cat) {
echo '<label><input type="checkbox" name="job_category[]" value="' . esc_attr($cat->slug) . '"> ' . esc_html($cat->name) . '</label>';
}
?>
</div>
<!-- 雇用形態 -->
<div>
<h2>雇用形態</h2>
<?php
$types = get_terms('employment_type');
foreach ($types as $type) {
echo '<label><input type="checkbox" name="employment_type[]" value="' . esc_attr($type->slug) . '"> ' . esc_html($type->name) . '</label>';
}
?>
</div>
<button type="submit">検索する</button>
<a href="<?php echo get_post_type_archive_link('job'); ?>">クリアする</a>
</div>
</form>
ここでのポイントは、formタグのmethodにgetを、actionに求人一覧画面のURLを設定している点です。
これにより、求人一覧画面のURLの末尾に、検索条件データを追加して送ることが可能になります。
■検索結果を表示するテンプレート
最後に、求人一覧を表示するテンプレートを作成します。
カスタム投稿タイプ「job」を追加したので、「archive-job.php」ファイルを作成します。
<main id="content" role="main">
<h1 class="h1">求人一覧</h1>
<?php get_template_part('template-parts/job-search-form'); ?>
<?php if (have_posts()) : ?>
<ul class="job-list">
<?php while (have_posts()) : the_post(); ?>
<li class="job-item">
<a href="<?php the_permalink(); ?>">
<div class="title-area">
<h2><?php the_title(); ?></h2>
<div class="job-meta">
<!-- 勤務地 -->
<p>
<strong>勤務地:</strong>
<?php
$terms = get_the_terms(get_the_ID(), 'job_location');
if ($terms && !is_wp_error($terms)) {
echo esc_html($terms[0]->name); // 1つだけ表示
}
?>
</p>
<!-- 職種 -->
<p>
<strong>職種:</strong>
<?php
$terms = get_the_terms(get_the_ID(), 'job_category');
if ($terms && !is_wp_error($terms)) {
echo esc_html(implode(', ', wp_list_pluck($terms, 'name')));
}
?>
</p>
<!-- 雇用形態 -->
<p>
<strong>雇用形態:</strong>
<?php
$terms = get_the_terms(get_the_ID(), 'employment_type');
if ($terms && !is_wp_error($terms)) {
echo esc_html(implode(', ', wp_list_pluck($terms, 'name')));
}
?>
</p>
</div>
</div>
<!-- 抜粋 -->
<div class="job-excerpt">
<?php the_excerpt(); ?>
</div>
</a>
</li>
<?php endwhile; ?>
</ul>
<!-- ページネーション -->
<div class="pagination">
<?php the_posts_pagination(); ?>
</div>
<?php else : ?>
<p>該当する求人が見つかりませんでした。</p>
<?php endif; ?>
</main>
検索フォームの部分は、直前で作成した検索フォームをget_template_partで読み込みます。
また、「2-2. 検索機能を追加する」で、すでに記事読み込み直前に検索機能が実行されるようになっていますので、このテンプレートファイル側では条件分岐などを意識する必要はありません。
2-4. フロントで動作を確認する
最後にフロント側で動作を確認してみましょう。
任意のチェックボックスを選択し、検索ボタンを押下すると対象の求人のみが表示されるはずです。
おわりに
いかがでしたでしょうか？
少しコード量が多く感じられたかもしれませんが、カスタム投稿タイプやカスタムタクソノミーの追加にプラグインを使えば、もう少しスッキリさせることも可能です。
ただ、プラグインを使わずにphpのみで完結することで、裏側の処理が明確になり、後々タクソノミーの追加や検索条件のカスタマイズが柔軟にできるようになるというメリットもあります。
記事の検索機能はサイト制作で求められることも多いので、是非この機械にお試しください。
