カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法をご紹介いたします。
WordPressでの絞り込み検索といえば、有料プラグインの「FE Advanced Search」が有名です。FE Advanced Searchを導入すれば、簡単に絞り込み検索が実装できるかと思いますが、お値段59,800円とそこそこの費用がかかってしまうんですよね。
実際に自分で実装してみたところそこまで難しくはなかったので、有料プラグインを購入せずに絞り込み検索を実装したいという方向けに、カスタムタクソノミーのチェックボックスによる絞り込み検索の実装方法を解説したいと思います。
カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法
絞り込み検索フォーム
フォーム部分は、以下のように記述します。
<form method="get" id="search-form" action="<?php echo esc_url(home_url('/')); ?>">
<input type="hidden" name="post_type" value="投稿タイプ名">
<input type="hidden" class="field" name="s">
<?php
$taxonomy_name = 'カスタムタクソノミー名';
$args = array( 'orderby' => 'description', 'hide_empty' => false );
$taxonomys = get_terms($taxonomy_name,$args);
if(!is_wp_error($taxonomys) && count($taxonomys)):
foreach($taxonomys as $taxonomy):
$tax_posts = get_posts(array('post_type' => '投稿タイプ名', 'taxonomy' => $taxonomy_name, 'term' => $taxonomy->slug ) );
if($tax_posts):
?>
<label class="search-label-<?php echo $taxonomy->slug; ?>"><input type="checkbox" name="cat_area[]" value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></label>
<?php
endif;
endforeach;
endif;
?>
<input type="submit" value="検索">
</form>「<input type=”hidden” class=”field” name=”s”>」の部分は、「type=”hidden”」ではなく「type=”text”」でキーワード検索も同じフォーム内に設置する場合は不要です。今回は、タクソノミーのチェックボックスのみをフォームに設置することを前提としています。ですが、キーワード検索用のinput要素がないと、フォームが正常に機能しなかったため、非表示のinput要素を追加しています。
「投稿タイプ名」と「カスタムタクソノミー名」は、環境に合わせて変更してください。
上記の場合、「cat_area[]=タームのスラッグ」という形で、チェックしたタームの値が配列として渡されます。「cat_area」の部分を変えたい場合は、input要素のname属性を変更します。
投稿タイプが識別できるページ(投稿詳細ページやアーカイブページなど)では、「get_posts(array(‘post_type’ => ‘投稿タイプ名’」の部分は「get_posts(array(‘post_type’ => get_post_type()」にしても大丈夫です。
なお、タグで絞り込む場合は、カスタムタクソノミー名のところを「post_tag」に、「name=”cat_area[]”」の部分を「name=”post_tag[]”」に変更すればOKです。
絞り込み検索の結果ページ
検索が実行されると、search.phpが呼び出されます。検索結果ページ(search.php)側では、以下のように絞り込みの値を処理します。
<?php
//絞り込みの値を取得
$s = $_GET['s'];
$post_type = $_GET['post_type'];
$cat_area = $_GET['cat_area'];
$post_tag = $_GET['post_tag'];
//絞り込みの値をクエリ用に代入
if( !empty($cat_area) ) {
$cat_area_selected = array('taxonomy'=>'タクソノミー名','terms'=>$cat_area,'field'=>'slug','operator'=>'IN');
}
if( !empty($post_tag) ) { //タグの場合
$post_tag_selected = array('taxonomy'=>'post_tag','terms'=>$post_tag,'field'=>'slug','operator'=>'IN');
}
//タクソノミー絞り込みの場合はクエリを指定
if( !empty($cat_area) || !empty($post_tag) ) {
query_posts( array(
'paged' => $paged,
'post_type' => $post_type,
's' => $s,
'tax_query' => array(
'relation' => 'AND',
$cat_area_selected,
$post_tag_selected
)
)
);
}
?>上記のように記述すると、$cat_areaと$post_tagに絞り込みの値を代入して、値が入っている場合はループのクエリを指定します。
検索条件を結果ページに表示するには、以下のように記述します。
<?php if( !empty($cat_area) || !empty($post_tag) ) { ?>
<div class="refine-by">‘
<?php
if(is_array($cat_area)) {
foreach($cat_area as $val){
echo get_term_by('slug',$val,"タクソノミー名")->name." ";
}
}
if(is_array($post_tag)) { //タグの場合
foreach($post_tag as $val){
echo get_term_by('slug',$val,"post_tag")->name." ";
}
}
?>
’ の検索結果</div>
<?php
} else {
echo '<div class="refine-by">‘'.$s.'’ の検索結果</div>';
}
?>「’福岡 大阪’ の検索結果」のように、絞り込みで指定したターム名が表示されます。絞り込み検索以外の場合は、検索キーワードを表示しています。
あとは通常通りのループを回して、一覧を表示すれば完成です。
<ul>
<?php if( have_posts() ): while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else: endif; ?>
</ul>絞り込み検索時とそれ以外で出力する内容も変更したい場合は、以下のように条件分岐させて処理を記述します。
<?php if( !empty($cat_area) || !empty($post_tag) ) { ?>
<h2>絞り込み検索結果</h2>
<ul>
<?php if( have_posts() ): while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else: endif; ?>
</ul>
<?php } else{ ?>
<h2>キーワード検索結果</h2>
<ul>
<?php if( have_posts() ): while ( have_posts() ) : the_post(); ?>
<li><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></li>
<?php endwhile; else: endif; ?>
</ul>
<?php } ?>検索結果ページに、ページ送りを実装したい場合は、以下のようなコードを追加します。WP-PageNavi等のプラグインを使ってもOKです。
<?php
$big = 9999999999;
$arg = array(
'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),
'current' => max( 1, get_query_var('paged') ),
'total' => $wp_query->max_num_pages,
'mid_size' => 5,
'prev_text' => '≪',
'next_text' => '≫'
);
echo paginate_links($arg);
?>上述したように、絞り込み検索フォームと検索結果ページを作れば実装完了です。
あとがき
結構ややこしいですが、実際にやってみるとそこまで難しくはありません。投稿タイプ名やカスタムタクソノミー名などを変えれば、他はほとんどコピペで実装できちゃいますので、ぜひ参考にしていただければと思います。
なお、チェックボックスではなくセレクトボックスによる絞り込み検索を実装したい場合は、こちらの記事をご参照ください。
大変参考になりました。
他の同一内容のサイトは古いせいか動かなかったので大変助かりました。
コメントありがとうございます。お役に立てたみたいで光栄です。
はじめまして、thoと申します。
こちらの記事大変参考になりました、ありがとうございます！
一つ質問なのですが、
こちらの記事に近い方法で、複数のタクソノミーからクロス検索することも可能でしょうか？
お忙しい中恐れ入りますが、おわかりになればご教示いただければと思います。
どうぞよろしくお願いいたします。
thoさん、コメントありがとうございます。複数のタクソノミーを使った検索も可能ですよ^^ 同じフォームの中で複数のタクソノミーが選択できるようにして、検索結果で”値の取得”と”クエリの指定”を追加してあげるだけです。
ご教示ありがとうございます！
出来ました。
もう一点、すみません。
検索結果で並び替えをすることも可能でしょうか？
検索結果につくパラメータである、
&cat_area%5B%5D=〇〇
が入っていると、
order=DESC
などが効かないようでどうしたらよいものかと思いまして、ご相談させていただきました。
何度も申し訳ございません！
お忙しい中恐れ入りますが、どうぞよろしくお願いいたします。
検索結果の並び替えは、query_postsの条件指定で可能かと思います。
query_posts( array('paged' => $paged,
'post_type' => $post_type,
's' => $s,
'tax_query' => array(
'relation' => 'AND',
'order' => 'DESC',
$cat_area_selected,
$post_tag_selected
)
)
こんな感じで効かないでしょうか？
お返事ありがとうございます！
説明が足らず申し訳ございません！
ご説明いただいた方法での並び替えは可能でした。
今回実現したいことといたしまして、
検索結果のページに「新着順 | 安い順 | 高い順」などのボタンを付けて、検索結果の並び替えをしいと思っておりまして、
以下のコードで試したのですが、うまく動作しませんでした。
<a href=" ”, ‘orderby’ => ‘date’, ‘order’ => ‘DESC’) ); ?>”>新着順 |
<a href=" ‘（カスタムフィールド名）’, ‘orderby’ => ‘meta_value_num’, ‘order’ => ‘ASC’) ); ?>”>安い順 |
<a href=" ‘（カスタムフィールド名）’, ‘orderby’ => ‘meta_value_num’, ‘order’ => ‘DESC’) ); ?>”>高い順
なので、検索結果のURLに直接&order=DESCや&order=ASCといったパラメータを付けて試してみたところ、こちらがそもそも動かなかったので、検索結果をさらにいろいろな方法で並び替えるということは可能なのでしょうか？
何度も本当に申し訳ございません！
お忙しい中恐れ入りますが、どうぞよろしくお願いいたします。
パラメータを使って並べ替える場合、当記事の例でいうと$cat_areaや$post_tagのようにGET変数の値を受け取って、query_postsに条件指定すればいけそうな気がします。ただ、申し訳ないですが検証していないので何とも言えません。
並び替えボタンの実装については、下記の記事が参考になるかと思います。
こんにちは！
参考になる記事ありがとうございます。
質問なのですが、複数のタクソノミーからクロス検索に関して、
「同じフォームの中で複数のタクソノミーが選択できるようにして、検索結果で”値の取得”と”クエリの指定”を追加してあげる」
とのことですが、具体的にどうやればいいのでしょうか？
参考にさせていただき実装させていただきました。
ありがとうございます！！
一点、チェックボックを複数で絞り込みをしたときに全ての内容が取り出されてしまうのですが、チェックしたものでどんどん絞り込んでいくにはこの方法じゃできないのでしょうか？？
コメントありがとうございます。
紹介している方法はAND検索で絞り込む方法なので、絞り込みがうまくいかないということでしたら、どこか実装方法が間違っていると思いますよ。