(2025/12/14 release)

• WordPress： 4.4 以上（WordPress 6.9対応）
• PHP： 7.3.5以上
• MySQL： 5.5.3以上
• 使用文字コード：  utf8mb4
• php.iniのmemory_limit = 128M以上

※基本的にWordPressの使用条件に準じます。
※上記以外の環境でも動く可能性はありますが保証はできません。

更新履歴

投稿 動作環境 は FE Advanced Search に最初に表示されました。

FE Advanced Search で検索を実行すると、チェックボックスやドロップダウンで指定された検索条件はURLにパラメーターとして渡され、それらを元にデータベースに問い合わせて該当する記事情報を取得します。取得した記事情報はご使用中のテーマの search.php というテンプレートを読み込んで表示します（search.phpが存在しない場合はindex.php）。

記事情報は取得はしますが、検索結果の表示内容やデザインフォーマットはテンプレート（search.php）次第であり、当プラグインは関与しません。

当プラグインには検索結果表示用の専用のテンプレートや、検索結果を一括で表示する関数やショートコードなどは含まれていません。従いまして、検索結果を表示するテンプレートの用意・カスタマイズは利用者自身で行っていただく必要があります（お詳しくない方には簡易的なカスタマイズでしたら無償サポートいたします）。別の言い方をすれば、表示部分はテンプレートの作り方次第で自由に表現していただけます（アイキャッチ画像を表示したり、記事に登録したカスタムフィールドの値を表示したり、テーブル形式で表示したりなど）。

WordPress標準の検索フォームではできない複雑な条件で絞り込み検索ができる一方で、検索結果のカスタマイズの自由度もあるのがFE Advanced Searchの特長でもあります。

プラグインの新規インストール手順

1. プラグイン購入後、ダウンロードリンクが記載されたメールが送付されますのでダウンロードして解凍します。
2. FTP等でサーバーに接続し、zipファイルを解凍してできた fe-advanced-search フォルダを以下の場所にアップロードします。
   • WordPressのインストールディレクトリ/wp-content/plugins/
3. または、WordPress管理画面のプラグイン > 新規追加ボタンからzipファイルのままアップロード＆インストールすることもできます。
   
4. プラグイン一覧にある「FE Advanced Search」の 有効化 リンクをクリックします。
5. 管理画面のサイドバー下方に 検索 という項目が現れていれば利用準備完了です。
   

投稿 絞り込み検索の動作イメージ/インストール は FE Advanced Search に最初に表示されました。

FEASは、WordPressの標準機能である投稿タイプ、カテゴリー、タグ、カスタムタクソノミー、カスタムフィールドなど、記事に紐付けられた値で絞り込むことができます。別の言い方をすると、FEAS専用に絞り込み検索のための値を別途登録する必要はありません。

カテゴリー/ターム/タグを優先的に使用しましょう

WordPressは標準でカテゴリーとタグという２つの方法で記事を分類でき、さらにカスタム投稿タイプ、カスタムタクソノミーにより分類方法を追加できます。カスタム投稿タイプ／カスタムタクソノミーの追加には「Custom Post Type UI」というプラグインが便利です。

さらに、カスタムフィールドを使用すると記事にメタ情報を埋め込むことができ、このメタ情報を使用した絞り込み検索も可能です。

カスタムフィールドは補助的に使用してください

FEASはカスタムフィールドの値でも絞り込み検索できますが、WordPressの構造上、カスタムフィールドの値の検索はカテゴリー/タグ/カスタムタクソノミーの検索よりも負荷がかかるため、特に理由がない限りカテゴリー/タグ/カスタムタクソノミーで記事を分類し、絞り込み検索もこれらをターゲットにしていただくほうが、サーバーに負荷も少なく検索結果の表示も速いです。

カスタムフィールドは、カテゴリー/タグ/カスタムタクソノミーでは分類できない項目…例えば電話番号や担当者名、住所の詳細（例：〇〇丁目〇〇番地）…などに使用し、都道府県や商品カテゴリーなど分類できる項目はカテゴリー/タグ/カスタムタクソノミーを優先的に使用してください。

カスタムフィールド登録用のユーザーフレンドリーなUIを作成できるプラグイン「Advanced Custom Fields」などは非常に便利で大変人気ですが、どんな情報でもカスタムフィールドに詰め込んでしまうような使い方もよく見掛けます。本来の分類機能であるカテゴリー/タグ/カスタムタクソノミーでおもに分類し、カスタムフィールドはあくまで補助的に使用されることをおすすめします（検索には使用せず、テンプレートに表示する目的でしたらとくに問題ありません）。

参考） Custom Fields vs. Taxonomies – alexking.org（英語）

2023/4/25【予告】カスタムフィールドの検索およびソートの速度が劇的に向上する見込み

現在、検索対象のカスタムフィールドを独自テーブル化と最適化により、テスト環境では劇的な速度向上を確認しています。近い将来のアップデートでカスタムフィールドまわりが劇的に改善する見込みです。

キーワードで絞り込み検索するには

WordPress標準の検索フォームでキーワード検索する際は、検索対象は記事のタイトルと本文ですが、FEASはさらに、カスタムフィールド（特定のカスタムフィールドを指定可能）、記事が属するターム名の名称、記事の抜粋（excerpt）、コメント欄を探すこともできます。

注意点として、例えば「東京」に関連する記事をキーワード検索でヒットさせたい場合、記事が東京エリアの内容でなくても記事本文に「東京」という文言が含まれていると、「東京」でキーワード検索した際にヒットしてしまいます（例：東京〇〇システム株式会社）。

このことが問題になる場合は、エリアを指定するキーワード検索欄は通常のキーワード検索欄とは独立して作成し、キーワード検索のターゲットから記事本文を外し、「記事が属するターム名の名称」をキーワード検索のターゲットに指定するか（エリアをあらわすカテゴリ/タームが存在することが前提）、記事の関連エリアを示すカスタムフィールドを別途設け、キーワード検索の対象に指定してください。

FEASで検索できないカスタムフィールド系プラグイン

下記のカスタムフィールド関連のプラグインにはFEASは対応していません：

• Advanced Custom Fields v1.8.10にておもなタイプに対応（2022/5/28）

  • 動作検証済みのタイプ：

    • テキスト
    • テキストエリア
    • 番号
    • 選択（Select）
    • チェックボックス
    • ラジオボタン
    • Button Group
    • 真 / 偽（設定項目はSmart Custom Fieldsと共用）
    • 投稿オブジェクト（設定項目はSmart Custom Fieldsと共用）
