カスタム投稿を使うことで、コンテンツの作成・管理が簡単になります。
そんなカスタム投稿ですが、通常の投稿や固定ページとは異なるので検索フォームと検索結果を分けようと思うと、ちょっと一手間必要です。
この記事は、そんなカスタム投稿用の検索フォームと検索結果を作るスニペットの内容です。
私的に使う頻度が多いので、改めて備忘録的な記事です。
ご覧頂き、実装する機会があればコピペして使ってください。
注意点とプラグイン
実装の前に、注意点と使用するプラグインについて解説します。
注意点
基本は、コピペで実装できますが functions.php をいじります。
functions.phpは色々なことができるファイルですが、いじるのをミスってしまうと、WordPress全体が真っ白のエラーになってしまうこともあるので、注意が必要です。
functions.phpをいじる場合、ftpで必ずバックアップを取ってから行い、テーマ本体ではなく子テーマの方に関数をコピペするようにしましょう。
ページネイションの実装方法はいろいろありますが、この記事ではプラグインのWP-PageNaviを使います。
WP-PageNaviをインストールして以下の関数を使うことで、検索結果一覧など、内容の多いページを複数のWebページに分割します。
<?php wp_pagenavi(); ?>この記事のスニペットは、WP-PageNaviを使った実装なので、入れておきましょう。
検索フォームと検索結果を作る手順と方法
WP-PageNaviをインストールしていない場合は、ダッシュボードのプラグインか、以下のサイトからダウンロードしてインストールしておきましょう。
外部リンク WP-PageNavi
まずはじめに、カスタム投稿用の検索フォームを作ります。
今回の例では、投稿タイプスラッグが「hoge」をサンプルにします。この場合、valueの中に「hoge」を記述して、ファイル名は searchform-XXXX.php のハイフンの後ろに投稿タイプスラッグをつけます。
なので、ここではsearchform-hoge.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>次に、検索結果のページ search.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」のカスタム投稿スラッグを指定することで、このファイルを優先して読み込み検索結果に表示してくれます。
<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で複数設定していますが、この部分は好みに応じて書き換えください。
これで完成です！
![WP REST APIをReactでWordPressの記事一覧を表示させるスニペット [React版]](https://dubdesign.net/wp-content/uploads/2021/12/restapipost_eyecatch-520x300.jpg)
