本記事ではカスタム投稿タイプにおいて、カスタムフィールド値で絞り込み検索を行う場合の土台を作っていきたいと思います。

一番最後に、絞り込み検索実装の記事へのリンクがありますので、まずは土台を作ってからそちらを見ていただければと思います。

テンプレート等の準備

絞り込み検索を実装する前に、検索の流れや必要なテンプレートについてざっくりと説明しておきます。

カスタム投稿タイプを作成していない場合は先にこちらの記事からどうぞ。

Custom Post Type UIでカスタム投稿タイプを作成する方法

用意するテンプレート

WordPressでは検索フォームが用意されており、設置したい場所に <?php get_search_form(); ?>と記載するだけで検索窓が出力され、その検索結果はsearch.php（なければindex.php）で表示されるようになっています。

ですがデフォルトの検索フォームはシンプル過ぎるので、自分で検索フォームsearchform.phpを用意します。

検索フォームsearchform.phpを用意していれば、デフォルトのフォームより先に呼び出してくれます。

また、検索結果についてはsearch.phpを利用してもいいのですが、通常の投稿記事における検索で使用することを考え、カスタム投稿検索の結果表示用にsearch-products.phpを作成します。

※search-products.phpで表示させるためにはfunctions.phpで設定する必要があります（後述）。

また、今回は例として、カスタム投稿タイプ「商品（スラッグはproducts）」を作成し、その商品一覧ページにて商品の絞り込み検索をしていくことにします。

というわけで、テンプレート3つ用意しておきます。

• 検索フォーム用：searchform.php
• 検索結果ページ用：search-products.php
• 商品一覧ページ用：archive-products.php

既にsearchform.phpファイルを使っていて、新しく検索フォームを作りたい場合は、「任意の名前.php」でフォームを作成し、<?php get_template_part( '任意の名前' ) ?>で読み込みましょう。

検索の流れ

検索フォームは、商品一覧ページ（archive-products.php）と検索結果ページ（search-products.php）の両方に読み込み、続けて検索ができるようにします。

流れは以下のような感じなります。

1、商品一覧ページ（archive-products.php）内の検索フォーム（searchform.php）から検索。

2、検索結果ページ（search-products.php）に結果が表示される。

3、検索結果ページ（search-products.php）内の検索フォーム（searchform.php）から検索。

4、検索結果ページ（search-products.php）に結果が表示される。

5、検索結果ページ（search-products.php）内の検索フォーム（searchform.php）から検索。

・・・

archive-products.php

商品一覧ページarchive-products.php内で、検索フォームを設置したい位置に以下の1行を記述します。

<?php get_search_form(); ?>

functions.php

検索結果を表示する時に、search.phpよりも先にsearch-products.phpを読み込むように設定します。

// 検索結果ページの、テンプレートの順番を指定
function custom_search_template($template){
  if ( is_search() ){
    $post_types = get_query_var('post_type');
    foreach ( (array) $post_types as $post_type )
    $templates[] = "search-{$post_type}.php";
    $templates[] = 'search.php';
    $template = get_query_template('search',$templates);
  }
  return $template;
}
add_filter('template_include','custom_search_template');

searchform.php

このファイルにはヘッダーやフッターは入れず、フォーム部分だけを記述します。

ちなみにデフォルトのフォームは以下のように出力されます。

<form role="search" method="get" class="search-form" action="トップページのURL">
  <label>
    <span class="screen-reader-text">検索:</span>
    <input type="search" class="search-field" placeholder="検索…" value="" name="s">
  </label>
  <input type="submit" class="search-submit" value="検索">
</form>

上のフォームを参考に、ちょこっと変えます。（クラス名一部消しました）

<form role="search" method="get" action="<?php echo esc_url(home_url('/')); ?>">

  <!-- テキスト検索 -->
  <label>
    <span class="screen-reader-text">検索:</span>
    <input type="search" placeholder="検索…" value="<?php the_search_query(); ?>" name="s">
  </label>
  
  <!-- ここに追加の検索項目を書く -->

  <!-- 投稿タイプを指定 -->
  <input type="hidden" name="post_type" value="products">

  <!-- 送信ボタン -->
  <button type="submit">検索</button>

</form>

検索窓inputのvalue値には、<?php the_search_query(); ?>で検索文字列を出力するようにしました。

このvalue値を空欄にすると、検索結果が表示されたときに入力文字が消えてどんな文字列で検索したかがわからなくなります。

また、input type="hidden"は、ブラウザには表示されませんが投稿タイプのデータを送信しています。

テキスト検索が不要な場合は、「テキスト検索」とコメントを書いた部分を消しても大丈夫ですが、代わりに非表示データとして<input type="hidden" name="s">を入れておきます。

このname="s"がないと検索がうまく動きません。

絞り込み検索をするには、ここに検索項目を追加していくことになります。

追加の検索項目についてまで解説するとすごく長くなるので、別記事で解説しています。

記事へのリンクは最後に載せていますので、一旦このまま読み進めていただければと思います。

search-products.php

検索結果を表示するページを作成します。

検索結果の出力

取得する情報を指定して絞り込み、出力させます。

「ここに検索結果を出力」とコメントしている部分についてはarchive-products.phpを元に作るなどしてください。

<?php
// 取得する情報を指定
$args = array(
  'post_type' => 'products', // 投稿タイプ
  'posts_per_page' => 10, // 表示件数
  'paged' => get_query_var( 'paged', 1), // ページ送り
  's' => get_search_query(), // 検索キーワード
  'order' => 'DESC', // 投稿の並び
  'orderby' => 'date', // 並べる基準

  // 検索項目を増やした場合は、ここに追加の条件を書く
  
);

$wp_query = new WP_Query($args);
if ( $wp_query->have_posts()):
while ( $wp_query->have_posts()): $wp_query->the_post();
?>

<!-- ここに検索結果を出力 -->

<?php endwhile; ?>
<?php else: ?>
  <p>該当する商品は見つかりませんでした。</p>
<?php endif; ?>
<?php wp_reset_postdata(); ?>

表示件数posts_per_pageは、1ページに表示する記事数を指定します。

「-1」にすると全件表示となります。

この時、WordPress管理メニュー[設定]→[表示設定]の[1ページに表示する最大投稿数]を下回らないように気を付けてください。

また、検索結果ページでページネーションを使っている場合はpagedの指定が必要です。

出力記事の並びを指定したい場合は、orderbyで基準（タイトルtitle/ 日付date/ ランダムrandなど）を指定し、orderで並び（昇順ASC/ 降順DESC）を指定します。

デフォルトでorderbyはdateに、orderはDESCに設定されているので、そのままで良ければ記載する必要はありません。

検索フォームの設置

検索後、続けて検索できるようにフォームを設置します。

設置したい位置に、以下の1行を記述します。

<?php get_search_form(); ?>

まとめ

以上で、カスタム投稿における絞り込み検索の基礎ができあがりです。

追加の検索項目は別記事で解説していますので合わせてどうぞ。

最後までご覧いただきありがとうございました。