• Pods
• Types
• Custom Field GUI Utility

代わりに以下のプラグインをご使用ください：

• Smart Custom Fields
• Custom Field Suite
• Custom Field Template

親カテゴリー/親タームにもチェックをつけてください

記事の編集画面で階層のあるカテゴリー/タームに登録する際は、孫カテゴリーにチェックを付ける場合でも、そのカテゴリーの親・子カテゴリーにもチェックをつけてください。例えば「新宿区」だけにチェックを付けて記事を保存した場合、「東京都」で検索してもヒットしません。その記事には「東京都」のカテゴリーIDの登録がないためです。現在の仕様ではカテゴリー/タームの親子関係は参照していませんので、ご面倒かと思いますが各階層にチェックを付けてください。

カスタムフィールドの値には記号を含めない

カスタムフィールドの値で価格などの範囲検索したりソートの条件に指定するには、値を登録するときに記号を含まないようにご注意ください。たとえば商品価格が「5,000円以下」という範囲検索を想定するとき、検索にヒットするのは次の○が付いている値のみです。

• ○　3000
• ○　2,000
• ○　1200.25
• ×　￥800
• ×　500円

登録する値には円記号などは入力しないようご注意ください。その代わりにFEASの設定項目に、検索フォームを表示する際に円記号や半角カンマを補う機能があります。

投稿 コンテンツを絞り込み検索に対応させるには は FE Advanced Search に最初に表示されました。

WordPressの管理画面にログインし、左列メニュー下部「検索」ページを開くと、１つ目のタブに下記のようなセクションが表示されます。このセクションで、右上のドロップダウンで選択された検索フォーム全体の設定を行います。設定はフォームごとに独立しています。

名称

検索フォームの名称を設定します。機能に影響するものではなく、管理しやすい名称を任意で設定してください。

フォームID

検索フォームのIDです。

FEASで検索を実行すると、URLに fe_form_no=0 というように検索が実行されたフォームのIDがパラメータとして必ず含まれます。検索結果ページにおいて、この値を条件分岐に使用することができます。

<?php 
if ( isset( $_GET["fe_form_no"] ) && "0" === $_GET["fe_form_no"] ) {
    // フォームID=0で検索された場合 
} else if ( isset( $_GET["fe_form_no"] ) && "1" === $_GET["fe_form_no"] ) {
    // フォームID=1で検索された場合 
} else { 
    // その他（WP標準の検索など） 
}
?>

検索対象の投稿タイプ

ターゲットとする投稿タイプ（Post Type）を指定します。これにより特定の投稿タイプに絞って検索することができます。複数の投稿タイプを指定できますので、投稿タイプを横断的に検索できます。「attachment」を選択した場合は、記事の編集画面において「メディアを追加」ウィンドウの「タイトル」欄に入力した文字（post_name）が検索されます。

固定記事（Sticky Posts）について

投稿 > 文書 > ステータスと公開状態  > 「ブログのトップに固定」にチェックを付けた記事も検索対象に含む場合はチェックを入れます。FEASはデフォルトではStick Postsを検索から省くようになっています。固定記事は検索結果においても常に表示され、もしその記事が検索にヒットした場合、固定記事と検索結果で二重に表示されるためです。

固定条件

タクソノミ/ターム

特定のタクソノミ/タームをあらかじめ検索条件として設定できます。ポータルサイトなど、１つのサイトに様々なジャンルのコンテンツを管理しタクソノミ/タームで分類している場合に、あらかじめ各ジャンルの記事に絞った検索フォームを作成できます。

親ページ

固定ページや階層が設定されたカスタム投稿タイプで、指定した親ページ以下の階層の記事のみを検索対象とします。業務案内 > 製品一覧、会社情報 > 営業所一覧など特定の範囲のみ検索できます。

検索条件に件数を表示

「表示する」にチェックを入れると、各検索条件の右側に括弧付きの数字で、条件ごとの対象記事数を表示します。

検索結果から除外（記事/ターム）

検索結果から除外したい記事がある場合は、記事ID/タームIDを半角カンマ区切りで入力することで、検索結果から省くことができます。

※特定のカスタムフィールドの値を持つ記事を省く機能は近い将来のアップデートで実装予定です。

検索条件が指定されずに検索された場合

検索条件がいずれも指定されない状態で検索ボタンがクリックされた場合の挙動を選択できます。

• 0件を返す：検索結果には記事を表示しません（該当なし）。
• 固定タクソノミ/タームの記事の一覧を表示：前述の「固定条件 > タクソノミ/ターム」で設定した記事一覧を表示します。
  • 「固定タクソノミ/タームの記事の一覧を表示」に設定し、条件が「なし」に設定されている場合は全件を表示します。

検索結果の並び順

検索結果において記事が並ぶ順序を指定できます。WordPressの標準では「投稿日の新しい順」に記事が並びますが、投稿日の他に下記の順で表示できます。

• 投稿日時　＝ 投稿日の古い順/新しい順（昇順/降順）に並びます。
• タイトル　＝ タイトルの50音順（昇順/降順）に並びます。
  • 漢字/かな/英数字混じりの日本語環境では、それぞれ分かれて並びます。文字コード（UTF-8）上での出現順に並ぶためです。
• スラッグ　＝ 記事のスラッグ（URLに含まれる文字列）の50音順（昇順/降順）に並びます（スラッグを編集するには、設定 > パーマリンク設定にて、「共通設定」に%postname%が含まれる構造にした上で、記事編集画面の「パーマリンク」の「URLのスラッグを入力」欄にて設定します）。
• カスタムフィールド　＝ 右隣に表示されるドロップダウンで指定したカスタムフィールドのキーの値の昇順/降順に並びます。価格やよみがななど、値の種別に応じて「文字列」か「数値」を指定してください。
• 外部プラグイン　＝ データベースの wp_posts テーブルの menu_order 順に並びます。Intuitive Custom Post Order などのプラグインで記事の並び順を変更できます。
• ランダム　＝ 検索を実行する度に、違った順に並びます。

オプションで第二条件を指定できます。第一条件でソートした際に同じ順位の記事がある場合に、それらの並び順を第二条件で指定できます。

CSVインポートした記事について

CSVインポートした場合など、投稿日時がすべての記事で同じになる場合は、記事ID順で並びます。

昇順/降順

