【超便利な検索フォームが完成】絞り込み検索の作り方<プラグインなし>

つくってみた
つくってみた
この記事は約37分で読めます。

不動産や採用情報など、カテゴリ・タグ・カスタムフィールドを駆使したWordpressで作ったサイトを運営中。
ユーザーが、色々と欲しい情報を絞り込み検索できたら便利だと思っている。
イイ感じのプラグインがないけれど、自作で検索フォームを作ったり、カスタマイズ出来るものなのかな?

結論!プラグインに頼らなくても複数条件で絞り込み検索を設置・カスタマイズできます!

  • タイトルや本文はもちろん、カテゴリ・タグ・カスタムタクソノミー・カスタムフィールドから絞り込み検索できる
  • フリーワード検索の他、チェックボックス・ドロップダウン(プルダウン)・ラジオボタンを使う検索フォームを作れる
  • 検索した値を保持して検索フォームに引き継げる超便利検索フォームが作れる

今回はフォーム周りをメインに解説するので、検索自体の細かい設定はこちらでお済ませください。

まずは、完成形がこちらです!ドン!

実装したいパーツ早見表。目次からジャンプできます。

スポンサーリンク

【重要】検索関係で必要なphpファイルは2種類

検索フォームの設置は、searchform.phpで。
検索結果の表示は、search.phpで。
「searchform.phpで検索したものを、search.phpで表示する」という流れです。
これだけ押さえておいてくださいね!

1.フリーワード検索

検索を表示するには、
searchform.php に name=”s” が必要で、
search.php に $_GET[‘s’] と ‘s’ が必要になります。

s が無いと、検索そのものが機能しません。

でも、フリーワード検索を非表示にしたいときは?

searchform.php の input type=”search” を input type=”hidden” にしてください。フォームを消せて、検索を機能させられます。

すると、検索したときにURL末尾に/?s=がつき、検索できることが確認できます。

検索フォーム

searchform.php に下記コードをコピペ。

<span>検索</span>
<form role="search" method="get" action="<?php bloginfo('url'); ?>">
<div>
<label>フリーワード検索:
<input type="search"
	placeholder="<?php echo esc_attr_x( 'キーワードを入力', 'placeholder'); ?>"
	value="<?php echo esc_html( get_search_query() ); ?>" name="s" >
</label>
</div>
<input type="submit" value="絞り込む" />
	<a href="/?s=">条件クリア</a>
</form>

検索結果

search.php に下記コードをコピペ。

<?php 
        $s = $_GET['s'];

$search_args = array(
	's' => $s
);
$the_query = new WP_Query( $search_args ); ?>

		<?php get_search_form(); //検索フォームの表示 ?>

<div>検索結果:全 <?php echo $the_query->found_posts.' 件'; ?></div>

<?php /* Start the Loop */ ?>
	<?php if ( $the_query->found_posts ) {
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

		~~結果がある場合、ここに表示したい内容~~

	<?php endwhile; ?>

		<?php wp_reset_postdata(); ?>

	<?php }else{ ?>

		~~結果がない場合、ここに表示したい内容~~

	<?php } ?>

WP_Queryを使って検索結果の表示したい内容をカスタマイズできます。

参照:https://wpdocs.osdn.jp/関数リファレンス/WP_Query

表示サンプル

searchform.php と search.php で、フリーワード検索はこんな感じになります。

2.カテゴリー・タグ・カスタムタクソノミーの各種検索

検索を表示するには、
searchform.php に name=”★” が必要で、
search.php に $_GET[‘★’] と ‘tax_query’ が必要になります。

すると、検索したときにURL末尾に/?s=&★=がつき、検索できることが確認できます

2-1.カテゴリ系×チェックボックス検索

※★は共通の任意のものにしてくださいね。今回はcheck01としました。

検索フォーム

searchform.php に下記コードをコピペ。get_terms でカテゴリー・タグ・カスタムタクソノミーを指定できます。今回の例はカテゴリーです。

