WordPressのカスタムタクソノミーで記事の絞り込み検索をする方法

WordPressのカスタムタクソノミーで記事の絞り込み検索をする方法WordPress

今回はWordPressのカスタムタクソノミーで記事の絞り込み検索をする方法を紹介します。

チェックボックスにして複数の条件で絞り込み可能にします。

 

編集するファイルは以下の2つです。

  • searchform.php:カスタムタクソノミーのターム一覧を表示し、データをsearch.phpに送る
  • search.php:絞り込み条件を満たす記事一覧を表示する

 

チェックが入ったタームのデータは$_GET[]を使ってパラメーターとしてsearch.php送る→search.phpでは送られてきたパラメーターに適合する記事のみが表示される、という流れです。

 

スポンサーリンク

検索フォームを作る(searchform.php)

searachform.phpでやることは以下の通り。

  • カスタムタクソノミーのタームを一覧表示する
  • チェックが入ったタームをパラメーターで送信する

送ったパラメーターはsearch.php$_GET[]で取得します。

 

検索フォームのコードはこんな感じです。

<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">
  <ul>
    <?php
      $terms = get_terms('カスタムタクソノミー名');
      foreach ( $terms as $term ) :
    ?>
    <li>
      <label>
      	<input type="checkbox" name="任意[]" value="<?php echo $term->slug; ?>"><?php echo $term->name; ?>
      </label>
    </li>
    <?php endforeach; ?>     
  </ul>
  <input type="hidden" name="s" value="<?php the_search_query(); ?>">        
  <input type="submit" value="検索する">
</form>

 

基本はWordPressのフォームですが、重要な点がいくつかあります。

  • <form>タグのmethod属性はgetであること
  • <form>タグのaction属性は<?php echo esc_url(home_url('/')); ?>と書くこと(検索フォームをトップページに置かない場合もです)
  • <input>name属性の末尾に[]をつけること([]をつけることで複数の値を渡せるようにします)
  • <input>value属性の値は各々のタームのスラッグにすること
  • テキストによる検索を行わない場合でも<input type="hidden" name="s" value="<?php the_search_query(); ?>">を隠しフィールドとして記述すること(これがないとフォームがうまく動作しません)

 

また、

<?php
  $terms = get_terms('カスタムタクソノミー名');
  foreach ( $terms as $term ) :
?>

この部分はカスタムタクソノミーのタームを一覧表示する処理です。

詳しい解説は以下にまとめたのでどうぞ。

>>【WordPress】カスタムタクソノミーのタームを一覧表示する方法

 

実際にパラメーターが渡される際は<input>タグにあるnamevalueが使用され、「https://hogehoge.com/?name=value」という形になります(valueにはタームのスラッグが入ります)

複数のパラメーターを渡した際は「https://hogehoge.com/?name=value&name=value&…」となります。

name属性はの値は好きに指定できるので、わかりやすい名前にしておきましょう。

 

検索結果ページ(search.php)を作る

searchform.phpで送られてきた条件をサブループに組み込み、表示する記事を絞り込みます。

ループ処理以外のコードはindex.phparchive.phpなど、記事一覧を表示するページと同じで構いません。

 

サブループで表示する記事の条件にsearchform.phpから送られてきたパラメーターを追加します。

<?php
// searchform.phpから送られてきたパラメーターを取得
$selected_terms = $_GET['name(任意)']; //searchform.phpの<input>のname属性の値と合わせる

// searchform.phpで絞り込み条件がある場合
if($selected_terms) {
  // 絞り込み条件を追加
  $taxquery_taxonomy = array(
    'taxonomy' => 'カスタムタクソノミー名',
    'terms' => $selected_terms, //取得したパラメーター(=各タームのスラッグ)が入る
    'field' => 'slug',
    'operator' => 'AND', //タームの条件を指定(AND/IN/NOT IN)
  );
}

