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

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

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

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

以前、「カスタムタクソノミーのチェックボックスによる絞り込み検索を実装する方法」という記事を書きましたが、そのセレクトボックス版です。チェックボックスによる絞り込み検索よりもセレクトボックスによる絞り込み検索の方が、多少ですがシンプルです。

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

絞り込み検索フォーム

絞り込み検索のフォームは、以下のように記述します。

<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">
  <select name="term_select">
    <?php
      $taxonomy_name = 'タクソノミー名';
      $taxonomys = get_terms($taxonomy_name);
      if(!is_wp_error($taxonomys) && count($taxonomys)):
      foreach($taxonomys as $taxonomy):
        $tax_posts = get_posts(array('post_type' => get_post_type(), 'taxonomy' => $taxonomy_name, 'term' => $taxonomy->slug ) );
      if($tax_posts):
    ?>
      <option value="<?php echo $taxonomy->slug; ?>"><?php echo $taxonomy->name; ?></option>
    <?php
      endif;
      endforeach;
      endif;
    ?>
  </select>
  <input type="submit" value="検索">
</form>

「<input type=”hidden” class=”field” name=”s”>」の部分は、「type=”hidden”」ではなく「type=”text”」にしてキーワード検索も同じフォーム内に設置することもできます。キーワード検索を入れない場合は、<input type=”hidden” class=”field” name=”s”>を記述しておきます。

環境に合わせて、投稿タイプ名とタクソノミー名を変更してください。「<select name=”term_select”>」のnameも任意の値に変更しましょう。

投稿タイプが識別できないページ(トップページや固定ページ等)では、「get_posts(array(‘post_type’ => get_post_type()」の部分を「get_posts(array(‘post_type’ => ‘投稿タイプ名’」に変更します。

なお、タグで絞り込みたい場合は、タクソノミー名のところを「post_tag」に変更すればOKです。

絞り込み検索の結果ページ

検索が実行されると、search.phpが呼び出されます。検索結果ページ(search.php)側では、以下のように絞り込みの値を処理します。

<?php
//絞り込みの値を取得
$s = $_GET['s'];
$post_type = $_GET['post_type'];
$term_select = $_GET['term_select'];
$post_tag = $_GET['post_tag'];
 
//絞り込みの値をクエリ用に代入
if( !empty($term_select) ) {
  $term_selected = array('taxonomy'=>'タクソノミー名','terms'=>$term_select,'field'=>'slug','operator'=>'IN');
}
 
if( !empty($post_tag) ) { //タグの場合
  $post_tag_selected = array('taxonomy'=>'post_tag','terms'=>$post_tag,'field'=>'slug','operator'=>'IN');
}
 
//タクソノミー絞り込みの場合はクエリを指定
if( !empty($term_select) || !empty($post_tag) ) {
  query_posts( array(
    'paged' => $paged,
    'post_type' => $post_type,
    's' => $s,
    'tax_query' => array(
      'relation' => 'AND',
      $term_selected,
      $post_tag_selected
    )
  )
  );
}
?>

上記のように記述すると、$term_selectと$post_tagに絞り込みの値を代入して、値が入っている場合はループのクエリを指定します。

検索条件を結果ページに表示するには、以下のように記述します。

<?php if( !empty($term_select) || !empty($post_tag) ) { ?>
  <div><strong>"
    <?php
      echo get_term_by('slug',$term_select,"タクソノミー名")->name." ";
      echo get_term_by('slug',$post_tag,"post_tag")->name;
    ?>
  "</strong> の検索結果</div>
<?php } else { ?>
  <div><strong>"<?php the_search_query(); ?>"</strong>の検索結果</div>
<?php } ?>

「”ターム名” の検索結果」のように、絞り込みで指定したターム名が表示されます。絞り込み検索以外の場合は、検索キーワードを表示しています。

あとは通常通りのループを回して、記事の一覧を出力すれば完成です。

<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>

検索結果ページに、ページ送りを実装したい場合は、以下のようなコードを追加します。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. shizumaru(水野)

    こんにちは、素晴らしくわかりやすいタクソノミー XセレクトBOXの記事を読ませていただきありがとうございます。WP歴5年ですが今だにPHPが今いち理解できていないフリーデザイナです。
    今回の記事をもとに早速実装させていただいたのですが、なぜかセレクトボックスの中身が表示されないのですが、もしよろしかったら何かお心当たりがありましたら教えていただけませんでしょうか?設置場所はTOPページの最下段、ご忠告があったとおり、get_posts(array(‘post_type’ => ’投稿タイプ名’ にしてあり,タクソノミー 6個のうち3個を使って絞り込む想定です。
    おやすみの所恐縮ですが、もしよろしければよろしくお願いいたします。

    (以下はXサーバの当該サイトですが、当面は以前プログラマさんに作っていただいたプログラムの一部をコピーして当て込み、なんとかプルダウンメニューを表示させています)

    1. himecas Post author

      コメントありがとうございます!
      セレクトボックスの中のoptionが何も表示されないということでしたら、カスタムタクソノミー名が間違えているのかもしれません。スペルミスなどないか、今一度確認してみた方が良いかもです。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です