<span>検索</span>
<form role="search" method="get" action="<?php bloginfo('url'); ?>">
<div>
<label>フリーワード検索:
<input type="search"
	placeholder="<?php echo esc_attr_x( 'キーワードを入力', 'placeholder'); ?>"
	value="<?php echo esc_html( get_search_query() ); ?>" name="s" >
</label>
</div>
	<div>カテゴリーorタグorカスタムタクソノミー</div>
		<div>チェックボックス:
<?php 
$terms = get_terms( 'category', array(
	'orderby' => 'name'  //色々指定できます
	) );
    if(!is_wp_error($terms)):
        foreach($terms as $term):

//チェックリスト値の受け渡し
$t_check=filter_input(INPUT_GET,'check01',FILTER_DEFAULT,["options" => ["default" => []],"flags" => FILTER_REQUIRE_ARRAY]);
$checked["check01"] = [ $term->term_id => ""];
foreach((array)$t_check as $val){
  $checked["check01"][$val]="checked";
}
?>
<label><input type="checkbox" name="check01[]" value="<?php echo $term->term_id; ?>" <?php echo $checked["check01"][$term->term_id]; ?>><?php echo $term->name . '(' . $term->count . ')'; ?></label>
<?php endforeach; endif; ?>
	</div>

<input type="submit" value="絞り込む" />
	<a href="/?s=">条件クリア</a>
</form>

get_terms について・・・

  • カテゴリーなら、’category’
  • タグなら、’post_tag’
  • カスタムタクソノミーなら、’movie’,’news’ etc…カスタムタクソノミー名

array内の引数(orderby等)で色々指定できます。

検索フォームの表示内容は戻り値(term_id等)で色々表示できます。

参照:https://wpdocs.osdn.jp/関数リファレンス/get_terms

検索結果

search.php に下記コードをコピペ。

<?php 
        $s = $_GET['s'];
			
if(isset($_GET['check01'])){
	$taxquerysp[] = array(
        'taxonomy'=> 'category',
        'terms'=> $_GET['check01'],
		'operator'=>'AND',
		'include_children'=>false
    );
	}else{
	 $taxquerysp[] = '';
 }

$search_args = array(
	's' => $s,
	'tax_query' => $taxquerysp
);
$the_query = new WP_Query( $search_args ); ?>

		<?php get_search_form(); //検索フォームの表示 ?>

<div>検索結果:全 <?php echo $the_query->found_posts.' 件'; ?></div>

<?php /* Start the Loop */ ?>
	<?php if ( $the_query->found_posts ) {
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

		~~結果がある場合、ここに表示したい内容~~

	<?php endwhile; ?>

		<?php wp_reset_postdata(); ?>

	<?php }else{ ?>

		~~結果がない場合、ここに表示したい内容~~

	<?php } ?>

表示サンプル

searchform.php と search.php で、カテゴリ系のチェックボックス検索はこんな感じになります。

2-2.カテゴリ系×ラジオボタン検索

ラジオボタン検索は、チェックボックス検索とさほど変わらないので、チェックボックス検索をベースに該当箇所を変えてください。

  1. input type=”checkbox” を input type=”radio” に変更。
  2. ★を変更する。 今回はradio01としました。(後述の完成形を参照)
  3. <すべて>という選択肢を付けてあげると親切かと思うので、searchform.php 11行目辺りに下記コードを挿入。
<label><input type="radio" name="radio01[]" value="" checked="checked">すべて</label>

表示サンプル

searchform.php と search.php で、カテゴリ系のラジオボタン検索はこんな感じになります。

2-3.カテゴリ系×ドロップダウン(プルダウン)検索

※★は共通の任意のものにしてくださいね。今回はdrop01としました。

検索フォーム

searchform.php に下記コードをコピペ。get_terms でカテゴリー・タグ・カスタムタクソノミーを指定できます。今回の例は’movie’というカスタムタクソノミーです。

