WordPressのカスタム投稿タイプを使用したサイトのサイト内検索をチェックボックスで絞り込み検索できるようにする

Ads

購読してるブログの記事が気になった
のでメモ。カスタム投稿タイプを使った
サイトのサイト内検索をもうちょい使い
やすくする的な方法です。良く見かける
検索方法なので覚えたいですね。

今日は僕得な記事です。複数のカスタム投稿タイプを使ったサイトで、カスタム投稿別で絞り込み検索を、ユーザーがチェックボックスを使って出来るようにする方法です。


↑こういうやつね。

コード

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
<input type="text" name="s" id="s" <?php if(is_search()) { ?>value="<?php the_search_query(); ?>" <?php } else { ?>value="キーワード &hellip;" onfocus="if(this.value==this.defaultValue)this.value='';" onblur="if(this.value=='')this.value=this.defaultValue;"<?php } ?> /><br />

<?php $query_types = get_query_var('post_type'); ?>

<input type="checkbox" name="post_type[]" value="foo" <?php if (in_array('foo', $query_types)) { echo 'checked="checked"'; } ?> /><label>foo記事</label>
<input type="checkbox" name="post_type[]" value="bar" <?php if (in_array('bar', $query_types)) { echo 'checked="checked"'; } ?> /><label>bar記事</label>
<input type="checkbox" name="post_type[]" value="hoge" <?php if (in_array('hoge', $query_types)) { echo 'checked="checked"'; } ?> /><label>hoge記事</label>
<input type="checkbox" name="post_type[]" value="fuga" <?php if (in_array('fuga', $query_types)) { echo 'checked="checked"'; } ?> /><label>fuga記事</label>

<input type="submit" id="searchsubmit" value="検索する!" />
</form>

普段使用している検索ボックスのコードを上記のように変更するだけです。いつものfunctions.phpへの追記は特に必要ありません。上記コードは

foo、bar、hoge、fugaという、4つのカスタム投稿タイプがあって、それぞれのチェックボックスにチェックを入れて検索すると、他の投稿タイプの投稿は弾いてくれる

というコードになります。

<input type="checkbox" name="post_type[]" value="投稿タイプ名" <?php if (in_array('投稿タイプ名', $query_types)) { echo 'checked="checked"'; } ?> /><label>表示テキスト</label>

↑こんな感じ。

というわけで実際にテストしました。

施工例

さて、実際に絞り込み出来るかテストです。
テスト用に、「ワンコ記事」、「ネコ記事」、「鳥記事」、「釣りキチ」の4つの投稿タイプを作成しました。更に、検索フォームを先ほどのコードに変更してあります。

それぞれの投稿タイプには以下の記事を1つずつ書きました。

  • 【投稿タイプ:ワンコ記事】 ワンコ記事です。ネコ記事でも鳥記事でも釣りキチでもありません。
  • 【投稿タイプ:ネコ記事】 ネコ記事です。ワンコ記事でも鳥記事でも釣りキチでもありません。
  • 【投稿タイプ:鳥記事】 鳥記事です。ワンコ記事でもネコ記事でも釣りキチでもありません。
  • 【投稿タイプ:釣りキチ】 釣りキチです。ワンコ記事でもネコ記事でも鳥記事でもありません。

これなら、「ワンコ」や「ネコ」で検索をかければ、どの投稿タイプの記事でも、必ずキーワードにかかりますので、チェックボックスによる検索フィルタリングが出来ているか検証できます。

実装


で、実際に検索したのが上記の画像です。右上にフォームがありますが、「ネコ記事」と「ワンコ記事」にチェックが入っているので、他の投稿タイプの記事ははじかれています。

詳しい方には今更って感じでしょうけどwこれはデフォルトで使いたいレベルかも。おなじみのwpbeginnerさんより教わりました。

How to Create Advanced Search Form in WordPress for Custom Post Types