• 昇順　＝ 値の小さい順（例：0〜99..、A〜Z、あ〜ん、ア〜ン）に並びます。
• 降順　＝ 値の大きい順（例：99..〜0、Z〜A、ん〜あ、ン〜ア）に並びます。

カスタムフィールドのキー（カスタムフィールド選択時のみ）

• 作成済みのカスタムフィールドのキーが並びます。ソートのターゲットとするキーを選択してください。

数値/文字（カスタムフィールド選択時のみ）

• 数値　　＝ カスタムフィールドの値を数値として扱います。価格などでのソート時はこちらを選択
• 文字列　＝ カスタムフィールドの値を文字列として扱います。よみがななどでのソート時はこちらを選択

数値が保存されたカスタムフィールドは注意が必要です

• 「数値」の場合の並び順　　＝ 50、100、2000、10000
• 「文字列」の場合の並び順　＝ 100、10000、2000、50

上記のように、数値と文字列では数字の並び順が異なりますのでご注意ください。

検索項目の作成

２つ目のタブには、次のようなセクションが表示されます。

1. 初期状態で、１つ目の検索パーツの設定欄と検索ボタンが表示されています。
2. 左下の「項目を追加」で検索条件を追加できます。
   
3. 左下の「設定を保存」をクリックすると設定が保存されます。
   ※各種設定値を変更後、あらたに項目を追加する前に「設定を保存」してください。保存せずに「項目を追加」ボタンをクリックすると、直前の作業内容がリセットされます。
4. 「プレビュー」タブに、保存した検索フォームの内容が反映されます（この段階では「投稿年月」のドロップダウンと検索ボタンのみ）。
5. 作成する検索フォームに合わせて作り込んでいきます。

見出し

各検索項目の前に挿入される文字列です（省略可能）。HTMLタグが使えます。例えば、求人サイトにおいて業種のドロップダウンを表示する際に「業種で検索」などと記述します。

条件

検索項目に呼び出される条件（投稿年月/タグ/カテゴリ/カスタムタクソノミ/カスタムフィールドのキー）を選択します。「投稿日/更新日」は記事が公開された年・年月・年月日が表示されます（公開記事がある年月のみ表示）。「タグ」を選択すると、記事の登録があるタグの一覧が表示されます。カテゴリとカスタムタクソノミは、検索パーツに表示したいリストの親カテゴリ/タームを指定します。指定した親カテゴリ/ターム以下の階層の子カテゴリ/ターム一覧が検索パーツに表示されます。カスタムフィールドには登録のあるカスタムフィールドのキー一覧が表示されますので、検索対象とするキーを選択してください。登録が1件もないカスタムフィールドのキーは表示されません。

登録が0件のカスタムフィールドも表示するには

記事の登録が1件もないカスタムフィールドは、検索フォームに自動で呼び出すことはできません（記事の登録が1件もないと、データベース上ではそのカスタムフィールドは存在しないことになります…Advanced Custom FieldsやSmart Custom Fieldsなど外部プラグインの設定情報までは読み込みません）。登録がまだないカスタムフィールドの値も検索フォームに表示するには「自由記述」をご使用ください。自由記述を使用すると、”まだ未登録だが今後登録されうる値”をあらかじめ記述できます。ただし、運営上その値が不要になった場合であっても自動では消えませんので、手作業で自由記述の内容を更新していただく必要があります。

形式

• ドロップダウン ＝ 検索時、選択肢から１つ選択できます。省スペースですが項目数が多い場合は使いにくくなります。「範囲検索」を設定できます。「条件」に階層のあるタクソノミ/タームを設定した場合、親→子→孫の順次条件を表示できる「Ajax Filtering」を使用できます。
• セレクトボックス ＝ 複数の項目を選択できます（キーボードのShift/Ctrl（Windows）、Shift/Command（Mac）キーを使用）。
• チェックボックス ＝ 複数の項目を同時に選択できます。一覧性が高いですが、スペースを取ります。
• ラジオボタン ＝ １つの項目を選択できます。性別/有無など、選択肢が少ない項目に向いています。「範囲検索」を設定できます。
• フリーワード ＝ キーワード検索用です。キーワードを探す箇所（タイトル／本文／抜粋／記事が属するターム名／コメント欄／カスタムフィールドの値）を指定できます。カスタムフィールドの場合は特定のキーに限定できます。
• グループ ＝ 複数の検索項目をグループ化できます。主にv2.1から実装されたand/or検索の選択機能とあわせて使用することを想定したものです。グループ化された検索項目内でand/orで接続され絞り込みが行われた上で、グループ外の検索項目とand/orで接続されます。

項目内の並び順

検索項目内の項目の並び順を設定します。
投稿年月は昇順/降順を指定できます。タグ/カテゴリ/タームはID/名称/スラッグ/ランダムの他、「外部プラグイン」を選択した場合は「Category Order and Taxonomy Terms Order」等のプラグインで設定した並び順で表示することができます。

version1.8で実装された「自由記述」の場合は、二段目に表示される「検索パーツの表示項目（自由記述の内容）」にて、表示したい表記・値・順序に自由に記述いただけます。この「自由記述」は、特にカスタムフィールドの値を表示する際に便利です。カスタムフィールドには “order” という概念がない（meta_id（通し番号）/post_id/meta_key/meta_valueのセットが積み上がっていくだけ）ので、表示順を自由に設定できません。「自由記述」を使用することで、表示したい順、表示したい値（切りの良い値のみなど）のみ表示できます。さらに、存在しない値（将来登録されるであろう値）も含めて表示できます。

項目間

検索項目間の接続方法を選択できます。従来はAND検索で固定でしたが、v2.1からOR検索も指定できるようになりました。

• OR検索　＝複数の検索条件を選択した場合、それらのいずれかの項目に当てはまる記事を検索
• AND検索　＝同上　それらのすべての項目に当てはまる記事を検索

注意：OR検索を設定した場合、設定によっては、希望する検索結果が得られない可能性がありますのでご注意ください。例えば不動産検索サイトにおいて、「エリアから探す」と「カテゴリで探す」をOR検索で接続し、それぞれ「東京都」と「一戸建て」を選択して検索すると、一戸建てを選択したにもかかわらず東京都の一戸建て以外の物件や、東京都を指定したにもかかわらず、東京都以外の一戸建てなどが検索にヒットすることになり、矛盾が生じます。このような結果をさけるには、「形式」において「グループ」を作成し、OR検索をする項目同士をグルーピングし、グループ間はAND検索に設定してください。OR検索を設定する場合は、同じ分類の中の異なる選択肢（エリア間や製品カテゴリ間など）に設定するのが望ましいです。