<span>検索</span>
<form role="search" method="get" action="<?php bloginfo('url'); ?>">
<div>
<label>フリーワード検索:
<input type="search"
	placeholder="<?php echo esc_attr_x( 'キーワードを入力', 'placeholder'); ?>"
	value="<?php echo esc_html( get_search_query() ); ?>" name="s" >
</label>
</div>
	<div>カテゴリーorタグorカスタムタクソノミー</div>
	<div>
	    <label>ドロップダウン(プルダウン):
 <select name="drop01"><option value="">すべて</option>	 
    <?php
    $taxonomys = get_terms( 'movie', array(
	'hide_empty' => '0'  //投稿がないタームも表示
	) );
    if(!is_wp_error($taxonomys) && count($taxonomys)):
        foreach($taxonomys as $taxonomy):
	 		$r_tax = filter_input(INPUT_GET,"drop01");
$selected["drop01"] = [ $taxonomy->term_id => "" ];
$selected["drop01"][$r_tax?:""]="selected";
	  ?>
    <option value="<?php echo $taxonomy->term_id; ?>"<?php echo $selected["drop01"][$taxonomy->term_id] ?>><?php echo $taxonomy->name; ?></option>
	 <?php endforeach; endif; ?>
		</select></label></div>

<input type="submit" value="絞り込む" />
	<a href="/?s=">条件クリア</a>
</form>

get_terms についてはこちらで解説

検索結果

search.php に下記コードをコピペ。

<?php 
        $s = $_GET['s'];
			
 if(isset($_GET['drop01'])){
    $taxquerysp[] = array(
        'taxonomy'=> 'movie',
        'terms'=> $_GET['drop01'],
		'operator'=>'AND',
		'include_children'=>false
    );
	}else{
	 $taxquerysp[] = '';
 }

$search_args = array(
	's' => $s,
	'tax_query' => $taxquerysp
);
$the_query = new WP_Query( $search_args ); ?>

		<?php get_search_form(); //検索フォームの表示 ?>

<div>検索結果:全 <?php echo $the_query->found_posts.' 件'; ?></div>

<?php /* Start the Loop */ ?>
	<?php if ( $the_query->found_posts ) {
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

		~~結果がある場合、ここに表示したい内容~~

	<?php endwhile; ?>

		<?php wp_reset_postdata(); ?>

	<?php }else{ ?>

		~~結果がない場合、ここに表示したい内容~~

	<?php } ?>

表示サンプル

searchform.php と search.php で、カテゴリ系のドロップダウン(プルダウン)検索はこんな感じになります。

3.カスタムフィールドの各種検索

検索を表示するには、
searchform.php に name=”★” が必要で、
search.php に $_GET[‘★’] と ‘meta_query’ が必要になります。

すると、検索したときにURL末尾に/?s=&★=がつき、検索できることが確認できます

3-1.カスタムフィールド×チェックボックス検索

※★は共通の任意のものにしてくださいね。今回はcheck02としました。

検索フォーム

searchform.php に下記コードをコピペ。

“あり”や”なし”はカスタムフィールドの値で、検索したい値を入れてください。なお、値は自動で取得できないので、ひとつひとつ手入力する必要があります。。

<span>検索</span>
<form role="search" method="get" action="<?php bloginfo('url'); ?>">
<div>
<label>フリーワード検索:
<input type="search"
	placeholder="<?php echo esc_attr_x( 'キーワードを入力', 'placeholder'); ?>"
	value="<?php echo esc_html( get_search_query() ); ?>" name="s" >
</label>
</div>
	<div>カスタムフィールド</div>
		<div>チェックボックス:
	<?php
//チェックリスト値の受け渡し
$r_check=filter_input(INPUT_GET,'check02',FILTER_DEFAULT,["options" => ["default" => []],"flags" => FILTER_REQUIRE_ARRAY]);
$checked["check02"] = [ "あり" => "", "なし" => "" ];
foreach((array)$r_check as $val){
  $checked["check02"][$val]="checked";
}
?>

    <label><input type="checkbox" name="check02[]" value="あり" <?php echo $checked["check02"]["あり"]; ?>>あり</label>
    <label><input type="checkbox" name="check02[]" value="なし" <?php echo $checked["check02"]["なし"]; ?>>なし</label>
