カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法

カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法

カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加

  • 広告主様募集中
    ワンコインで広告掲載してみませんか?
  • このエントリーをはてなブックマークに追加

カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法をご紹介いたします。

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">&#8216;
<?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." ";
}
}
?>
&#8217 の検索結果</div>
<?php
} else {
echo '<div class="refine-by">&#8216;'.$s.'&#8217; の検索結果</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);
?>

上述したように、絞り込み検索フォームと検索結果ページを作れば実装完了です。

あとがき

結構ややこしいですが、実際にやってみるとそこまで難しくはありません。投稿タイプ名やカスタムタクソノミー名などを変えれば、他はほとんどコピペで実装できちゃいますので、ぜひ参考にしていただければと思います。

なお、チェックボックスではなくセレクトボックスによる絞り込み検索を実装したい場合は、こちらの記事をご参照ください。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

2 thoughts on “カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法

  1. berghilo

    大変参考になりました。
    他の同一内容のサイトは古いせいか動かなかったので大変助かりました。

コメントを残す

メールアドレスが公開されることはありません。