（項目内）

複数選択ができる形式（チェックボックスまたはセレクトボックス）の場合のみ指定できます。複数のチェックボックスが選択された際、それらをANDまたはORのどちらで接続するかを選択します。

• OR検索　＝同検索パーツ内で複数選択した場合、それらのいずれかの項目に当てはまる記事を検索
• AND検索　＝同上　それらのすべての項目に当てはまる記事を検索

投稿 絞り込み検索フォームを作成する は FE Advanced Search に最初に表示されました。

各検索項目の左端の青い矢印をクリックすると、2段目の設定項目が開きます。

条件：投稿日/更新日

検索方法（投稿日/更新日）

記事の投稿日で絞り込む際に、年単位、月単位、あるいは日単位で絞り込むかを設定します。

更新日で検索

投稿日（post_date）のかわりに更新日（post_modefied）で絞り込みます。

テキスト入力で検索

input欄に「2024-04-01」という形式で入力して検索できます。

DatePickerを使用

input欄の右端のカレンダーアイコンをクリックすると、ミニカレンダーがポップアップして、日付を簡単に設定できます。

対象範囲

特定の期間に公開された記事のみ検索対象にしたい場合に設定します。

日付フォーマット

ドロップダウンなどに表示される日付のフォーマットを「Y年m月d日」のように設定します。PHPの日付フォーマットをご参考ください。

範囲検索

単一選択形式であるドロップダウンとラジオボタン形式のみ範囲検索を設定できます。

前・以前・以後・後から設定できます。選択した特定の年月日を基点にして「以前、以後」といった”範囲”で記事を検索できます。

• 前 = 選択した日時を含まない、それよりも前の記事が対象
• 以前 = 選択した日時を含む、それ期日以前の記事が対象
• 以後 = 選択した日時を含む、それ期日以後の記事が対象
• 後 = 選択した日時を含まない、それよりも後の記事が対象

未選択時の文字列

検索条件を選択していない状態に表示されるデフォルトの文言を指定できます。

前に挿入：<div class="search-date">
後に挿入：</div>

<div style="border:1px solid silver; padding:3px;">
<!--1ピクセルの薄いグレーの枠線で囲み、枠の内側に3pxの余白が付きます。-->

条件：カテゴリー、タグ、ターム（カスタムタクソノミー）

除外ID

特定のタグ/カテゴリ/タームを検索パーツに表示したくないときは、半角カンマ区切りでタグ/カテゴリ/タームIDを入力してください。

階層

表示する子カテゴリ/タームの階層を制限したい場合、半角数字で階層を指定します。未入力または「-1」の場合は無制限（下階層がある限り表示）に表示します。例えば「0」を入力の場合は「条件」に指定した親カテゴリ/ターム直下の第一階層のみ、「1」を入力の場合は、子カテゴリ/タームがある場合に1階層分がインデント表示されます。

また、後述の「Ajaxフィルタリング」を設定したとき、階層指定することで初期状態で表示するドロップダウンの数を指定できます。

登録件数が0件のカテゴリ/タームは表示しない

登録が1件もないタグ/カテゴリ/タームを表示しない場合はチェックを付けます（親カテゴリ/タームが0件の場合、子カテゴリ/ターム以下も非表示となります）。

Ajaxフィルタリング

※現状、ドロップダウン形式のみ対応

親カテゴリ/タームのドロップダウンの値を選択すると、その子カテゴリ/タームが存在する場合に、親カテゴリ/タームのドロップダウンの右隣に、子カテゴリ/タームのドロップダウンをJavaScriptで動的に表示します。

都道府県から市区町村へと絞り込む場合、あるいは沿線から各駅名へと絞り込む場合など、下層カテゴリ/タームの数が膨大になる場合に特に便利です。

「階層」を指定することで、初期状態で表示するドロップダウンの数を指定できます。たとえば階層に 3 と入力すると、第一階層のドロップダウンの他に空のドロップダウンがさらに2つ、合計3つのドロップダウンが生成されます。１つ目のドロップダウンで値を選択すると、その子カテゴリ/タームの内容が2つ目のドロップダウンに反映されます。3つ目も同様です。ただし、それより深く子カテゴリ/タームが存在する場合でもドロップダウンの数は固定となるため、それ以降の階層は検索条件に指定できません。

未選択時の文字列

デフォルトで「—未指定—」と表示される文字列を変更できます。ラジオボタン形式の場合は、選択状態をリセットするためのラジオボタン（空のvalue）を表示するかどうかを「表示」のチェックボックスで指定できます。

「Ajaxフィルタリング」が有効化されている場合、各階層（ドロップダウン）ごとに設定できます。その場合、半角カンマ区切りで各階層の表記を入力してください。

デフォルト値

検索フォームの初期値を設定したい場合、タームID（term_id）を記述してください。カンマ区切りで複数記述できます。Ajax Filteringで階層指定がある場合も、半角カンマ区切りで指定できます。カスタムフィールドの場合とキーワード検索の場合は値を記述してください。

条件：カスタムフィールド

範囲検索

指定した値より未満/以下/以上/超の範囲にそのカスタムフィールドの値を持つ記事が検索にヒットします。単一選択形式であるドロップダウンとラジオボタン形式のみ範囲検索を設定できます。”料金” や “期間” など、ある範囲に該当する記事を検索することができます。

範囲の扱い

投稿年月の場合は、前｜以前｜以後｜後、カスタムフィールドの場合は、未満｜以下｜以上｜超から選択できます。カスタムフィールドの場合は値の種別に応じて数値か文字列かを指定してください（価格＝数値、イベント日時＝文字列、よみがな＝文字列、など）。

日時を範囲検索するためには、カスタムフィールドに記号を含まない書式で値を保存してください。例えば 2022/4/28 ではなく 20220428 となるように、DatePickerなどの設定を変更してください。

テキスト入力で範囲検索

チェックを入れると、ドロップダウン/ラジオボタンの代わりにテキストフィールドを表示し、エンドユーザーの任意入力の値で範囲検索することができます。

なお、jQueryなどで範囲検索にスライダーを実装することでユーザビリティーが向上します。

参考） noUiSliderで範囲検索にスライダーを実装

２つの検索条件を組み合わせて下限〜上限を指定できる範囲検索を設定する

