WordPress プラグイン無しで絞り込み検索を実装する

テキストフィールド + ラジオボタン / テキストフィールド + チェックボックス で絞り込み検索フォームを作成する手順です。

書籍をフリーワードとジャンルで検索する例です。カスタム投稿です。

• カスタム投稿タイプ名: book
• カスタムタクソノミー名: book_cat

検索フォームの作成には WP Query の tax_query を利用して実装します。

検索フォームに必要なテンプレートを作成する

テーマフォルダ内に searchform.php （検索フォーム）と search.php （検索結果の表示）の２つのテンプレートを作成します。

テキストフィールド + ラジオボタンの場合

準備中…（すみません…）

テキストフィールド + チェックボックスの場合

チェックボックスは複数選択ができるため name 属性の値の末尾に [] を追加して値を2次元配列として格納する必要があるため、ラジオボタンに比べて若干ややこしいです。

searchform.php

投稿タイプの絞り込みはform内に下記を記述するのでもOKかも（検証中）
<input type=”hidden” name=”post_type” value=”post”>

<?php
/**
 * 検索フォーム
 */
?>
<form role="search" method="get" action="<?php echo esc_url( home_url( '/' ) ); ?>book/">
<h3>本検索</h3>
<p>フリーワード</p>
<input type="text" value="<?php echo get_search_query(); ?>" name="s" placeholder="キーワードを入力してください">
<p>カテゴリー</p>
<?php
	$book_cats = get_terms(
		'book_cat',
		array(
			'orderby'    => 'name',
			'order'      => 'ASC',
			'hide_empty' => false,
		)
	);
	foreach ( $book_cats as $book_cat ) {
		echo '<label><input ';
		echo isset( $_GET['book_cat'] ) && in_array( $book_cat->slug, (array) $_GET['book_cat'] ) ? 'checked ' : '';
		echo 'type="checkbox" name="book_cat[]" value="' . esc_attr( $book_cat->slug ) . '">';
		echo esc_html( $book_cat->name );
		echo '</label>';
	}
	?>
	<button type="submit">検索</button>
</form>

search.php

<?php
/**
 * 検索結果
 */
?>
<?php get_header(); ?>
<?php if ( empty( $_GET['s'] ) && empty( $_GET['book_cat'] ) ) : ?>
	<p>検索条件を入力してください。</p>
	<?php get_search_form(); ?>
<?php else : ?>
	<h2 class="c-heading-h1">検索結果</h2>
	<?php
	$text     = sanitize_text_field( wp_unslash( $_GET['s'] ) );
	$taxquery = array();

	if ( $text ) {
		echo '<p>フリーワード:' . esc_html( $text ) . '</p>';
	}

	if ( ! empty( $_GET['book_cat'] ) ) {
		$book_cats = wp_unslash( $_GET['book_cat'] );
		$taxquery  = array(
			array(
				'taxonomy' => 'book_cat',
				'field'    => 'slug',
				'terms'    => $book_cats,
				'operator' => 'IN',
			),
		);

		echo '<p>本カテゴリー : ';
		foreach ( $book_cats as $book_cat ) {
			$term_obj = get_term_by( 'slug', $book_cat, 'book_cat' );
			echo esc_html( $term_obj->name );
			if ( end( $book_cats ) !== $book_cat ) {
				echo ', ';
			}
		}
		echo '</p>';
	}

	$search_query = new WP_Query(
		array(
			'post_type' => 'book',
			'tax_query' => $taxquery,
			'relation'  => 'AND',
			's'         => $text,
			'posts_per_page' => -1, //全件表示
		)
	);
	if ( $search_query->have_posts() ) :
		?>
	<ul>
		<?php
		while ( $search_query->have_posts() ) :
			$search_query->the_post();
			?>
			<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
		<?php endwhile; ?>
	</ul>
	<?php else : ?>
	<p>表示する本が見つかりませんでした。条件を変更して検索してください。</p>
	<?php endif; ?>
	<?php get_search_form(); ?>
<?php endif; ?>
<?php wp_reset_postdata(); ?>
<?php
get_footer();

検索フォームを表示する

検索フォームを設置したい場所に下記を記述してください。

<?php get_search_form(); ?>

---

オマケ：カテゴリー（カスタムタクソノミー）名をテキストフィールドでも検索可能にするには

WordPress のデフォルトではカテゴリーの文字列は検索対象になりません。ユーザーがテキストフィールドにカテゴリー名を入力した場合にヒットさせるには「WP Extended Search」プラグインをインストールすると手っ取り早いです。プラグイン無しと言っておきながらここだけ使っちゃいますが…