カスタム投稿の検索フォームとページネイション付きの検索結果を作るスニペット

2021年11月12日 3分

カスタム投稿を使うことで、コンテンツの作成・管理が簡単になります。

そんなカスタム投稿ですが、通常の投稿や固定ページとは異なるので検索フォームと検索結果を分けようと思うと、ちょっと一手間必要です。

この記事は、そんなカスタム投稿用の検索フォームと検索結果を作るスニペットの内容です。

かかかず

私的に使う頻度が多いので、改めて備忘録的な記事です。

ご覧頂き、実装する機会があればコピペして使ってください。

注意点とプラグイン
- 注意点
- プラグインのWP-PageNaviを使ってページネイション
検索フォームと検索結果を作る手順と方法

注意点とプラグイン

実装の前に、注意点と使用するプラグインについて解説します。

注意点

基本は、コピペで実装できますが functions.php をいじります。

functions.phpは色々なことができるファイルですが、いじるのをミスってしまうと、WordPress全体が真っ白のエラーになってしまうこともあるので、注意が必要です。

バックアップをとってからやりましょう。

functions.phpをいじる場合、ftpで必ずバックアップを取ってから行い、テーマ本体ではなく子テーマの方に関数をコピペするようにしましょう。

プラグインのWP-PageNaviを使ってページネイション

ページネイションの実装方法はいろいろありますが、この記事ではプラグインのWP-PageNaviを使います。

WP-PageNaviをインストールして以下の関数を使うことで、検索結果一覧など、内容の多いページを複数のWebページに分割します。

PHP

<?php wp_pagenavi(); ?>

かかかず

この記事のスニペットは、WP-PageNaviを使った実装なので、入れておきましょう。

検索フォームと検索結果を作る手順と方法

WP-PageNaviをインストール

WP-PageNaviをインストールしていない場合は、ダッシュボードのプラグインか、以下のサイトからダウンロードしてインストールしておきましょう。

外部リンク WP-PageNavi

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

まずはじめに、カスタム投稿用の検索フォームを作ります。

今回の例では、投稿タイプスラッグが「hoge」をサンプルにします。この場合、valueの中に「hoge」を記述して、ファイル名は searchform-XXXX.php のハイフンの後ろに投稿タイプスラッグをつけます。

なので、ここではsearchform-hoge.phpというファイル名にして保存しましょう。

PHP

<form method="get" class="hoge-search" action="<?php echo esc_url( home_url( '/' ) ); ?>" >
        <input type="hidden" name="post_type" value="hoge">
	<input type="text" placeholder="<?php if(!is_search()){ echo 'サイト内検索';} ?>" value="<?php if(is_search()){ echo get_search_query();} ?>" class="hoge-searchbody" name="s">
	<button type="submit" class="hoge-searchbutton"></button>
</form>

作った検索フォームを設置

STEP.2 で作った検索フォームを表示させたいページに設置します。

設置の方法は、以下記事の「09. 任意のテンプレートの組み込み」を参考にして記述しましょう。

関連記事テンプレートの組み込み

検索結果を切り替える為にfunctions.phpへコピペ

次に、検索結果のページ search.php を、投稿スラッグ毎に切り替える設定の為、以下のコードをfunctions.php にコピペします。

functions.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;
}

ここは設定するだけなので、書き換えずにそのままfunction.phpにコピペしましょう。

かかかず

functions.php をいじるので注意しましょう。

検索結果ページを作る

最後に、カスタム投稿「hoge」の検索結果ページ用にsearch-hoge.phpを作成します。

searchのハイフン後に「hoge」のカスタム投稿スラッグを指定することで、このファイルを優先して読み込み検索結果に表示してくれます。

PHP

	<ul>
        <?php
           $search_query = get_search_query();
           global $post;
           $paged = get_query_var('paged') ?: 1;
           $myQuery = new WP_Query();
           $param = array(
               'paged' => $paged,
               'posts_per_page' => 10, //表示件数
               'post_status' => 'publish',
               'post_type' => array('hoge','投稿タイプ2'), //投稿タイプ
               'orderby' => 'date',
               'order' => 'DESC',
               's' => get_search_query() //name="s"
           );
	$myQuery->query($param);
?>
<?php if($myQuery->have_posts()): ?>
<?php while($myQuery->have_posts()) : $myQuery->the_post(); ?>
<li><!-- ここに検索結果表示のループを書く --></li>
<?php endwhile; ?>
                 <?php else : //記事が無い場合 ?>
<li><!-- 検索結果がない場合のループを書く --></li>
           <?php endif;
            wp_reset_postdata(); ?>
	</ul>
<?php if(function_exists('wp_pagenavi')) wp_pagenavi(array('query' => $myQuery));?>

上記のコードでは、post_type をarrayで複数設定していますが、この部分は好みに応じて書き換えください。

かかかず

これで完成です！