最終更新日：2023.05.23

【WordPress】複数の検索フォームと検索結果ページを作る方法

今回はWordPressで複数の検索フォームと検索結果ページを作成する方法を紹介します。

前提条件は以下です。

通常の投稿ページ用とカスタム投稿名「テスト」用の２種類の検索フォーム
２つの検索フォームは同じページに設置しない
通常の投稿ページ用は、検索結果に固定ページやカスタム投稿は含めない
カスタム投稿名「テスト」用は、検索結果にカスタム投稿名「テスト」のみ表示させる
検索結果ページは２つとも別のデザインにする

この記事の目次

複数の検索フォームと検索結果ページを作る手順

まずは通常の投稿用検索フォームを作成します。

通常の投稿用検索フォームを作る

searchform.phpを作成して以下のコードをコピペします。class名はご自身のサイトに合わせて変更してください。

<form method="get" class="search" action="<?php echo esc_url( home_url( '/' ) ); ?>" >
       <input type="hidden" name="post_type" value="post">
	<input type="text" placeholder="情報を探す" class="searchbody" name="s">
	<button type="submit" class="searchbutton"></button>
</form>

２行目の部分で通常の投稿のみを検索結果に反映させています。３行目にあるname="s"は必ず必要になるので消さないようにしましょう。

この検索フォームを出力させたいページに以下のように書きます。今回はhome.phpに設置しました。

<div class="search-box">
    <?php get_search_form(); ?> <!-- 検索窓の表示 -->
</div>

通常の投稿用の検索結果ページを作る

検索フォームから検索されたものはsearch.phpに出力されます。投稿記事一覧ページに書いてあるコードをそのままsearch.phpにコピペすれば同じデザインで表示されます。

カスタム投稿用の検索フォームを作る

今回はカスタム投稿名が「テスト」なので、スラッグは「test」にします。
searchform-test.phpを作成して、以下のコードをコピペします。

<form method="get" class="test-search" action="<?php echo esc_url( home_url( '/' ) ); ?>" >
        <input type="hidden" name="post_type" value="test">
	<input type="text" placeholder="<?php if(!is_search()){ echo 'テストから探す';} ?>" value="<?php if(is_search()){ echo get_search_query();} ?>" class="test-searchbody" name="s">
	<button type="submit" class="test-searchbutton"></button>
</form>

２行目のvalueでカスタム投稿スラッグ（test）を指定しています。このスラッグはphpで出力させず、直接書きましょう。phpを使うと検索結果がない状態でそのまま検索フォームで検索を続けると投稿用の検索結果ページに飛んでしまいます。

３行目のplaceholderは通常は「テストから探す」にしておいて、検索ワードを打って検索結果ページに飛んだあとも検索ワードが残る設定にしています。

この検索フォームを出力させたいページに以下のように書きます。今回はarchive-test.phpに設置しました。

<div class="test-search-box">
    <?php get_template_part('searchform-test'); ?>
</div>

カスタム投稿用の検索結果ページを作る

まずはfunctions.phpに以下をコピペしましょう。カスタム投稿スラッグに合わせて読み込むsearch.phpを切り替える設定です。

add_filter('template_include','custom_search_template');
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;
}

次にカスタム投稿「テスト」の検索結果ページ用にsearch-test.phpを作成します。ファイル名に「test」とカスタム投稿スラッグを指定することでこのファイルを優先して読み込んでくれます。これで通常の投稿用の検索結果ページと、カスタム投稿用の検索結果ページを分けることができます。

search-test.phpに書くコードの重要な部分は以下。

<div class="test-main">
        <?php
           $search_query = get_search_query(); //検索ワードを取得
           paged = get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1; //ページネーションを使いたいなら指定
           $args = array(
               'paged' => $paged, //ページネーションを使いたいなら指定
               'posts_per_page' => 15, //15記事のみ出力
               'post_status' => 'publish', //公開の記事だけ
               'post_type' => 'test', //カスタム投稿slag
               'orderby' => 'date', //日付を出力する基準
               'order' => 'DESC', //表示する順番（逆はASC）
               's' => $search_query, //name="s"

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

               /* --ここに繰り返しの内容を書く-- */

             <?php
              endwhile;
             ?>
        <?php else : ?>
          <div class="test-noresult">
            <p>「<?php echo $search_query; ?> 」に一致する情報は見つかりませんでした。</p>
         </div>
        <?php
          wp_reset_postdata();
         endif;
        ?>
</div>

固定ページにカスタム投稿一覧を出力コードとほとんど一緒ですが、get_search_queryがあるところが違う点です。ページネーションの実装方法については以下の記事で説明しているので、参考にしてみてください。