</div>

<input type="submit" value="絞り込む" />
	<a href="/?s=">条件クリア</a>
</form>

検索結果

search.php に下記コードをコピペ。’memo’はカスタムフィールドのキー(フィールド名)です。

要するに、カスタムフィールド名(今回の例だと、’memo’)の中から、
(今回の例だと、”あり”や”なし”)の検索ができるというわけです。

<?php 
        $s = $_GET['s'];
			
if (isset($_GET['check02'])){
        $metaquerysp[] = array(
                'key'=>'memo',
                'value'=> $_GET['check02']
                );
}else{
	 $metaquerysp[] = '';
 }

$search_args = array(
	's' => $s,
	'meta_query' => $metaquerysp
);
$the_query = new WP_Query( $search_args ); ?>

		<?php get_search_form(); //検索フォームの表示 ?>

<div>検索結果:全 <?php echo $the_query->found_posts.' 件'; ?></div>

<?php /* Start the Loop */ ?>
	<?php if ( $the_query->found_posts ) {
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

		~~結果がある場合、ここに表示したい内容~~

	<?php endwhile; ?>

		<?php wp_reset_postdata(); ?>

	<?php }else{ ?>

		~~結果がない場合、ここに表示したい内容~~

	<?php } ?>

表示サンプル

searchform.php と search.php で、カスタムフィールド×チェックボックス検索はこんな感じになります。

3-2.カスタムフィールド×ラジオボタン検索

ラジオボタン検索は、チェックボックス検索とさほど変わらないので、チェックボックス検索をベースに該当箇所を変えてください。

  1. input type=”checkbox” を input type=”radio” に変更。
  2. ★を変更する。 今回はradio02としました。(後述の完成形を参照)
  3. <すべて>という選択肢を付けてあげると親切かと思うので、searchform.php 11行目辺りに下記コードを挿入。
<label><input type="radio" name="radio01[]" value="" checked="checked">すべて</label>

表示サンプル

searchform.php と search.php で、カスタムフィールドのラジオボタン検索はこんな感じになります。

3-3.カスタムフィールド×ドロップダウン(プルダウン)検索

※★は共通の任意のものにしてくださいね。今回はdrop02としました。

今回は「色んな数値が入力されている中から〇〇以上のものを検索する」という想定で作ってみました。

検索フォーム

searchform.php に下記コードをコピペ。

<span>検索</span>
<form role="search" method="get" action="<?php bloginfo('url'); ?>">
<div>
<label>フリーワード検索:
<input type="search"
	placeholder="<?php echo esc_attr_x( 'キーワードを入力', 'placeholder'); ?>"
	value="<?php echo esc_html( get_search_query() ); ?>" name="s" >
</label>
</div>
	<div>カスタムフィールド</div>
	<div>
	    <label>ドロップダウン(プルダウン):
	<select name="drop02">
<option value="">すべて</option>
	<?php
$r_temp=filter_input(INPUT_GET,"drop02");
$selected["drop02"] = [ "1000" => "", "2000" => "" ];
$selected["drop02"][$r_temp?:""]="selected"; ?>

<option value="1000"<?=$selected["drop02"]["1000"];?>>1000円以上</option>
<option value="2000"<?=$selected["drop02"]["2000"];?>>2000円以上</option>
	</select>
</label></div>

<input type="submit" value="絞り込む" />
	<a href="/?s=">条件クリア</a>
</form>

検索結果

search.php に下記コードをコピペ。’yen’はカスタムフィールドのキー(フィールド名)です。

要するに、カスタムフィールド名(今回の例だと、’yen’)の中から、
(今回の例だと、”1000″円以上や”2000″円以上)の検索ができるというわけです。

今回は「色んな数値が入力されている中から〇〇以上のものを検索する」というサンプルですが、数値以外の検索ならチェックボックス検索で解説したように‘key’と’value’だけでOKです。