上記のように２つの検索パーツを組み合わせ、それぞれの範囲の扱いを「以上」と「以下」に設定しすると、下記のような「○○円以上〜○○円以下」という範囲検索が実装できます。version1.8からはテキスト入力だけでなく、ドロップダウン・ラジオボタンでも自由記述により切りの良い値でパーツを構成できるようになり、より実用的な範囲検索になりました。

単位を付与する

カスタムフィールドの値で範囲検索できるようにするには、カスタムフィールドの値には記号など含まず、数値のみを登録する必要があります。しかしドロップダウンなど検索パーツ内や検索結果ページに検索条件を表示する際には単位や区切りがあったほうが見やすいため、この機能を使用して補うことができます。設定した単位を値の前部/後部に付加します。おもに価格（1,000円、￥5,000）や重量（1kg、5,000t）などの場面を想定しています。

3桁ごとに半角カンマで区切る

前項のとおり、検索パーツなどに表示する際、カスタムフィールドの数値を3桁ごとに半角カンマで区切りを入れます。

「単位」「3桁ごと〜」をしない場合／設定した場合のドロップダウンの見え方の違いを示します。

Smart Custom Fields 関連

カスタムフィールドの値を登録する際に便利なプラグインが多数ありますが、当プラグインと互換性がないもの（例：Types、Pods、Advanced Custom Fieldsの一部機能）もあり注意が必要です。数あるプラグインの中でもSmart Custom Fieldsは多機能で使いやすく、このプラグインを使って登録されたカスタムフィールドの値は当プラグインで検索可能です。いくつか特徴的な機能をもっており、それらに対応するための以下の専用項目を用意しています。

真偽値として扱う
（ACFと共用）

「真偽値」に登録された値をそのまま検索パーツに表示すると「1」か「0」と表示されてわかりづらいため、この項目にチェックを入れることにより、それに続く「真の場合の文字列」「偽の場合の文字列」欄に表示する文字列を設定することで、検索パーツに意味がわかるかたちで表示できます。検索パーツの「条件」には真偽値として設定したカスタムフィールドのキーを指定してください。

真の場合・偽の場合の文字列（ACFと共用）

前項のとおりです。値が「1」＝真の場合・値が「0」＝偽の場合の文字列を入力してください。例えば「ペット可であるかどうか」で検索させたい場合、このテキスト欄に「ペット可」と入力することで、ラジオボタンの隣に「1」ではなく「ペット可」とわかりやすく表示できます。

関連する投稿（ACFと共用）

「関連する投稿」によって登録された値一覧が検索パーツに表示されます（登録された記事IDに基づいて記事タイトルを取得し、記事IDの代わりに表示されます）。検索パーツの「条件」には関連する投稿として設定したカスタムフィールドのキーを指定してください。

関連するターム

「関連するターム」によって登録された値一覧が検索パーツに表示されます（登録されたタームIDに基づいてターム名を取得し、タームIDの代わりに表示されます）。検索パーツの「条件」には関連するタームとして設定したカスタムフィールドのキーを指定してください。

Advanced Custom Fields 関連

複数選択形式で登録した値

Advanced Custom Fields は、チェックボックスやセレクトボックスなど複数選択形式で登録された値はシリアライズされて1つのカスタムフィールドの値として保存されるため、そのまま検索パーツに呼び出すとシリアライズされた値が呼び出され正常に検索できません。この項目にチェックを付けることで正常に検索できるようになります。

【注意】ACFはすべてのフィールドタイプに対応しているわけではありません

v2.0現在、以下のフィールドタイプに対応しています：

• テキスト
• テキストエリア
• 番号
• 選択（Select）
• チェックボックス
• ラジオボタン
• Button Group
• 真 / 偽（設定項目はSmart Custom Fieldsと共用）
• 投稿オブジェクト（設定項目はSmart Custom Fieldsと共用）
• 繰り返し（※キーワード検索のみ）

検索パーツの表示項目（自由記述の内容）

要素の選択肢（表記:値）

設定項目一段目（青いバーの部分）の「項目内の並び順」を「自由記述」にした場合、このエリアで検索パーツに表示する選択肢を自由に記述できます。カスタムフィールドに登録された価格一覧を呼び出すと商品の数だけ選択肢が並び実用的ではありません。その場合、1,000円、5,000円、10,000円など切りの良い選択肢のみで構成すると使いやすくなります。また、システムの都合で英語で登録された値をわかりやすく日本語で表示する場合にも便利です。

Advanced Custom Fieldsなどで、値と表記をコロン「:」で区切って登録されている場合はダブルクォーテーション「”」で値を囲んでください。

例）Advanced Custom Fieldsで値と表記を「ja:日本語」と分けて登録し、検索フォームでは「国内」と表示したい場合

国内:"ja:日本語"

形式：フリーワード（キーワード検索）

検索対象

キーワード検索時の検索対象（キーワードを探す箇所）を選択します。WordPress標準の検索機能ではタイトルと本文しか検索できませんが、当プラグインでは下記の項目を指定できます。

1. タイトル (post_title)
2. 本文 (post_content)
3. 抜粋 (post_excerpt)
4. カスタムフィールド (meta_value)
   キー（指定したキーのカスタムフィールド値のみ検索）
5. コメント (comment_content)
6. 記事が属するカテゴリ/タグ名 (terms > name)

何も選択されていない場合は、1,2,4,6が検索対象となります。カスタムフィールドの「キー」は、半角カンマ区切りで複数指定できます。なお、カスタムフィールドのキーワード検索は構造上非常に負荷がかかりますので、不要な場合はチェックを外してください。

あいまいさ

半角/全角、ひらがな/カタカナを区別しない

全角/半角・ひらがな/カタカナの表記ゆれの扱いを指定します。チェックを付けると半角/全角・ひらがな/カタカナの区別なく検索実行します。

例）全角で「ＰＨＰ」と入力

• チェックあり→　全角「ＰＨＰ」半角「PHP」いずれも検索にヒット
• チェックなし→　全角「ＰＨＰ」はヒット、半角「PHP」は検索にヒットせず

プレースホルダーテキスト

キーワード入力欄に未入力時に表示するコメントを設定できます。

設定の保存

検索項目の設定を終えたら、左下の「設定を保存」ボタンで保存します。プレビュータブには、設定した内容が実際のデータに基づいて表示されます。
必要に応じて左下の「項目を追加」ボタンで検索項目を追加して検索フォームを作り込みます。

検索項目が大量（約50項目以上）にあり、「設定を保存」ボタンを押下したときに保存が失敗する（画面の描画が崩れる現象が発生する）場合は下記をお試しください。

