プラグインなしで投稿タイプ別に検索して結果表示ページも切り替える仕組みの作り方

今回はWordPressで複数の投稿タイプを管理するときに便利な機能を一つご紹介したいと思います。

投稿タイプを分けたとき、特定の投稿タイプだけ検索したい。

投稿タイプ毎に検索結果の表示方法やデザインも変えたい。

と思ったことはありませんか？

例えば、よくある質問（FAQ）だけを集めた投稿タイプと、最新情報だけを集めた投稿タイプなど管理上複数の投稿タイプを用意することはよくあることだと思います。

FAQだけ検索したいのに、最新情報まで検索結果に表示されてしまうのは避けたいですし、FAQの検索結果には本文の抜粋も表示しながら、情報量多めでもコンパクトに表示したいので、リストタイプの検索結果にして、最新情報の検索結果では写真も使ったおしゃれなカードタイプで表示させたいなど。

検索の目的に合わせてユーザーに使いやすいデザインを実現したいですよね。

ここではその両方を一度に解決する方法を紹介します。

今は１つしか投稿タイプがないという方でも、将来のために仕組みだけ作っておく場合にも使えますので、ぜひ見ていってください。

検索フォーム、function.php、検索結果表示ページに簡単なコードを埋め込んで行くことで簡単に制御出来るようになりますので、早速紹介していきたいと思います。

準備するもの
検索フォームの作り方
function.phpの書き方
検索結果を表示しよう
検索結果を読み込もう
結果が切り替わらない時

準備するもの

FAQページを作ってそのページに最初の検索フォームがあり、検索をすると検索結果に飛び、検索フォームと検索結果が表示されるという流れを作っていきます。

そして、読み進めて行く前に以下のことに注意してください。

FAQの投稿タイプの名前は「faq」として、コード内やファイル名に出てくる「faq」という文字列はすべて、この投稿タイプの名前に紐付いているので違う文字列にしてしまうとうまく動かない事があります。

そして、用意するファイルはこんな感じ。

投稿タイプの名前は「faq」とする場合
１．「function.php」・・・WordPressで共通の物（すでに用意されているはず）
２．「faq.php」・・・固定ページのテンプレート（フォームだけの最初のページ）
３．「search-faq.php」・・・FAQ用の検索結果ページ（FAQ用のデザインを作る部分です）
４．「faq_searchform.php」・・・検索フォームの部品（固定ページと検索結果のページで使い回します）
５．「faq_list.php」・・・検索結果表示部分の部品（これはお好みで、コードを見やすくするために分けました）

階層が深くなるのが気になる方は、ファイルを分けなくても大丈夫ですが、運用後のメンテナンスや使い回しに便利になるので、ひとつのファイルにまとめてしまうことはあまりおすすめしません。

流れとしては検索フォームから識別用のコードを飛ばして、「function.php」でそれを受け取って、どの投稿タイプから検索し、どの検索結果ページで表示するかを処理するようなものになっている。

検索フォームの作り方

投稿タイプ毎で検索をかけたり、検索結果の表示ページを分けるには、どの投稿タイプを検索したいかをWordPress側に伝えてあげる必要がある。

その識別用のコードをこの検索フォームから飛ばすようにコードを書いて行きます。

識別コードは「input」タグの「value」に入れて、「type=”hidden”」で「function.php」に送る。

コードは「search_form.php」に書いていく。

//search_form.phpの中身
<form method="get" action="https://sennext.com/searchqa">
  <input type="text" placeholder="検索キーワード" name="s" value="<?php the_search_query(); ?>" >
  <input type="hidden" name="post_type" value="faq">
  <button type="submit">検　索</button>
</form>

<input type=”hidden” name=”post_type” value=”faq”>この記述で「post_type」に「faq」という文字列を入れて、識別コードとして使う用に送っている。

function.phpの書き方

検索フォームから送られてきた、識別コードを処理するためのコードを「function.php」に書いていく。

ここでつまづくポイントとしては、固定ページを検索対象から外す記述や、検索対象に投稿タイプも含めるようなコードがすでに「function.php」に記述されているとうまく機能しないことがある。