<?php 
        $s = $_GET['s'];
			
if(isset($_GET['drop02'])){
$metaquerysp[] = array(
            'key'=>'yen',
            'value'=>$_GET['drop02'],
	    'compare'=>'>=',	
            'type'=>'NUMERIC'
            );
}else{
	 $metaquerysp[] = '';
 }

$search_args = array(
	's' => $s,
	'meta_query' => $metaquerysp
);
$the_query = new WP_Query( $search_args ); ?>

		<?php get_search_form(); //検索フォームの表示 ?>

<div>検索結果:全 <?php echo $the_query->found_posts.' 件'; ?></div>

<?php /* Start the Loop */ ?>
	<?php if ( $the_query->found_posts ) {
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

		~~結果がある場合、ここに表示したい内容~~

	<?php endwhile; ?>

		<?php wp_reset_postdata(); ?>

	<?php }else{ ?>

		~~結果がない場合、ここに表示したい内容~~

	<?php } ?>

数値を扱うのであれば、’compare’と’type’を指定してください。

(1)’compare’ でどう比較するかを指定

  • 以下なら、’compare’=>‘<=’
  • 以上なら、’compare’=>‘>=’
  • 以下~以上のような範囲指定なら、’value’=>array($_GET[‘drop02’],$_GET[‘drop03’])のようにして、’compare’=>‘BETWEEN’

(2)’type’ で何を扱うかを指定

  • 数字なら、’type’=>‘NUMERIC’
  • 小数点なら、’type’=>‘DECIMAL(3,1)’・・・この場合は、有効桁数が3、小数点以下桁数が1で「37.5」みたいな数字になる

表示サンプル

searchform.php と search.php で、カスタムフィールドのドロップダウン(プルダウン)検索はこんな感じになります。

~全部をまとめるとこんな感じ~

検索フォーム (searchform.php)

<span>検索</span>
<form role="search" method="get" action="<?php bloginfo('url'); ?>">
<div>
<label>フリーワード検索:
<input type="search"
	placeholder="<?php echo esc_attr_x( 'キーワードを入力', 'placeholder'); ?>"
	value="<?php echo esc_html( get_search_query() ); ?>" name="s" >
</label>
</div>
	<div>カテゴリーorタグorカスタムタクソノミー</div>
		<div>チェックボックス:
<?php 
$terms = get_terms( 'category', array(
	'orderby' => 'name'  //色々指定できます
	) );
    if(!is_wp_error($terms)):
        foreach($terms as $term):

//チェックリスト値の受け渡し
$t_check=filter_input(INPUT_GET,'check01',FILTER_DEFAULT,["options" => ["default" => []],"flags" => FILTER_REQUIRE_ARRAY]);
$checked["check01"] = [ $term->term_id => ""];
foreach((array)$t_check as $val){
  $checked["check01"][$val]="checked";
}
?>
<label><input type="checkbox" name="check01[]" value="<?php echo $term->term_id; ?>" <?php echo $checked["check01"][$term->term_id]; ?>><?php echo $term->name . '(' . $term->count . ')'; ?></label>
<?php endforeach; endif; ?>
	</div>

		<div>ラジオボタン検索:
<?php 
$terms = get_terms( 'post_tag', array(
	'orderby' => 'name'  //色々指定できます
	) );
    if(!is_wp_error($terms)):
        foreach($terms as $term):

//ラジオボタン値の受け渡し
$t_check=filter_input(INPUT_GET,'radio01',FILTER_DEFAULT,["options" => ["default" => []],"flags" => FILTER_REQUIRE_ARRAY]);
$checked["radio01"] = [ $term->term_id => ""];
foreach((array)$t_check as $val){
  $checked["radio01"][$val]="checked";
}
?>
<label><input type="radio" name="radio01[]" value="<?php echo $term->term_id; ?>" <?php echo $checked["radio01"][$term->term_id]; ?>><?php echo $term->name . '(' . $term->count . ')'; ?></label>
<?php endforeach; endif; ?>
	</div>

	<div>
	    <label>ドロップダウン(プルダウン):
 <select name="drop01"><option value="">すべて</option>	 
    <?php
    $taxonomys = get_terms( 'movie', array(
	'hide_empty' => '0'  //投稿がないタームも表示
	) );
    if(!is_wp_error($taxonomys) && count($taxonomys)):
        foreach($taxonomys as $taxonomy):
	 		$r_tax = filter_input(INPUT_GET,"drop01");
