絞り込み検索フォームを設置する

絞り込み検索フォームを設置する

絞り込み検索フォームを設置する方法について解説します。

記事本文/ウィジェットにショートコードで設置する方法

検索フォームを表示

ショートコードで記事本文やウィジェットに検索フォームを設置できます。

（例：フォームID=2の検索フォームを表示する場合）

[feas-search-form id=2]

検索フォームを複数個作成している場合、id属性にフォームIDを与えることで表示する検索フォームを指定できます。id属性を省略した場合はフォームID=0の検索フォームが表示されます。

該当件数を表示

「〇〇の検索結果●●件」といったような検索条件に該当する件数を表示する際に●●の数字を取得/表示するには下記のように記述します。前後の語句は手入力で補ってください。

（例：フォームID=2の該当件数を表示する場合）

[feas-search-count id=2]

検索フォーム同様、id属性を指定できます。

検索条件を検索結果一覧ページに表示

検索結果ページで、指定された検索条件を表示する際、語句の一覧を取得するには下記のように記述します。

[feas-search-query]

このショートコードには3つの属性をオプションとして渡すことができます。

1. sep　複数の検索条件が指定された場合に、それぞれの語句の区切り文字（デフォルトは半角カンマ「,」）
2. before　それぞれの語句の前に挿入される文字（デフォルトは<span>）
3. after　それぞれの語句の後に挿入される文字（デフォルトは</span>）

（例：半角スペース区切り、各キーワードをspanタグで囲いkeywordというclassを付与）

[feas-search-query sep=' ' before='<span class="keyword">' after='</span>']

テンプレートにPHPの関数で”設置”する方法

ショートコードの他に、FEAS独自のPHP関数をテーマのテンプレートに設置することでも検索フォームを表示できます。テーマにPHP関数を直接設置する方法でしたらテーマの機能に制限されず、サイト内のどこにでも検索フォームを設置できます。

検索フォームを表示

検索フォームを表示したいテンプレートの任意の場所に下記のように記述します。

（例：フォームID=2の検索フォームを表示する場合）

<?php feas_search_form( 2 ); ?>

検索フォームを複数作成した場合、引数にフォームIDを与えることで表示する検索フォームを指定できます。引数を省略した場合はフォームID=0の検索フォームが表示されます。

記事ループの中に設置すると、記事の数分だけ検索フォームが表示されてしまいますのでご注意ください。記事ループの外部に設置してください。

該当件数を表示

検索条件に該当する件数を表示するには下記のように記述します。

（例：フォームID=2の該当件数を表示する場合）

<?php feas_search_count( 2 ); ?>

2つ目の引数にfalseを指定すると、画面出力せずに値を取得し、その後PHPで処理できます。

検索条件を検索結果一覧ページに表示

検索結果ページで、指定された検索条件をページタイトルなどに表示する際、語句の一覧を取得するには下記のように記述します。

<?php feas_search_query(); ?>

ショートコードと同様に、引数を与えることでオプションを指定できます。

1. output　画面出力（デフォルトはtrue）
   • falseにすると画面出力せずに各キーワードを配列で取得できます。その後PHPでループ処理して加工できます。
   • 内部的には search_result_array() 関数に渡されます。
2. separator　検索条件の区切り文字（デフォルトは半角カンマ「,」）
3. before　それぞれの語句の前に挿入される文字（デフォルトは<span>）
4. after　それぞれの語句の後に挿入される文字（デフォルトは</span>）

記述例

上記の関数を用いた記述例は以下のとおりです。

front-page.phpなど検索フォームを表示するテンプレートに設置

<?php if ( function_exists( 'feas_search_form' ) ) { ?>
  <div class="feas-search-form">
    <?php feas_search_form(); ?>
  </div>
<?php } ?>

<div class="feas-search-count">
  現在の登録件数：<?php feas_search_count(); ?> 件
</div>

search.phpなど検索結果を表示するテンプレートの上部に設置

<h2>「<?php feas_search_query(); ?>」の検索結果 <?php feas_search_count(); ?> 件</h2>

v2.0にて、それぞれの検索語句と検索項目の関連性を保持するようになりましたので、下記のように配列をループで回すことで、キーワードごとに接頭辞を出力することができます。

$html = '';
$query = feas_search_query( false );
if ( $query ) {
	foreach ( $query as $q ) {
		if ( is_array( $q ) ) {
			if ( 0 === $q[ 'number' ] ) { // 検索項目の行番号 - １つ目の検索項目
				$html .= '<span class="q-label">エリア</span>';
			} else if ( 1 === $q[ 'number' ] ) { // 検索項目の行番号 - ２つ目の検索項目
				$html .= '<span class="q-label">ジャンル</span>';
			}
			$html .= '<span class="q-value">'. esc_html( $q[ 'text' ] ) . '</span>';
		}
	}
}
?>
<h3><?php echo esc_html( $html ); ?>の検索結果 <span class="count-value"><?php feas_search_count(); ?></span> 件</h3>