php.ini（PHPの動作設定ファイル）の「max_input_vars」の値が「1000」に設定されている場合は、この値を例えば「2000」などに引き上げてみてください。

php.iniファイルに

max_input_vars = 2000

もしくは.htaccessファイルに

php_value max_input_vars 2000

と記述してください。

version1.9の時点で、検索項目数が約50項目(50行)でmax_input_vars=1000のリミットに引っ掛かります。

検索フォームを複数作成/管理

検索フォームは複数作成できます。１つのサイト内…例えば地域ポータルサイト内で店舗検索、イベント検索、求人情報など分野ごとに検索フォームを作成できます。

• ページ右上のドロップダウンから「新規作成」を選択し「実行」ボタンをクリックします。
  
  • →新しく作成された検索フォームの編集画面が開きます。
  • →ドロップダウンの内容が（フォームID = 1）に変わっています。
• 検索フォームを作り込みます。

検索フォームを削除する

• 削除したい検索フォームを表示し、ページ右上のドロップダウンから「削除」を選択し「実行」ボタンをクリックします。

投稿 絞り込み検索フォームを作成する（Part 2） は FE Advanced Search に最初に表示されました。

設定した検索フォームはプレビュータブで見た目と動作を確認できます。実際に検索をすると、適用中のテーマの検索結果ページがフレーム内に表示されます。「前へ戻る」「次へ進む」ボタンで簡易的なナビゲーションができます。「テーマのstyle.cssを適用する」にチェックを付けるとテーマのstyle.cssがプレビュー欄に適用されます。「「デザイン」のCSSを適用する」にチェックを入れると 検索 > デザイン に記述したCSSを適用した状態で検索フォームの外観を確認できます。

コード

４つ目のタブ「コード」には、完成した検索フォームを設置するためのコード一覧が表示されます。検索フォームを設置するには以下の２つの方法があります。

1. テーマのテンプレートにFEAS専用のPHP関数を設置
2. 投稿や固定ページ、テキストウィジェットなどにショートコードで設置

また、コードには以下の３つの種類があります。

1. 検索フォームを表示する関数/ショートコード
2. 記事数を表示する関数/ショートコード
3. 検索実行後に指定した検索条件（語句）を表示する関数/ショートコード

「コード」タブにはそれぞれ表示されていますので、必要に応じてコピーして設置したい場所にペーストしてください。設置したら表示が崩れていないか、検索が機能するか動作確認を行ってください。

それぞれのコードについて詳しくはこちらのページをご覧ください：
絞り込み検索フォームを”設置”する

具体的な設置例としては以下が考えられます。

1. 設定 > 表示設定 > フロントページに指定した固定ページ本文欄に検索フォームと記事数の２つのショートコードを設置
2. 検索結果を表示するテーマのテンプレートはsearch.phpなので、search.phpを開き、ページ上部に検索条件と記事数を表示するPHPの関数を設置
3. 検索結果ページからさらに絞り込めるように、search.php下部に検索フォームのPHP関数を設置
   1. フロントページに設置した検索フォームと同じフォームIDの検索フォームをsearch.phpに設置すると、ドロップダウンやチェックボックスの状態を引き継ぐことができますので、エンドユーザーはそこからさらに絞り込むことができます。

多言語サイトに絞り込み検索を実装する

WordPressサイトを多言語化するためのプラグインがいくつか存在しますが、そのうち以下のプラグインに対応しています：

• Polylang（ https://ja.wordpress.org/plugins/polylang/ ）
• WPML Multilingual CMS（ https://wpml.org/ja/ ）
• Bogo（ https://ja.wordpress.org/plugins/bogo/ ）※解説準備中

これらのプラグインを併用時、FEASで絞り込み検索フォームを固定ページに設置するには以下の流れでおこないます（例：日本語、英語の２か国語に対応）：

1. 翻訳プラグインの仕様に従い、コンテンツ（記事）、カテゴリ/タームなどを翻訳する
2. １のコンテンツ（記事）を、それぞれの言語に翻訳されたカテゴリ/タームに登録する（※）
   • →日本語の記事は日本語のターム、英語の記事は英語のタームに登録
3. 検索フォームを設置するページ（日本語）を、固定ページで作成
4. ３で作成した検索ページの翻訳ページ（英語）を作成
5. FEASで日本語向けの検索フォームを作成、３の日本語検索ページにショートコードを配置
6. FEASで英語向けの検索フォームを作成（フォームの各項目は５と同じ）、４の英語検索ページにショートコードを配置

※Bogoは、カテゴリー/タグ/タームの翻訳は「テキスト翻訳」機能により言語ファイル（po/mo）に直接出力されるため、言語別にタームは生成されません。

以上で、言語スイッチャーなどで言語を切り替えた際に、それぞれの言語に対応した検索ページが表示されます。検索フォームのターム一覧はそれぞれの言語に翻訳されたタームのみが一覧表示され、検索を実行するとその言語の記事のみがヒットします。

フリーワード検索も同様に、現在選択されている言語の記事のみがヒットします。たとえ翻訳元・翻訳先の両方の記事に同じ単語…例えば日本語で「プログラミング」という単語が日・英、両方の記事に含まれていたとしても、言語スイッチャーで指定されている言語のコンテンツのみが検索にヒットします。

以下は、Polylangで多言語に対応した検索フォームを作成する手順を示したものです：

Ajaxフィルタリングに「Materialize」を適用する

「Materialize」のFormsなどのCSSフレームワークを検索フォームに適用すると、簡単に検索フォームに美しい動きのあるデザインを実装できますが、「Materialize」はFEASが出力したHTML（DOM構造）を動的に変えてしまうため、従来は「Ajaxフィルタリング」が正常に機能しませんでした。FEAS v1.9.6にて、AjaxフィルタリングにJavaScriptのフィルターフックを実装しましたので、これを使ってMaterializeの仕様に沿ったコードを別途記述することで、AjaxフィルタリングとMaterializeを併用することができます。

まず、Materializeに必要なファイルをヘッダーまたはフッターに読み込みます。

参考） https://materializecss.com/getting-started.html

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

　そして、フッターのwp_footer()関数より後に、下記のコードを記述します：

<script>
	(function($){
		
		$('select').formSelect();
		
		// Ajaxフィルタリングの結果を取得後に再反映
		$(document).ajaxComplete(function(){
			M.AutoInit();
		});
		// デフォルト値（未指定）選択時はAjax通信が行われないためonchangeにて再反映
		$('select').on('change',function(){
			M.AutoInit();
		});
		
	})(jQuery);