$selected["drop01"] = [ $taxonomy->term_id => "" ];
$selected["drop01"][$r_tax?:""]="selected";
	  ?>
    <option value="<?php echo $taxonomy->term_id; ?>"<?php echo $selected["drop01"][$taxonomy->term_id] ?>><?php echo $taxonomy->name; ?></option>
	 <?php endforeach; endif; ?>
		</select></label></div>

	<div>カスタムフィールド</div>
		<div>チェックボックス:
	<?php
//チェックリスト値の受け渡し
$r_check=filter_input(INPUT_GET,'check02',FILTER_DEFAULT,["options" => ["default" => []],"flags" => FILTER_REQUIRE_ARRAY]);
$checked["check02"] = [ "あり" => "", "なし" => "" ];
foreach((array)$r_check as $val){
  $checked["check02"][$val]="checked";
}
?>

    <label><input type="checkbox" name="check02[]" value="あり" <?php echo $checked["check02"]["あり"]; ?>>あり</label>
    <label><input type="checkbox" name="check02[]" value="なし" <?php echo $checked["check02"]["なし"]; ?>>なし</label>
</div>

		<div>ラジオボタン検索:
	<?php
//ラジオボタン値の受け渡し
$r_check=filter_input(INPUT_GET,'radio02',FILTER_DEFAULT,["options" => ["default" => []],"flags" => FILTER_REQUIRE_ARRAY]);
$checked["radio02"] = [ "あり" => "", "なし" => "" ];
foreach((array)$r_check as $val){
  $checked["radio02"][$val]="checked";
}
?>

    <label><input type="radio" name="radio02[]" value="あり" <?php echo $checked["radio02"]["あり"]; ?>>あり</label>
    <label><input type="radio" name="radio02[]" value="なし" <?php echo $checked["radio02"]["なし"]; ?>>なし</label>
</div>

	<div>
	    <label>ドロップダウン(プルダウン):
	<select name="drop02">
<option value="">すべて</option>
	<?php
$r_temp=filter_input(INPUT_GET,"drop02");
$selected["drop02"] = [ "1000" => "", "2000" => "" ];
$selected["drop02"][$r_temp?:""]="selected"; ?>

<option value="1000"<?=$selected["drop02"]["1000"];?>>1000円以上</option>
<option value="2000"<?=$selected["drop02"]["2000"];?>>2000円以上</option>
	</select>
</label></div>

<input type="submit" value="絞り込む" />
	<a href="/?s=">条件クリア</a>
</form>

フリーワード検索を非表示にしたいときは、
searchform.php の input type=”search” を input type=”hidden” にしてください。フォームを消せて、検索を機能させられます。

検索結果 (search.php)

<?php 
        $s = $_GET['s'];

if(isset($_GET['check01'])){
	$taxquerysp[] = array(
        'taxonomy'=> 'category',
        'terms'=> $_GET['check01'],
		'operator'=>'AND',
		'include_children'=>false
    );
	}else{
	 $taxquerysp[] = '';
 }

if(isset($_GET['radio01'])){
	$taxquerysp[] = array(
        'taxonomy'=> 'post_tag',
        'terms'=> $_GET['drop01'],
		'operator'=>'AND',
		'include_children'=>false
    );
	}else{
	 $taxquerysp[] = '';
 }

 if(isset($_GET['drop01'])){
    $taxquerysp[] = array(
        'taxonomy'=> 'movie',
        'terms'=> $_GET['drop01'],
		'operator'=>'AND',
		'include_children'=>false
    );
	}else{
	 $taxquerysp[] = '';
 }