検索結果を表示するテンプレート（search.phpなど）に上記のように記述してください。これにより、下記サンプルのように、検索語句の手前に検索項目名を付記することで、よりわかりやすくなります。

絞り込み検索の結果を表示する

検索条件にヒットした記事一覧を正しく表示させるためには、使用するテーマフォルダ内に search.php というテンプレートが存在している必要があります。多くのテーマには含まれていますが、もし含まれていない場合は archive.php、index.php などの記事一覧表示用のテンプレートを複製して、search.php に名称変更しカスタマイズしてご使用ください。

WordPressは、検索が実行され内部で is_search が true になると、まずテーマフォルダ内の search.php というテンプレートを探して検索結果を表示しようとします。FEASのどの検索フォームから検索が実行された場合でも検索結果は search.php を通ります。もし search.php が存在しない場合は、下記の優先順位で別のテンプレートがフォールバックとして使用されます（WordPressのテンプレート階層のルール）。

search.php　＞　index.php

index.php はすべてのテンプレートの最後の受け皿となるため、このテンプレートを検索結果専用にカスタマイズすることはその他のコンテンツの表示に不具合が生じる可能性がありますのでおすすめしません。

search.phpを用意できたら、ファイル内で記事ループ部分（while から始まり endwhile で終わる部分）を探してください。その内側が、検索にヒットした各記事のコンテンツを表示する部分になります。通常、the_title（記事タイトル）、the_excerpt（本文抜粋）またはthe_content（本文全文）などは最低限記述されていると思いますが、the_post_thumbnail（アイキャッチ画像）、post_custom（カスタムフィールド）などの関数を追記することで表示内容を拡張できます。

search.phpのwhile 〜 endwhileの間でさらにget_template_part関数で別のテンプレートを読み込んでいる場合もあります。その場合はその読み込んでいるテンプレートを開いて表示内容を確認してください。

FEASが検索結果ページに渡すのは、絞り込んだ結果の記事情報（記事ID、タイトル、本文など）のみであり、検索結果のdiv構造などデザインフォーマットには関与しません。WordPressの標準の検索などと同様に$wp_queryオブジェクトに検索結果が格納されていますので、if(have_posts)…といった、通常のWordPressのテンプレートの作法で記事情報を展開できます。

検索の表示件数を変更する

検索結果ページの表示件数を変えたい場合は、pre_get_postsにフックする下記のような関数をテーマ内のfunctions.phpに記述してください。

function change_posts_per_page( $query ) {
  if( isset( $_GET['fe_form_no'] ) ) {
    if ( '0' === $_GET['fe_form_no'] ) { // フォームID=0から検索が実行された場合
        $query->set( 'posts_per_page', 20 ); // 検索結果一覧を20件に設定
    }
  }
}
add_action( 'pre_get_posts', 'change_posts_per_page' );

このコードの例では、フォームID=0の検索フォームから検索された場合、20件ごとに表示されるよう指定しています。フォームIDが違う場合は3行目の「0」を実際のフォームIDに変更してください。件数を変更する場合は4行目の「20」を希望する件数に変更してください。

検索結果のテンプレートを”検索フォームごとに”切り替える

サイト内のそれぞれのカテゴリ/コーナー毎に別々の検索フォームを設置した場合、検索結果を表示するテンプレートも分けたい場合があります。その場合は search.php を必要なパターン分だけ複製・名称変更し、さらに複製元の search.php の中身を下記のように書き換えて分岐専用のテンプレートにします。

<?php
// フォームID=0から検索された場合
if ( isset( $_GET['fe_form_no'] ) && '0' === $_GET['fe_form_no'] ) {
  //search-form0.phpを読み込む
  get_template_part( 'search', 'form0' );
}
// フォームID=1から検索された場合
elseif ( isset( $_GET['fe_form_no'] ) && '1' === $_GET['fe_form_no'] ) {
  //search-form1.phpを読み込む
  get_template_part( 'search', 'form1' );
}
// それ以外（WordPress標準の検索窓など）
else {
  //archive.phpを読み込む
  get_template_part( 'archive' );
}
?>

検索を実行すると必ずこの search.php を通りますが、その際にどの検索フォームから検索が実行されたかはURLに含まれる fe_form_no というパラメータで判別できるため、この値を使ってsearch.phpの先で読み込むテンプレートを条件分岐できます。

複製したそれぞれの searh.php のコピーを検索フォームごとに表示内容やデザインをカスタマイズし、上記の条件分岐のget_template_partに指定してください。

コード記述例の search-form0.php というファイル名は例であり、とくにルールはありませんので自由に変えて下さい。