サイトにリスト表示されたものを絞り込みができる機能が欲しい！なんて思ったことはありませんか？
Crocoblockの提供するプラグイン、『JetSmartFilters』ならノーコードでサイトにいろいろなタイプの絞り込みフィルターを設置することができます！
実はこれ、そんなにむずかしくはないんですよ。
この記事でバータイプの『スライド式フィルター』、チェックして絞り込む『チェックボックス式フィルター』、色で選ぶ『色の絞り込みフィルター』の作り方の3種類を例にあげて紹介していきます。
また、JetSmartFiltersをつかってサイトにフィルターを装備するにはElementorのテーマビルダーのアーカイブページで作成したリストのテンプレートにJetSmartFiltersの『FILTER』ウィジェットを挿入し実装していきます。
JetSmartFiltersを使ってフィルターをサイトに実装する流れは以下の通りです。
- テーマビルダーのアーカイブページであらかじめ作成したリストテンプレートにFILTERウィジェットを挿入するための新しいカラムを追加する
- JetSmartFiltersで『Add New』で新規ページを追加し、作成するフィルタータイプに合った設定をする
- テーマビルダーのアーカイブページのリストテンプレートの画面に戻り、フィルタータイプと同じ名称の『FILTER』ウィジェットを挿入し編集する
さっそくJetSmartFiltersをつかいフィルターを作成してみましょう！
JetSmartfiltersの使い方を動画でご覧になりたい方はこちらからどうぞ！
>>番外編ですがJetSmartFiltersとJetEngineのRating filterウィジェットを使って、星フィルターを表示させる方法を説明した動画もあります！
>>こちらはJetSmartFiltersのSorting filterウィジェットを使って、評価の高い順や低い順に、並び替える方法を実演した動画です。
JetSmartFiltersを入れるための下準備
JetSmartFiltersでサイトにフィルターを実装するにあたり、『野菜』を一覧表示させたサイトをサンプルに使用していきます。
このようなリストのテンプレートの作り方はJetEngineの『Listings』を紹介した記事でご確認いただけます！
まず、テーマビルダーのアーカイブページで作成した『野菜のリスト』の編集画面を開きます。
すると以下のように野菜のリストのテンプレートの編集画面が開きますので、JetSmartFiltersを入れるために新しいカラムを追加します。
- 『カラム』のボタンをクリック
- 『+新しいカラムの追加』をクリック
新しいカラムが画面に追加されたら、カラムの配置の変更や好みの幅に調整してください。
JetSmartFiltersで絞り込みフィルターを作成する方法
まず、JetSmartFiltersをインストールしていない方は、ダッシュボードの左側の『Crocoblock』の画面からインストールを行なってください。
JetSmartFiltersがサイトにインストールされると、ダッシュボードの左側に『Smart Filters』と表示されます。
＞＞YouTubeライブでJetSmartFiltersをインストールする方法を解説した動画がありますのでこちらをぜひ参考にしてください！
- ダッシュボード左側の『Smart Filters』をクリック
- 画面上部の『Add New』をクリック
するとこのように『Add New Filter』というフィルター作成画面が表示されます。
ここまではどのタイプのフィルターを作成する場合も同じ手順ですが、以下でタイプ別のフィルター設定の方法を紹介します。
スライド式の絞り込みフィルター（Range）の作り方
1.新規追加したSmartFiltersの各種設定をする
- 『タイトルを追加』に作成するフィルター名を記入する
このサンプルでは『価格フィルター』とします。 - 『Filter Labels』の『Filter Label』と『Active Filter Label』を記入
ここは実際のサイトの画面のフィルター名として反映される部分です。
このサンプルでは『価格』にします。
また、これら2つの表記は同じでOKです。 - 『Filter Settungs』の『Filter Type』で『Range』を選択
- 『Min Value』を記入
Min Valueは絞り込みするものの単位の最低値を記入します。
このサンプルでは野菜の価格なので『10』（円）とします。 - 『Max Value』を記入
Max Valueは絞り込みするものの単位の最高値を記入します。
このサンプルでは『5000』（円）とします。 - 『Step』を記入
こちらはどのいくら刻みで絞り込むかの単位です。
このサンプルでは『10』（円）単位で絞り込みできるようにします。
次にJetEngineの『Post Type』で作成した『野菜』の編集ページ（絞り込みをするものの情報があるPost Type）に行きます。
『Meta fields』の『価格』の『Name/ID』をコピーします。
※このサンプルのName/IDは『price』になります。
以下はSmart Filterのエディターの『Query Settings』です。
『Query Variable*』に先ほどコピーしたPost TypeのMeta Fieldの『Name/ID』(price)をペーストします。
画面右側の青い『公開』ボタンをクリックします。
次にテーマビルダーのアーカイブページで作った『野菜のリスト』の編集ページを開きます。
2.テーマビルダーのリストのテンプレートに『Range Filter』ウィジェットを挿入し編集する
JetSmartFiltersをサイトにインストールすると『FILTERS』というオリジナルウィジェットが追加されますので、今回はその中の『Range Filter』ウィジェットを使用していきます。
『Range Filter』ウィジェットを新しく追加したカラムにそラッグ＆ドロップで挿入します。
『Range Filter』を挿入しただけだと以下のように画面にはまだ何も表示されません。
『Select Filter』で JetSmartFiltersで追加したアイテムを検索し選択します。
このサンプルでは、このRangeを作成するためにJetSmartFiltersで作った『価格フィルター』を選択します。
すると以下のように価格を絞り込む『Range』のバーが表示されます。
次に『This filter for』のリストから『JetEngine』を選択します。
※このサンプルではこのアーカイブページをJetEngineのListing Gridを用いて作ったので『JetEngine』を選択しますが、このページのソースを元に適するものを選択してください。
次に、これが一体何の絞り込みフィルターなのかがわかるように『Show filter label』を『Yes』にしましょう。
すると上記のように『価格』と表示されます。
これでスライド式の絞り込みフィルターの『Range』の設定は完了です。
あとは自由にスタイルをし、配置や大きさ、色を変更してください。
こちらはプレビュー画面です。
上記のサンプルでは価格フィルターが『10-5000（円）』の範囲すベてが選択されているため、すべての野菜のリストが表示されている状態です。
上記は実際に『価格』のフィルターのカーソルを調整し、価格を『2000−4000（円）』に絞り込みしたときの表示画面です。
野菜のリストが絞り込みした価格の範囲のものが表示されているのがお分かりいただけると思います！
このようにして、JetEngineとJetSmartFiltersを併用してフィルターを作成していきます。
しかしフィルタータイプにより設定方法や使用するJetSmartFiltersのウィジェットが異なるため、以下で別のフィルターの追加の仕方をさらにご紹介します。
チェックボックス式の絞り込みフィルターの作り方
チェックボックス式のフィルターを作る手順を以下で紹介していきます。
先ほどのフィルターと同じように、JetEngineのPost Typeで作成した『野菜』のMetaデータをフィルターにしていきます。
このサンプルでは『生産者』（生産農家）のフィルターを作成していきます。
1.JetSmartFiltersを新規追加しチェックボックス式フィルターに適した設定をする
JetSmartFiltersを追加し、各種設定を行います。
『Filter Settings』のみ異なるだけで他は最初に紹介した『Range』の設定と同じです。
チェックボックス式のフィルターの設定は以下の手順をフォローしてください。
- 『タイトルを追加』に作成するフィルター名を記入する
このサンプルでは『生産農家フィルター』とします。 - 『Filter Labels』の『Filter Label』と『Active Filter Label』を記入する
このサンプルでは『生産農家』にします。 - 『Filter Settings』の『Filter Type』で『Checkboxes list』を選択
- 『Data Source』で『Custom Fields』を選択
- 『Custom Field Key』にMeta Fieldsの該当するName/IDを記入する
このサンプルでは『producer』と記入します。 - 『Get Choices From Field Data』を『ON』にする
- 『Field Source Plugin』で『JetEngine』を選択
※ここで『ACF』という選択もあるのは、ACFからも情報を持ってこれるからです。 - 『Query Settings』の『Qurry Valuable*』に該当するMeta Fieldの『Name/ID』を記入
このサンプルでは『producer』と記入します。 - 『公開』をクリック
2.テーマビルダーのリストのテンプレートに『Checkboxes Filter』ウィジェットを挿入し編集する
テーマビルダーで作成した『野菜のリスト』のアーカイブページに『Checkboxes Filter』をドラッグ＆ドロップで挿入します。
『Select filter』で作成した Smart Filter名を検索し選択します。
このサンプルではSelect filterは『生産農家フィルター』になります。
すると上記のように、各チェックボックスに1つの生産農家名が表示されました。
『This filter for』で『JetEngine』を選択します。
『Show filter label』を『Yes』にします。
すると『生産の農家』というラベルが表示されます。
これで『Chekboxes Filter』の基本的な設定は以上です！
配置や色などは各自自由にスタイルしてください。
以下はチェックボックス式フィルターのプレビュー画面です。
上記は『生産農家』のフィルターで『すずき農園』にチェックをしたときの表示画面です。
すずき農園で栽培されている野菜のみが絞り込まれて表示されました。
余談ですが、野菜のリストの『詳細を見る』をクリックすると以下の画面が表示されるようにしてみました。
こちらは『すずき農園』の詳細情報と生産している野菜が動的にリスト表示されるようにしています。
この部分は『JetSmartFilters』とは関係がないですが、このような動的なリストをJetEngineの『Listings』と『Relations』を使えばノーコードでえ作成できてしまいます！
Checkboxes listとRadioの違いは？
フィルタータイプに『Checkboxes list』と『Radio』があり、これらはどちらも選択式のフィルターで、見た目や動作がとても似ています。
それらの違いを以下で見ていきましょう。
Checkbox list
フィルタータイプを『Checkboxes list』で作成したフィルターは、一度に複数の項目を選択することができます。
『Checkbox list』のフィルターと『Radio』のフィルターどちらも装備した場合、 Chekboxes listフィルターでアイテムを絞り込んだ後にRadioフィルターでの絞り込みも可能になります。
Radio
RadioもCheckboxes listも、サイトに装備するとまったく同じ見た目になります。
しかし、Radioで作成したフィルターには以下の特徴があります。
- チェック可能な項目は一つのみ
- Radioで作成したフィルターに一度チェックをすると、Checkboxes listで作成したフィルターは作動しなくなり、チェックはリフレッシュしない限り解除できない
Radioを使用するときは以上の注意を踏まえた上で使用しましょう！
色で絞り込むカラーフィルターの作り方
色で絞り込むタイプのフィルターの作り方を以下で紹介します。
1.新規追加したSmart Filterの各種設定をする
色のフィルターの設定手順は以下をフォローしてください。
- 『タイトルを追加』に作成するフィルター名を記入する
このサンプルでは『色フィルター』とします。 - 『Filter Labels』の『Filter Label』と『Archive Label』を記入する
このサンプルではどちらも『野菜の色』とします。 - 『Filter Settings』の『Filter Type』で『Visual』を選択
- 『Data Source』で『Manual Input』を選択
- 『Type』で『Color』を選択
- 『Behavior』でCheckboxまたはRadioを選択
このサンプルでは『Checkbox』を選択します。
また、これらの違いについてはこの記事の『Checkboxes listとRadioの違いは？』のセクションをご覧ください。
次に『Option List』を編集します。
- 『+NEW OPTION』をクリック、するとタブが表示される
- 『Label』を記入する
ここはPost Typeに作成した『色』のMeta fieldの『Field Option』に作成した『Option label』の情報を記入します。 - 『Value』を記入する
ここはPost Typeに作成した『色』のMeta fieldの『Field Option』に作成した『Option
Value』の情報を記入します。 - 『Color』でカラーパレットから色を選択する
この作業をMeta fieldに追加した『色』の数だけ繰り返します。
さらに以下の設定を行います。
- 『Is Checkbox Meta Field (JetEngiene)』を『ON』にする
- 『Query Settings』の『Query Variable*』にMeta fieldの『Name/ID』を記入
最後に画面右側の『公開』をクリックします。
2.テーマビルダーのリストのテンプレートに『Visual Filter』ウィジェットを挿入し編集する
テーマビルダーで作成した『野菜のリスト』のアーカイブページに『Visual Filter』をドラッグ＆ドロップで挿入します。
以下の手順でコンテンツタブの編集を行ってください。
- 『Select filter』でJetSmart Filterで作成したフィルター名を検索し選択する
このサンプルでは『色フィルター』になります。 - 『This filter for』で『JetEngine』を選択する
- 『Show filter label』を『Yes」にする
すると上記のように色別のフィルターが表示されました！
ここではくわしい設定の説明を省きましたが、スライド式のRangeフィルターの作り方で同じ説明をしていますのでそちらを参考にしてください。
また、スタイルで配置や大きさなどの設定を自由に行なってください。
以下はプレビュー画面です。
このように『赤』を選択したら赤い色の野菜のみが絞り込まれて表示されました！
まとめ
JetSmartFiltersを使えば、Metaデータを呼び出してどんなものでも簡単にリストの絞り込みができるフィルターをノーコードで作ることができます！
また、フィルターもバータイプのものから、選択式のものまで多種多様です。
ここではすべてのフィルタータイプを紹介できませんでしたが、色々と試してみてくださいね！
この記事の内容をおさらいしましょう。
- JetSmartFiltersはテーマビルダーのアーカイブページで作成したリストテンプレートの中で構築する
- JetSmartFiltersでフィルターを作成する前に、テーマビルダーのアーカイブページにFILTERウィジェットを挿入するためのカラムを新しく追加しておく
- JetSmartFiletersのフィルターを作成する際の設定の『Query Valuable』は作成するフィルターに該当するMeta Fieldで設定した『Name/ID』を入れる
- Filterウィジェットは JetSmartFiltersで選択した『Filter Type』と同じ名前のウィジェットを選び挿入する
『JetSmartFilters』はCrocoblockの根幹とも言えるプラグイン、『JetEngine』と組み合わせて使用するとより凄まじいパワーを発揮します。
今回の記事では正にJetEngineで作成したMetaデータから情報を呼び出しフィルターを作成しました。
また、この記事のサンプルとして使用した野菜一覧を表示したサイトはJetEngineの『Lstings』を用いて作成されたものです。
CrocoblockでJetEngineは26ドル/年、JetSmartFiltersは24ドル/年で使用が可能、またすべてのJetプラグインが使い放題のプランも年契約から買い切りと幅広く取り揃えられています。
こちらをクリックすると»Crocoblockのメンバーシップ購入画面にジャンプします。
また、Crocoblockのメンバーシップ【JetEngine】の購入からアクティベートする方法の記事もありますのでぜひ、参考にしてください！
ぜひ、Crocoblockの提供する『JetSmartFilters』を使用してみてはいかがでしょうか？