訪問者がコンテンツやデータを絞り込めるようにする

Viewを使って抽出したコンテンツやデータを、カスタムフィールドの値などをキーにして、訪問者が任意に絞り込めるようにすることもできます。なお、Toolsetでは、フロントエンド用の検索機能を「Custom Search(カスタムサーチ)」と呼びます。

作業の基本的な流れは、すでに説明したViewの作り方と同じですが、カスタムサーチではQueryセクションとLoopセクションに加えて、絞り込みの機能を制御するための「Filterセクション」を使用します。

Filterセクションの表示方法

ViewでFilterセクションを使用するには、以下の2つの方法があります。

訪問者がコンテンツやデータを絞り込めるようにする

Viewの新規作成時の画面で「Display the results as a custom search」をクリックする方法。

訪問者がコンテンツやデータを絞り込めるようにする

既存のViewを変更する場合は、View編集画面で表示オプションを開き、View purpose(使用目的)を変更する方法。

Custom Searchの作り方

訪問者がコンテンツやデータを絞り込めるようにする

作業の流れ

シンプルな以下の例を使って、料理の一覧を料理国籍で絞り込むCustom Searchを作ってみます。

  • カスタム投稿タイプ:「料理」
  • カスタムフィールド:「料理のサブタイトル」「料理の写真」
  • カスタムタクソノミ:料理国籍
  • 環境:WordPress 4.9.8 (Twenty Seventeen テーマ)

訪問者がコンテンツやデータを絞り込めるようにする

① Search and Pagination エディタの [wpv-filter-controls][/wpv-filter-controls]の間にカーソルを移動し、New filter をクリックします。

訪問者がコンテンツやデータを絞り込めるようにする

② キーとして利用したいフィールド等(ここでは料理国籍)をクリックします。

訪問者がコンテンツやデータを絞り込めるようにする

③ ドロップダウンやチェックボックスなど、キーを指定するための要素の型を選び、右下の Insert Shortcode をクリックします。

訪問者がコンテンツやデータを絞り込めるようにする

④ エディター内にコントロールパーツが挿入されました。続いて「Submit button」をクリックします。

訪問者がコンテンツやデータを絞り込めるようにする

⑤ 検索ボタンの名前(ラベル)をつけて、Insert Shortcode をクリックします。
後で装飾する場合は、必要に応じてclassなども指定します。

訪問者がコンテンツやデータを絞り込めるようにする

⑥ 検索ボタン用のコントロールパーツが挿入されました。

訪問者がコンテンツやデータを絞り込めるようにする

⑦ 例えば、こんな感じでコントロールパーツをHTMLで装飾します。
※ここでは解説のため便宜styleを使って記述しましたが、CSSを使う場合はエディタの真下にあるCSS editorに記述しましょう。

最後に、エディター下にある「Save」ボタンか画面上部の「Save all sections at once」をクリックして保存します。出来上がったViewを投稿ページに挿入して表示してみましょう。

訪問者がコンテンツやデータを絞り込めるようにする

こんな感じにドロップダウンと検索ボタンが表示されました。

訪問者がコンテンツやデータを絞り込めるようにする

「中国」を選択して検索ボタンをクリックすると、正しく絞り込みができました。

Filterセクションの詳細

Filterセクションの設定項目などについて詳しく知りたい方は以下のページを参照してください。

Toolset JP Guide

ページ上部へ戻る