私もこの両方が記述してあったため、今回の仕組みがうまく機能しなかったので、もしうまく行かないときは「function.php」をさかのぼって、検索機能に関する記述がすでにされていないかチェックしてみてほしい。

//function.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";
      // var_dump($templates);
      $templates[] = 'search.php';
      $template = get_query_template('search',$templates);
     }
  return $template;
}

この中身は特に書き換える部分はなく、共通で使える部品になっている。

「search-{$post_type}.php」の「$post_type」の中に先ほど検索フォームから送った「faq」が代入される。

すると、この後書いていく「search-faq.php」というファイル名が生成され、検索結果ページとして読み出されるという仕組みが完成する。

検索結果を表示しよう

ここでは一気に「search-faq.php」と「faq_list.php」を一気に書いていきましょう。

「search-faq.php」は「faq_list.php」ファイルを読み込んで表示するだけなので、好きなデザインを用意して、検索結果を表示させたい部分に「<?php get_template_part(‘faq_list’); ?>」と記述してもらえばOKです。

また、検索結果ページにも検索フォームを設置したければ、フォームを設置したい部分に「<?php get_template_part(‘faq_searchform’); ?>」しておきましょう。

//search-faq.phpの中身
<?php get_header(); ?>
    <!-- 検索フォーム -->
    <?php get_template_part('faq_searchform'); ?>
    <!-- 検索結果 -->
    <?php get_template_part('faq_list'); ?>
<?php get_footer(); ?>

検索結果を読み込もう

最後に読み出し用のコードを「faq_list.php」に書いていこう。

書き換える部分は「’post_type’ => ‘faq’, //カスタム投稿slag」の「faq」の部分を投稿タイプ名と同じ文字列にして、あとはお好みで表示数などの調整と表示結果のデザインを「//記事があった時」の部分に記述してもらえば完成だ。

あと「<?php the_excerpt(); ?>」は記事の抜粋を表示するコードなので、本文すべてを表示したい場合はこの部分を「<?php the_content(); ?>」に変えればOKです。

//faq_list.phpの中身
<section>
    <div class="wrap">
        <h3><span><?php the_search_query(); ?></span>で検索された結果</h3>
        <ul>
            <?php
            $search_query = get_search_query(); //検索ワードを取得
            global $post;
            $paged = get_query_var('paged') ?: 1; //ページネーションを使いたいなら指定
            $args = array(
                'paged' => $paged, //ページネーションを使いたいなら指定
                'posts_per_page' => 10, //10記事のみ出力
                'post_status' => 'publish', //公開の記事だけ
                'post_type' => 'faq', //カスタム投稿slag
                'orderby' => 'date', //日付を出力する基準
                'order' => 'DESC', //表示する順番（逆はASC）
                's' => get_search_query() //name="s"

            );
            $testPosts = get_posts( $args );
                if($testPosts) : foreach( $testPosts as $post ) :
            setup_postdata($post);
            ?>

            //記事がある場合に表示したい内容を記述
            <li>
                <a href="<?php the_permalink(); ?>">
                    <h4><?php the_title(); ?></h4>
                    <p>最終更新日：<time><?php the_time('Y年m月d日'); ?></time></p>
                    <p><?php the_excerpt(); ?></p>
                </a>
            </li>
                
            <?php endforeach; ?>
                <?php else : //記事が無い場合 ?>
                <div class="test-noresult">
                <p style="text-align: center;">一致する情報は見つかりませんでした。</p>
                </div>
            <?php endif;
            wp_reset_postdata(); ?>
        </ul>
    </div>
</section>

結果が切り替わらない時

少し繰り返しになりますが、私もつまづいたところなのでもう一度お伝えしておくと、「functions.php」に検索結果を制御する様なコードを記述している場合、検索結果ページが切り替わらないことがあります。

例えば「検索結果には固定ページを除く」ためのコードがあると、うまく切り替わりません。

もし、検索結果を制御するコードがあったら、１度コメントアウトなどしておいて、切り替わるかもう一度試してみてください。