WordPressに絞り込み検索機能を入れるためのプラグインは色々存在しますが、今回はFE Advanced Searchという自分のWordPressのサイトに検索機能を導入することができるプラグインがあります。
またこのプラグインと一緒にAdvanced Custom Fields、というプラグインも合わせて使うことで検索できる幅がぐっと広がります。
なので、今回はFE Advanced SearchとAdvanced Custom Fieldsを組み合わせてつくる商品検索サイトの作り方を紹介していきます。
Contents
FE Advanced Searchとは？
FE Advanced Searchとは、株式会社ファーストエレメントが提供している日本製の既存のWordPerssの検索機能を強化するためのプラグインです。
このプラグインは、WordPressの検索機能をより強化し、特にCMSとしてのWordPressの価値を高め、用途の幅を広げます。
このプラグインは有料なのですが、単純にこのプラグインの機能を実際に導入しようとなるとPHPのプログラミングスキルに加え、WordPressの専門知識も必要になります。
なので、十分払う価値のあるプラグインだと思います。
Advanced Custom Fieldsとは？
Advanced Custom Fieldsとは今回合わせて使うプラグインのことで、このプラグインを使うことでPHPのコードを書かずに、カスタムフィールドなどを設定することができるプラグインです。
ちなみにカスタムフィールドとは、WordPressの投稿画面などにオリジナルの入力項目を設定することができる機能のことです。
これを導入するにはPHPなどのプログラムを、functions.phpと呼ばれるファイルに書く必要があります。
ただ、このプラグインを使うことでオリジナルの入力項目追加をプログラミングなしで実現できます。
ちなみに、このプラグインは無料で使うことができます。
Advanced Custom Fieldダウンロードサイトはこちら
FE Advanced Searchを使って、実際の商品検索サイトの作り方ご紹介
ここからは紹介したプラグインを使ってちょっとした商品検索サイトを作って行きたいと思います。
プラグインのインストール
まずは各プラグインをアップロードしていきます。
各サイトからプラグインを入手したら、メニューの「プラグイン」ー＞「新規追加」から「プラグインのアップロード」ボタンをクリックしましょう。
すると、「ZIP 形式のプラグインファイルをお持ちの場合、こちらからアップロードしてインストールできます。」という画面が表示されます。
ここの「ファイルを選択」をクリックして、アップロードしたいファイルをセットして「今すぐインストール」ボタンをクリックしましょう。
ボタンを押した後は次のようにインストール画面が表示されます。
ここでは、「プラグインの有効化」というボタンをクリックしましょう。
日本語の文字化けを防ぐために有効化するプラグイン
プラグインのインストールが完了したら、メニューの「プラグイン」ー＞「インストール済みプラグイン」をクリックしましょう。
するとプラグインの一覧画面が表示されると思います。
現状インストールが完了すると「Advanced Custom Fields」と「FE Advanced Search」の項目の背景が青色になっていると思います。
ここで、日本語の文字化けを防ぐために「WP Multibyte Patch」というプラグインも有効化するようにしましょう。
プラグイン一覧ページの「WP Multibyte Patch」の下に「有効化」という項目があると思うので、そこもクリックします。
Advanced Custom Fieldsのセットアップ
プラグインのインストールができたら、次はAdvanced Custom Fieldsのセットアップを行っていきます。
ここでは実際の検索の時に使う値のカスタムフィールドを、Advanced Custom Fieldsを使って作っていきます。
まずは、メニューの中の「カスタムフィールド」をクリックします。
クリックしたら、次に「新規追加」ボタンをクリックしましょう。
新規追加をクリックすると次のような画面が表示されます。
タイトル欄の名前はなんでもOKです。
ここでは、便乗上「商品検索フィールド」という風にします。
ルールの部分が「投稿タイプ」「等しい」「post」となっていることを確認します。
ここでは、今回作成したカスタムフィールドがどこに表示されるのかを決めるためのルール付けを行っています。
商品は投稿タイプに登録していくので、ルールの部分は「投稿タイプ」「等しい」「post」と指定します。
次に「フィールドを追加」をクリックして、商品検索の時に使用するカスタムフィールドを追加していきます。
今回は次のような項目を作成しました。
・値段：フィールドタイプ：数値：入力：必須入力
・日持ち：フィールドタイプ：数値：入力：必須入力
・返金保証：フィールドタイプ：ラジオボタン：入力：必須入力
値段フィールド作成
値段のフィールドは上記に表示したとおり次のような設定項目にしてあります。
フィールドラベル：値段
フィールド名：値段
フィールドタイプ：数値
必須か？：はい
日持ちフィールド作成
値段フィールドを作成したら、次は「＋フィールドを追加」をクリックしましょう。
クリックすることで新しく、入力項目が追加されると思います。
日持ちのフィールドは次のような設定項目にしてあります。
フィールドラベル：日持ち
フィールド名：日持ち
フィールドタイプ：数値
必須か？：はい
返金保証フィールド作成
日持ちフィールドを作成したら、また「＋フィールドを追加」をクリックして入力項目を追加しましょう。
返金保証のフィールドは次のような設定項目にしてあります。
フィールドラベル：返金保証
フィールド名：返金保証
フィールドタイプ：ラジオボタン
必須か？：はい
選択肢：返金保証なし : 返金保証なし、返金保証あり : 返金保証あり
すべて設定できたら、「公開ボタン」をクリックします。
クリック後の画面
以上でAdvanced Custom Fieldsの設定は終了です。
商品の追加
Advanced Custom Fieldsの設定ができたら次は商品を追加していきます。
今回は投稿の部分に商品を追加していきます。
投稿はWordPressの「メニュー」ー＞「投稿」ー＞「新規追加」から投稿していきます。
投稿画面の項目を入力したら最後に下の方にある、さっきAdvanced Custom Fieldsを使って追加したカスタムフィールドを入力していきます。
この時の注意点として、値段と日持ちは「半角数字」で入力するようにしましょう。
あとはこれを繰り返して、商品を追加していきます。
とりあえず、テスト用として次のような商品を作成しました。
FE Advanced Searchの検索設定
商品を作成したら次は、FE Advanced Searchの検索フォームの設定を行っていきます。
WordPressのメニュー一覧から「検索」の項目をクリックします。
すると、FE Advanced Searchの検索フォーム設定画面が出てくると思います。
ここからそれぞれの項目を設定していきます。
名称について
名称は今回作成する検索フォームの名称のことです。
FE Advanced Searchでは、検索フォームを複数作ることができます。
ここの名称は複数作った時に見分けるために必要になるものになりますので、好きなように設定しましょう。
とりあえず、「商品検索フォーム」という名前にしておきました。
検索対象投稿タイプについて
検索対象投稿タイプとは、この検索フォームが検索する時に使用する投稿タイプのことです。
ここでは次の４つを検索対象にすることができます。
１．投稿(post)
２．固定ページ(page)
３．メディア(attachment)
４．固定記事(Sticky Posts)
商品一覧を投稿ページで作成したので、ここは「投稿(post)」にチェックを入れます。
固定タクソノミ/タームについて
こちらは設定することで、設定したカテゴリ内の記事にのみ検索をかけることができるようになります。
例えば、投稿一覧の中の特定のカテゴリがついているやつにのみ検索をかけたい時とかに使用することができます。
個人的にこれ結構すごいｗ
ただ、今回は設定していないので特に何も設定しません。
なので、「なし」のままにしておきます。
検索結果の並び順
ここでは、実際検索された時のデフォルトの検索結果の並びを指定することができます。
選べる項目は下記の５つ。
１．投稿日時順
２．タイトル順
３．スラッグ順
４．カスタムフィールド順
５．ランダム
ここでは、とりあえずデフォルトの投稿日時順に設定しておきます。
フォームIDについて
フォームIDは検索フォームを複数作成した場合に必要になってくる項目です。
例えば、このページではID２の検索フォーム、このページではID３の検索フォームなどのように作成したフォームを指定する時に使用するものになります。
検索条件に件数を表示
ここは何もチェックを入れないようにしておきます。
検索条件が指定されずに検索された場合
これはユーザーが何も検索項目を指定しなかった時に、関係してくる項目です。
「０件を返す」を指定すれば検索した時に何も表示されません。
逆に「固定タクソノミ/タームの一覧記事を表示」を選択すれば検索フォームに関係している物の一覧が表示されます。
ここは「固定タクソノミ/タームの一覧記事を表示」を設定するようにします。
ここまで一通り設定したら一度、入力した内容を保存しておきましょう。
すぐ下にある「設定を保存」という項目をクリックして、保存しておきます。
FE Advanced Searchの検索項目設定
保存ができたら、次はFE Advanced Searchの検索項目を設定していきます。
ここから、実際検索する時に使用する検索項目を設定していきます。
ここでは、次の２つの項目を設定することができます。
１．フォーム項目
２．ソート項目
フォーム項目とは、検索フォームの内部の項目のことです。
ソート項目はユーザーがボタンをクリックして、検索結果のうち値段の安い順などに並べ替えることができる項目のことになります。
フォーム項目設定
Advanced Custom Fieldsでは下記の３つのカスタムフィールドを設定しました。
ここでは、３つの検索フォーム項目を作成していきます！
・値段：フィールドタイプ：数値：入力：必須入力
・日持ち：フィールドタイプ：数値：入力：必須入力
・返金保証：フィールドタイプ：ラジオボタン：入力：必須入力
値段項目
値段項目はドロップダウン形式のメニューにします。
ラベルは「値段」に設定。
条件の箇所でカスタムフィールドのどの項目を指定するかを選ぶことができますので、そこで「値段」のカスタムフィールドを選択しましょう。
形式の箇所でチェックボックスやドロップダウンなどの形式を選ぶことができます。
ここでは、「ドロップダウン」を選びましょう。
ドロップダウンを選んだら次は範囲検索の箇所でドロップダウンで選んだ項目の検索条件を指定できます。
ここでは以下条件に設定します。
ここまで設定ができたら、「設定を保存」をクリックしましょう。
注意点として、FE Advanced Searchでは１つの検索項目を作成したらそのたびに「設定を保存」をクリックして保存する必要があります。
そうしないと、一度設定したデータが消えたりしてしまいます。
なので、１つの項目を作成したら必ず設定データを保存するようにしましょう。
日持ち項目
「設定を保存」をクリックして、設定を保存したら今度は検索フォーム設定画面の右上にある「項目を追加」をクリックします。
すると、検索フォームで使用する新しい項目が追加されます。
日持ち項目もドロップダウン形式のメニューにします。
ラベルは「日持ち」に設定。
条件の箇所のカスタムフィールドは設定しておいた「日持ち」のカスタムフィールドを選択します。
形式の箇所では「ドロップダウン」を選択しましょう。
ドロップダウンの範囲検索の項目はデフォルトの「しない」という項目を選択することでイコール条件になります。
なので、ここはデフォルトの「しない」を選択します。
次のように設定したら、「設定を保存」をクリックして保存します。
返金保証
日持ち項目を作成したら次は返金保証の項目を作成します。
検索フォーム設定画面の右上にある「項目を追加」をクリックして新しく検索項目設定画面を表示しましょう。
ラベルは「返金保証」に設定します。
条件の箇所のカスタムフィールドは設定しておいた「返金保証」のカスタムフィールドを選択します。
形式の箇所では「チェックボックス」を選択しましょう。
「チェックボックス」の検索項目を選ぶと、画面の右上側に条件の指定項目が表示されます。
ここで、「OR条件」か「And条件」かを選択することができます。
ここでは、「OR条件」を選択するようにしましょう。
設定ができたら「設定を保存」をクリックして設定を保存します。
ここまで言っていると下の方にプレビュー画面で下記のように表示されていると思います。
検索フォームの表示方法
プレビュー画面で表示されている検索フォームを実際のページに表示するには、プレビューの下に表示されているコードを貼り付けたいページの箇所に貼り付けます。
今回はindex.phpの箇所にコードを貼り付けます。
すると次のように表示されると思います。
ちなみに今回の画面で使用しているテーマは、WordPressのデフォルトの「twentyseventeen」を使用しています。
また、検索結果は基本的に次の順でテンプレートが呼ばれるようです。
search.php ＞ home.php ＞ index.php
ソート項目の追加
実際に検索フォームを表示して、検索機能をつけることができました。
次は、ソート項目の追加について紹介していきます。
管理画面メニューの「検索」ー＞「ソート設定」をクリックします。
すると次のようなソート設定画面が表示されます。
ここで、それぞれソートの項目を設定していきます。
ここでは先程作成した検索項目のソートを作成していきます。
値段のソート項目
ラベルの項目は「値段」と設定します。
そのあと、ターゲットの箇所でカスタムフィールドを選択。
どのカスタムフィールドかを選ぶ項目が表示されますので、その中から「値段」の項目を選択して、「数値」を選びましょう。
次は、昇順テキスト/画像の項目に「▲安い順」、降順テキスト/画像に「▼高い順」と入力します。
入力が終わったら、「設定を保存」をクリックして設定したデータを保存するようにしましょう。
日持ちのソート項目
ラベルの項目は「日持ち」と設定します。
そのあと、ターゲットの箇所でカスタムフィールドを選択。
どのカスタムフィールドかを選ぶ項目が表示されますので、その中から「日持ち」の項目を選択して、「数値」を選びましょう。
次は、昇順テキスト/画像の項目に「▲短い順」、降順テキスト/画像に「▼長い順」と入力します。
入力が終わったら、「設定を保存」をクリックして設定したデータを保存するようにしましょう。
返金保証のソート項目
ラベルの項目は「返金保証」と設定します。
そのあと、ターゲットの箇所でカスタムフィールドを選択。
どのカスタムフィールドかを選ぶ項目が表示されますので、その中から「返金保証」の項目を選択して、「文字列」を選びましょう。
次は、昇順テキスト/画像の項目に「▲あり順」、降順テキスト/画像に「▼なし順」と入力します。
入力が終わったら、「設定を保存」をクリックして設定したデータを保存するようにしましょう。
すべて入力すると次のような形になっているかと思います。
ここまで入力できていればあとは、プレビューの下にあるサンプルコードの中にあるコードをソートを表示したいところに貼り付けます。
ただし、現状のFE Advanced Searchでは一度検索をしないとソートの機能がうまく働かないみたいなので、ユーザー側に一度検索フォームをクリックしてもらう必要があります。
まとめ
いかがだったでしょうか？
今回の内容おそらく、だいたいFE Advanced Searchの使う時の流れなどが把握できたのではないかと思います。
今回は次のような流れで商品検索サイトを作成しました。
Advanced Custom FieldsとFE Advanced Searchのプラグインセット。
Advanced Custom Fieldsのセットアップ。
商品情報追加。
FE Advanced Search
今回紹介した内容が全てというわけではありませんが、この記事があなたの普段の活動の助けになれば嬉しいです！