// サブループで表示する記事の条件を指定
$args = array(
  'post_type' => '投稿タイプ名',
  'posts_per_page' => 10,
  's' => get_search_query(), //これ必須!
  // searchform.phpで送られてきた条件を追加
  'tax_query' => array( 
    'relation' => 'AND',
    $taxquery_taxonomy,
  ),
);

// サブループ作成
$sub_query = new WP_Query( $args );
if ( $sub_query->have_posts() ) : 
  while ( $sub_query->have_posts() ) : 
  	$sub_query->the_post(); 
?>

<!-- ここにループ処理 -->

<?php 
  endwhile;
endif;
wp_reset_postdata();
?>

 

少しコードが長いですが、細かく分けて見ればやっていることは難しくありません。

手順としては、

  1. searchform.phpから送られてきたパラメーターを$_GET[]で取得(値はsearchform.php<input>name属性の値と同じにする)
  2. 絞り込み条件がある場合、その条件を追加(あとで'tax_query'に渡しやすいよう上のように書いておくといい)
  3. サブループの条件の中に2の絞り込み条件を追加
  4. サブループで処理

という感じです。

 

'tax_query'は表示する記事の条件を細かく指定できるキーです。

ここにsearchform.phpから送られてきた条件を追加し、サブループに追加することで記事の絞り込みができます。

特定のカスタムタクソノミー('taxonomy' => 'カスタムタクソノミー名')にある、特定のスラッグ('field' => 'slug')を持つターム('terms' => $selected_terms)を'operator' => 'IN'の条件で表示という感じです

$selected_termsには<input name="任意[]" value="<?php echo $term->slug; ?>">で取得したスラッグが入っています)

'operator'ではタームの表示条件を指定できます。指定できる値は以下の通りです。

  • 'AND''terms'の全てのタームを持つ記事のみ(全てに一致)
  • 'IN''terms'のいづれかのタームを持つ記事のみ(いづれかに一致)
  • 'NOT IN''terms'のどれも持たない記事のみ(いづれにも一致しない)

選択したタームを全て持っている記事のみなら'AND'、どれか1つでも持っている記事なら'IN'を指定すればokです。

 

'tax_query'は条件をいくつも配列で指定できるのでカスタムタクソノミーをまたいだ複雑な条件の指定も可能です。以下の記事が参考になりました。

>>WordPressの新機能 複数タクソノミークエリーまとめ

 

また、

// searchform.phpで送られてきた条件を追加
'tax_query' => array( 
  'relation' => 'AND',
  $taxquery_taxonomy,
),

ここの'relation'ですが、'tax_query'$taxquery_taxonomyのような配列を複数渡した時の条件を指定できます('tax_query'に配列を渡し、その中でさらに配列を渡します)。'AND''OR'で指定し、初期値は'AND'です。

まあここは複数のカスタムタクソノミーを渡した際に、その全てを含む記事のみか?どれかを含み記事のみか?みたいな話なので、今回の「特定のタームを持つ記事のみ表示」とは関係ない部分です。タームの条件は$taxquery_taxonomyの中の'operator'というキーで指定するので間違えないようにしましょう。

 

それと、

's' => get_search_query(), //これ必須!

ここの記述を忘れないように注意しましょう!(これがないと検索がうまく機能しません)

 

あとはサブループを作成し、記事を表示する部分のHTMLを書けばokです。

検索結果ページではフォームで指定した条件がパラメーターとしてURLに表示されているはずです。このパラメーターで表示する記事を絞り込んでいるわけです。

 

まとめ

カスタムタクソノミーのタームを使って絞り込み検索をしたい場合はよくあると思います。

他にもカテゴリーやタグなども合わせて記事の絞り込みもできると思います。

'tax_query'の使い方をマスターすればどんな条件でも記事の絞り込みができるようになるので使えるようにしておくと便利です!

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
WordPress
スポンサーリンク
でざなり