Wordpressのデフォルトではキーワード検索しかできないため、カテゴリやカスタムフィールドなどで絞り込むことができない。
複合検索(絞り込み検索)を実装するには独自にフォームを作ってクエリを実行する。
複合検索のためのフォームを実装する
検索フォームはHTMLで自由に作れるので、検索したい項目を作成すればOK。
ここでは、検索キーワード、カテゴリ、カラーというカスタムフィールドを検索する。
name
に入れる文字はクエリの作成で使うのでわかりやすい文字を入れておく。
フォームは、search-form.php
のようなテンプレートとして作って、サイドバーなど好きなところから呼び出す。
// search-form.php
<form method="get" id="searchform" action="<?php echo esc_url( home_url( '/' ) ); ?>">
<label for="s">キーワード</label>
<input type="text" class="field" name="s" id="s" placeholder="検索キーワード" />
<label for="category">カテゴリ</label>
<select name="category" id="category">
<?php
$cateogry_list = get_terms( array(
'taxonomy' => 'category',
) );
foreach( $cateogry_list as $category ) {
if( $category->parent == 0 ) {
echo '<option value="'. esc_attr( $category->term_id ) .'">
'. esc_html( $category->name ) .'</option>';
}
}
?>
</select>
<label for="s">カラー</label>
<select name="color" id="color">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<input type="submit" class="submit" value="検索" />
</form>
複合検索の表示方法
検索結果を表示するには、WP_Query
にクエリを渡すだけ。
クエリを作るために必要な検索キーワードや選択項目を取得するには$_GET['name']
を使う。
name
の部分にはフォームのname属性に入れた文字を入れる。name
がs
なら$_GET['s']
となる。
// search.php
<?php
$args = array(
's' => $_GET['s'], // 検索ワード
'cat' => $_GET['category'], // カテゴリID
'meta_query' => array(
array(
'key' => 'color', // メタキー
'value' => $_GET['color'], // 値
),
)
);
$wp_query = new WP_Query( $args ); ?>
<?php
if ( $wp_query->have_posts() ) :
/* Start the Loop */
while ( $wp_query->have_posts() ) :
$wp_query->the_post();
// 投稿内容を表示
endwhile;
// ループ終了後の処理、ページネーション表示など
the_posts_navigation();
else :
// 投稿がない場合の表示
endif;
?>
検索結果の表示はpre_get_posts
を使う方法もあるのでどちらか好きな方で実装する。