【WordPress】カスタム投稿タイプのページに検索フォームを設置する
バンドやミュージシャンのホームページに特化したWordPressテーマ「zousanrecords」を制作しています太田ヒロシです。
zousanrecordsのホームページに「よくある質問」というページがありまして、これは日々いただく質問で構成されています。
最近、質問が溜まってきて「検索できたほうがいいよね？」と思ったので検索フォームを設置することにしました。
参考にさせていただいたのは以下の記事。
今回自分がやりたいことを実現するにはちょっとしたカスタマイズが必要だったのでそのレポートです。
やりたいこと
・「よくある質問」ページに検索フォームを設置。
・サイト全体ではなく、よくある質問ページ内だけで機能させる。
ちなみに「よくある質問」ページはカスタム投稿タイプで作成しています。
２つのテンプレートファイル
WordPressにはもともと検索機能が付いていて、基本的に2つのファイル
・searchform.php（検索フォームテンプレート）
・search.php（検索結果ページテンプレート）
を作成するだけでその機能を追加できるそうです。
searchform.php（検索フォームテンプレート）
まずはsearchform.phpです。以下のように記述しました。
<form method="get" id="searchform" action="<?php bloginfo('url'); ?>">
<input type="text" name="s" id="sbox" placeholder="検索ワードを入力"/>
<button type="submit" id="sbtn"><i class="fas fa-search"></i></button>
</form>検索ボタンはFont Awesomeの虫眼鏡のアイコンにしてます。
search.php（検索結果ページテンプレート）
続いてsearch.phpです。
<?php if (have_posts()): ?>
<?php
if (isset($_GET['s']) && empty($_GET['s'])) {
echo '検索キーワード未入力'; // 検索キーワードが未入力の場合のテキストを指定
} else {
echo '“'.$_GET['s'] .'”の検索結果：'.$wp_query->found_posts .'件'; // 検索キーワードと該当件数を表示
}
?>
<ul class="search_ul">
<?php query_posts($query_string.'&posts_per_page=-1'.'&post_type=faq'); ?>
<?php while(have_posts()): the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>"><?php echo get_the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>
<?php else: ?>
<p>検索されたキーワードにマッチする記事はありませんでした</p>
<?php endif; ?>ここで、ひと工夫が必要でした。
query_postsの部分です。
ページャーのプラグイン「WP-PageNavi」を使っている関係で、表示設定の「1ページに表示する最大投稿数」は１件に設定しています。
そのため、「posts_per_page=-1」で全件表示に指定する必要がありました。
また、よくある質問ページに限定したいので、「post_type=faq」でページのスラッグである「faq」を指定しています。
functions.php
次にfunctions.phpです。
「よくある質問」を検索対象にするため、カスタム投稿タイプを追加しているところに以下を追記。
'exclude_from_search' => false,そして検索結果を「よくある質問」に限定するため、以下を追記しました。
function my_pre_get_posts($query) {
if ( !is_admin() && $query->is_main_query() && $query->is_search() ) {
$query->set( 'post_type', array('faq') );
}
}
add_action( 'pre_get_posts','my_pre_get_posts' );archive-faq.php
最後に、検索フォームを設置するarchive-faq.phpです。
設置したいところに以下を追記しました。
<?php get_search_form(); ?>実際に設置してみた
あとはcssで装飾を加えて実際に見てみます。
実際のページは→こちら
試しに「インストール」で検索してみます。検索結果が以下
きちんと「よくある質問」ページ内で検索されました。
リンクをクリックするとsingleページへ飛びます。
これで完成です。
まとめ
実際は、検索結果が4件となっているのに1件しか表示されなかったり（posts_per_pageを設定してなかった）、検索結果が12件となっているのに4件しか表示されなかったり（よくある質問ページに限定されてなくて、サイト全体の検索結果が出てた）と、つまずきながらなんとか完成させました。
これで少しは便利になったかなと思います。
-------------------------
バンド、ミュージシャンのホームページ制作をお手伝いしています。「zousanrecords」では無料版も用意しております。
最近は、ミュージシャンだけでなく広くクリエイターやアーティストに使っていただけるWordPressテーマ、
イベントの特設サイトに使っていただけるWordPressテーマも作ってます。
この記事が気に入ったらサポートをしてみませんか？