if (isset($_GET['check02'])){
        $metaquerysp[] = array(
                'key'=>'memo',
                'value'=> $_GET['check02']
                );
}else{
	 $metaquerysp[] = '';
 }

if (isset($_GET['radio02'])){
        $metaquerysp[] = array(
                'key'=>'memo',
                'value'=> $_GET['radio02']
                );
}else{
	 $metaquerysp[] = '';
 }

if(isset($_GET['drop02'])){
$metaquerysp[] = array(
            'key'=>'yen',
            'value'=>$_GET['drop02'],
	    'compare'=>'>=',	
            'type'=>'NUMERIC'
            );
}else{
	 $metaquerysp[] = '';
 }

$paged = get_query_var('paged') ? get_query_var('paged') : 1; //pagination settings
$search_args = array(
	's' => $s,
	'tax_query' => $taxquerysp,
	'meta_query' => $metaquerysp,
	'posts_per_page' =>10,  //ページネーション設定 ※functions.php内のposts_per_pageと同じ数字にする
	'paged' => $paged, //ページネーション設定
);
$the_query = new WP_Query( $search_args ); ?>

		<?php get_search_form(); //検索フォームの表示 ?>

<div>検索結果:全 <?php echo $the_query->found_posts.' 件'; ?></div>

<?php /* Start the Loop */ ?>
	<?php if ( $the_query->found_posts ) {
		while ( $the_query->have_posts() ) : $the_query->the_post(); ?>

		~~結果がある場合、ここに表示したい内容~~

	<?php endwhile; ?>

<?php //ページネーション設置
  $GLOBALS['wp_query']->max_num_pages = $the_query->max_num_pages;
  $args = array(
      'mid-size' => 2,
      'prev_text' => '≪前へ',
      'next_text' => '次へ≫',
      'screen_reader_text' => 'ページナビゲーション'
  );
  the_posts_pagination($args); ?>

		<?php wp_reset_postdata(); ?>

	<?php }else{ ?>

		~~結果がない場合、ここに表示したい内容~~

	<?php } ?>

‘tax_query’ => $taxquerysp と ‘meta_query’ => $metaquerysp は、arrayで配列にしているので一行だけで大丈夫です。

WP_Queryを使って検索結果の表示したい内容をカスタマイズできます。

参照:https://wpdocs.osdn.jp/関数リファレンス/WP_Query

表示サンプル

searchform.php と search.php で、絞り込み検索検索はこんな感じになります。

おわりに

最後に、今回出てきた検索関係のポイントをざーっと並べます。

  • 検索結果の表示には、’s’が不可欠
  • フリーワード検索のフォームを非表示にするには、input type=”hidden”にする
  • 検索フォームでカテゴリー・タグ・カスタムタクソノミーを取得するには、get_termsを使う
  • 検索結果の表示内容をカスタマイズするには、WP_Queryを使う
  • 検索結果でカテゴリー・タグ・カスタムタクソノミーを扱うには、WP_Queryで’tax_query’が必要
  • 検索結果でカスタムフィールドを扱うには、WP_Queryで’meta_query’が必要
  • 検索結果で数値を扱いたい場合は、’compare’と’type’を指定する
なよいちゃん
なよいちゃん

以上になります!
ポイントを押さえて、自由自在に絞り込み検索しちゃってくださ~い!

この記事が気に入ったら、サポートをしてみませんか?
\ ワンコインからのAmazonギフト /

この記事への質問・コメントはこちら

  1. こんばんは!
    こちらの記事とても参考になりました!
    記事を参考にしつつ作成した検索フォームなんですが、個人サイトの他に商用のサイトなどに使用したいのですが、参考にしたのでソースがほとんど同じになってしまいます。
    商用利用は不可などございますでしょうか?
    ※このフォームのソース自体の売買などではありません!
    ご返信いただけますと幸いです!

    • ご連絡ありがとうございます。特に問題ございません。お役に立てたようで嬉しいです^^

タイトルとURLをコピーしました