</script>

以上で、FEASを含むサイト内のすべてのドロップダウン（select）要素にMateliarizeのデザインが適用されます。絞り込み検索フォームにのみ適用したい場合は、コード全体を例えば <?php if ( is_page( 123 ) ) : ?> と <?php endif; ?> で囲むことで、検索フォームを設置した固定ページ（例：記事ID=123）のみに限定して適用することができます。

続いて、Matelializeを適用した状態でもAjaxフィルタリングが動作するように処理を追加します。

まず、以下のコードをテーマのfunctions.phpに追記します：

function feas_wrap_dropdown_materialize( $html, $args ) {

	$formNo = $args['manag_no'];
	$itemNo = $args['number'];
	$depth  = $args['depth'];

	if( 0 === $formNo && 0 === $itemNo ) { // フォームIDとAjaxフィルタリング項目の出現位置（検索項目1つ目 = 0）

		$addNo = "_{$formNo}_{$itemNo}";
		if ( 0 !== $depth ) {
			$addNo .= "_{$depth}";
		}
		$preHtml  = "<div id='search_element{$addNo}' class='input-field'>";
		$postHtml = "</div>";
		$html     = $preHtml . $html . $postHtml;
	}
	return $html;
}
add_filter( 'feas_term_dropdown_group_html', 'feas_wrap_dropdown_materialize', 10, 2 );

これは、Materializeで指定されている .input-field というクラス名をともなったdivタグで、Ajaxフィルタリングの各階層のselectタグを囲みます。例として、フォームID=0、Ajaxフィルタリングが検索フォームの最初に位置する場合を想定しています。異なる場合は、7行目の 0 === $formNo && 0 === $itemNo の数値をそれぞれ、該当するフォームID、Ajaxフィルタリングの表示位置に変更してください。

次に、Ajaxフィルタリングを実行した際（ドロップダウンの値が変更された際）に、JavaScriptによってリセットされる子タームのselectタグまでのパスを変更します。以下のコードを、前述のコードの続きに記述してください：

/**
 * AjaxフィルタリングのDOM構造変更
 *
 * MaterializeによってDOMが変更されるため、子要素を指定するjQueryの記述を調整
 * （上位階層のドロップダウンを切り替えた際に下位階層のドロップダウンを初期化する記述）
 * hook.min.jsを使用するため、フックの優先度「99」として読み込む順番を下げる
 *
 * @package FE Advanced Search
 * @since v1.9.6
 */
function feas_adjust_dom_materialize() {
	?>
	<script>
	function feas_adjust_dom_materialize( content, parent_obj, form_id, item_no, depth, default_depth ) {

		// 親要素を変更時に初期化（削除）する子要素を指定する記述をMaterializeのDOMに合わせて書き換え
		if( 0 === form_id && 0 === item_no ){
			if ( 1 < default_depth ) {
				content = jQuery(parent_obj).closest('.input-field').nextAll('.input-field').find('select');
			} else {
				content = jQuery(parent_obj).closest('.input-field').nextAll().remove();
			}
		}
		return content;
	}
	wp.hooks.addFilter( 'feas.ajaxInitChild', 'feas', feas_adjust_dom_materialize );

	function feas_adjust_dom_materialize_fulldepth( content, parent_id, form_id, item_no, depth, default_depth ) {

		// 階層が未指定の場合に逐次追加されるselect要素をMaterializeに必要なDOM構造に書き換え
		if( 0 === form_id && 0 === item_no ){
			let preHtml = "<div id='search_element_" + form_id + "_" + item_no + "_" + depth + "' class='input-field'>";
			let postHtml = "</div>";
			content = preHtml + content + postHtml;
		}
		return content;
	}
	wp.hooks.addFilter( 'feas.ajaxDropdownGroupHtml', 'feas', feas_adjust_dom_materialize_fulldepth );
	</script>
	<?php
}
add_action( 'wp_footer', 'feas_adjust_dom_materialize', 99 );

17行目と31行目の 0 === form_id && 0 === item_no の数値は、前述のとおり実際のフォームID、Ajaxフィルタリングの表示位置に合わせてください。

以上で、FEASの検索フォームにMaterializeの美しいデザインを適用し、なおかつAjaxフィルタリングも正常に動作させることができます。

投稿 絞り込み検索フォームを作成する（Part 3） は FE Advanced Search に最初に表示されました。

検索フォームのデザインはCSSで行います（現状、特に検索フォームのデザインテンプレートなどは用意しておりません）。ご使用中のテーマのstyle.cssに記述していただく他に、検索 > デザイン から記述していただくこともできます。なお、HTML/CSSに詳しくない方には、希望する検索フォームのイメージをお伝えいただければ、近いイメージになるようCSSの記述を無償で承っております。ご相談ください。

検索 > デザイン を開くと下記のような画面が開きます。あらかじめデフォルトのCSSが記述されていますが、インストール直後は無効になっています。デフォルトのスタイルをカスタマイズ、あるいは削除してCSSを記述してください。

• 「下記スタイルシートを使用する」にチェックを入れます。
• CSSを記述して保存をクリックします。
• 各検索フォームごとにスタイルを保存できます。右上のドロップダウンから対象となる検索フォームを選択してしてください。
• 各検索パーツにはid/classが付与されています。サイト上に表示された検索フォームのHTMLソースをブラウザのディベロッパーツール・開発ツールなどでご確認いただき、これらをターゲットにCSSを記述してください。

ドロップダウン内のソースコード例：

チェックボックスやラジオボタンの各項目を垂直方向に整列させる方法

複数のチェックボックスやラジオボタンを垂直方向にきれいに並べるには、下記のようにチェックボックスを囲むlabel要素に対して、 display に inline-block を指定し、width に幅を指定すると垂直方向を揃えることができます。

#feas-searchform label{
  font-weight: normal;
  display: inline-block;
  width: 140px;
}

チェックボックスの垂直方向を整列させた例：

投稿 絞り込み検索フォームをデザインする は FE Advanced Search に最初に表示されました。

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

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

検索フォームを表示

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

（例：フォーム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 というファイル名は例であり、とくにルールはありませんので自由に変えて下さい。

投稿 絞り込み検索フォームを設置する は FE Advanced Search に最初に表示されました。

ソートボタン は、検索結果ページでエンドユーザーが記事の並び順を任意に変更できるボタンです。検索直後は、検索 > フォーム全体の設定 の「検索結果の並び順」で指定した順序で記事が並びますが、エンドユーザーはソートボタンで希望する並び順で検索結果を表示できます。

タブ：全体の設定

検索 > ソート をクリックすると、下記のような画面が表示されます。

「全体の設定」タブでは、現在選択されているフォームIDに対するソートメニュー全体の設定を行います。

スタイル１/スタイル２

フォームIDにつき、2つのスタイルのソートメニューを同時に作成できます。スタイルは以下の３種類から選べます：

• リンクテキスト（aタグ）
• ドロップダウン（select）
• ボタン（button）

例えば、モバイルでは設置面積が少ないドロップダウン形式、PCではボタン形式など、出し分けることができます。

未選択時の文字列

ドロップダウン形式のみ有効なオプションです。ソートメニューを選択していないときのデフォルトの文字列を指定できます。例えば、検索フォームの「フォーム全体の設定」において、「検索結果の並び順」が「投稿日時」の「降順」に設定されている場合、「新しい順」などとすると良いでしょう。

タブ：ソート項目の作成

「ソート項目の作成」タブをクリックすると以下のような画面が表示されます。

必要なソートボタン/メニューを「項目を追加」ボタンで必要なだけ追加できます。

見出し

ソートボタンの前部に挿入する語句を入力します。HTMLタグが使えます。リンクテキスト形式、ボタン形式でのみ有効です。

ターゲット

ソートボタンをクリックしたときに、何の値を基準にソートを行うか指定します。

• 投稿日時　＝ 投稿日時を基準に並びます。
• 更新日時　＝ 更新日時を基準に並びます。
• タイトル　＝ タイトルを基準に並びます。英語、ひらがな/カタカナ、漢字、記号で分かれた上で英語はABC順、ひらがな/カタカナは50音で並びます。
• スラッグ　＝ 記事のスラッグ（URLに含まれる文字列）を基準に並びます（スラッグを編集するには、WordPressの 設定 > パーマリンク設定 にて「投稿名」または「カスタム構造」に設定し %postname% が含まれるようにパーマリンクを設定した上で、各記事の編集画面の「パーマリンク」セクションの「URLスラッグ」入力欄から変更してください）。
• カスタムフィールド　＝ 指定したカスタムフィールドのキーの値順に並びます。
• ランダム　＝ ボタンをクリックする度に、違った順に並びます。

カスタムフィールドのキー（カスタムフィールドのみ）

• 作成済みのカスタムフィールドのキー一覧が表示されます。ソートの基準とするキーを選択してください。

数値/文字（カスタムフィールドのみ）

• 数値　　＝ カスタムフィールドの値を数値として扱います。価格順などでのソート時はこちらを選択してください。
• 文字列　＝ カスタムフィールドの値を文字列として扱います。よみがな順などでのソート時はこちらを選択してください。

数値が保存されたカスタムフィールドは注意が必要です。

• 「数値」の場合の並び順　　＝ 50、100、2000、10000
• 「文字列」の場合の並び順　＝ 100、10000、2000、50

昇順テキスト/画像

昇順のソートボタンをあらわす文字列を入力します（▲など）。画像を指定することもできます（あらかじめ「メディア」などにアップロードした画像をimgタグで入力してください）。ドロップダウン形式の場合は画像やHTMLは指定できません。ドロップダウンに表示される文言を記述してください。

昇順、降順のいずれかまたは両方を空欄にしたときは、そのソートボタンは省略されます（表示されません）。

降順テキスト/画像

降順のソートボタンをあらわす文字列を入力します（▼など）。昇順テキスト/画像と同様です。

前に挿入・後に挿入するHTML/CSS

各ソートボタンのセット（昇順/降順ボタンの１セット）の前後に挿入するHTMLコードなどを記述します。ドロップダウン形式の場合は無効です。

並び順

各ソートボタンの並び順を設定します。

表示

ソート条件の設定を残したまま、一時的に非表示にする場合「表示しない」に設定します。

項目を削除

ソートボタンを削除したい場合、「項目を削除」にチェックを入れて「設定を保存」をクリックします。

• ひととおり設定したら、左下の「設定を保存」をクリックします。
  条件を一段分設定するごとに「設定を保存」してください。保存せずに「項目を追加」ボタンをクリックすると、直前の設定がリセットされます。
• 設定を保存すると、プレビュー欄に設定した内容が反映されます。
• ソートボタンのデザインはCSSで記述します（現状、ソートボタンのデザインテンプレートなどは同梱していません）。

作成する ソートボタン の切り替え

検索フォームを複数作成している場合、各検索フォームごとにソートボタンの作成が可能です。右上のドロップダウンから、対象の検索フォームを選択し「選択」ボタンを押して切り替え、各検索フォームごとにソートボタンの設定を行ってください。ソートボタンの作成は必須ではなく、必要な場合のみ作成および設置を行ってください。

投稿 ソートボタンを作成する は FE Advanced Search に最初に表示されました。

ソートボタンの設定画面において、「見出し」「前に挿入」「後に挿入」欄にはHTML/CSSを記述できますので、div/spanタグやclassを付与することで、CSSでのデザインがしやすくなります。

例として、上記のようにソートボタンを設定しHTMLタグを挿入すると、生成されたソートボタンのHTMLソースコードには下記のようにそれぞれclassが付与されます：

<div id="feas-sort-menu">
	<div class="feas-sort sort-price">
		<button class="feas-sl-1-down" onclick="location.href='https://...'">
			賃金の高い順
		</button>
	</div>
	<div class="feas-sort sort-50on">
		<button class="feas-sl-2-up" onclick="location.href='https:/...'">
			50音順
		</button>
		<button class="feas-sl-2-down" onclick="location.href='https://...'">
			50音順（逆順）
		</button>
	</div>
	<div class="feas-sort sort-random">
		<button class="feas-sl-3-up" onclick="location.href='https://...'">
			ランダム	
		</button>
	</div>				
</div>

これに対し、下記のようなCSSを 検索 > デザイン またはご使用中のテーマのstyle.cssに記述します。

#feas-sort-menu {
	display: flex;
	margin: 2rem auto;
}
.feas-sort button {
	background-color: white;
	border: 1px solid silver;
	box-shadow: 0 1px 0px silver;
	margin: 0 0.2rem;
	padding: 0.5rem;
	font-size: 0.8rem;
	font-weight: bold;
	color: #0d7abd;
}

すると下記のようにソートボタンをデザインできます。

投稿 ソートボタンをデザインする は FE Advanced Search に最初に表示されました。