Toolset Views:Filterセクションの設定と使い方

Toolset Views:Filterセクションの設定と使い方

View作成画面のFilterセクションでは、Queryセクションで抽出したWordPress内のコンテンツを、カスタム検索機能を使ってサイト訪問者が自由に検索・絞り込み出来るようにしたり、検索結果が複数ページに渡る場合にページ送り(ページネーション)ができるようにするための機能を設定・スタイリングします。

Filterセクションの画面構成

Filterセクションは、「Pagination and Sliders Settings(ページ送りとスライダー)」「Custom Search Settings(カスタム検索)」「Search and Pagination(Filterセクション用エディタ)」の3つのパートで構成されています。さらに各パート内の選択(ラジオボタン)に応じて、追加の設定項目が表示されるものがあります。

新規View作成時に選択したViewの種類によっては、Filterセクションや一部のパートが非表示になっている場合があるので、その場合はView編集画面最上部右の「表示オプション」から該当部分にチェックを入れると表示することができます。

Pagination and Sliders Settings パート

抽出結果を一度にいくつ表示するかやページ送り時の挙動を制御します。このパートの設定次第で、画像などのコンテンツを手動または自動で切り替えるスライダーも簡単に作成できます。

  • No pagination
    抽出結果を一度にすべて表示します。ページ送りやスライダーを使用しません。
  • Pagination enabled with manual transition and page reload(手動)
    Search and Pagination(Filterセクション用エディタ。以下、単にエディタと記述します)を使ってページ送りボタンを配置できます。ページ送りボタンをクリックするとブラウザの画面がリロードされて次のページ(=Viewが抽出したコンテンツ)が表示されます。リロード後のページは、ブラウザのアドレスバーにパラメーターが付与された状態になります。
  • Pagination enabled with manual transition and AJAX(手動+AJAX)
    エディタを使ってページ送りボタンを配置できます。ページ送りボタンをクリックしてもブラウザの画面はリロードせずに、Viewが抽出したコンテンツ部分だけが変化します。手動で切り替えるタイプのスライダを作成する場合などに使用します。
  • Pagination enabled with automatic AJAX transition(自動+AJAX)
    こちらも上の2つと同じようにエディタを使ってページ送りボタンを配置できますが、ページ送りボタンをクリックしなくても自動でコンテンツ部分が変化させることができるので、主に自動スライダを作成する場合に使用します。もちろん、ページ送りボタンのないスライダを作ることも可能です。

Pagination options

前述の「No pagination」以外を選択した時に表示されるオプションの役割は以下のとおりです。

  • Display  〇〇 items per page
    1ページに表示させるアイテム(抽出したコンテンツ)の数を1~50の間で設定できます。例えばシンプルなスライダを作成するなら1に設定します。
  • Show each page for:  〇 seconds
    ページ(スライド)を自動で切り替えるまでの待機時間(1ページあたりの表示時間)を秒数で指定できます。※「自動+AJAX」選択時のみ。
  • Pause pagination transition on mouse hover
    このオプションにチェックを入れるとViewが表示しているコンテンツ(スライド)上にマウスカーソルがある場合に、自動切替を一時停止します。※「自動+AJAX」選択時のみ。
  • Transition effect:  〇〇 with duration  〇〇 miliseconds
    ページ(スライド)切替時のアニメーション効果のタイプと所要時間を設定します。※「手動+AJAX」および「自動+AJAX」選択時のみ。
    アニメーション効果はFade(フェード)、Slide left(左にスライド)、Slide Right(右にスライド)、Slide UP(上にスライド)、Slide Down(下にスライド)の5種類、所要時間は次のスライドに完全に切り替わるまでの時間で、初期値は500ミリ秒(=0.5秒)です。

Pagination options の Advanced options

「自動+AJAX」選択時には、さらに詳細なオプションが利用できます。

Browser history management(ブラウザの履歴管理)

Update the URL of the page when paginating the View にチェックを入れると、ページ送りのたびにブラウザの履歴が蓄積されるので、ブラウザで戻るボタンでひとつ前のページ(Viewが抽出したコンテンツ)を表示できます。

このオプションは検索向けのViewには適していますが、スライド向けのViewの場合はオフにしておくことをお勧めします(自動スライドによって履歴が増大しブラウザの戻るボタンのユーザビリティが損なわれるため)。

Cache and preload(キャッシュと先読み)

以下のオプションは表示速度を向上させるためのものです。特に問題がなければ、デフォルト値(ON)のままで良いでしょう。

  • Preload images before transition
    チェックを入れると、ページ(スライド)切替前に、次のページの画像を事前に読み込みます。
  • Cache pages
    チェックを入れると、表示したページ(スライド)をキャッシュします。
  • Pre-load the next and previous pages – avoids loading delays when users move between pages
    チェックを入れると、前後のページ(スライド)を事前に読み込みます。
  • Pages to pre-load: 〇〇
    先読みするページ数を1~19の間で設定します。

Spinners(読み込み中のアイコン)

ページ(スライド)切替時に表示される回転するアイコン(スピナー)の種類を指定することができます。なお、設定してもページの読み込みに遅延が全くない場合は表示されません。

  • Spinner graphics from Views
    Viewsプラグインに内蔵されているアイコンから選択できます。
  • My custom spinner graphics
    自分で用意したスピナー画像(アニメーションGIF)を使いたい場合に選択します。Upload Imageボタンをクリックしてメディアライブラリから画像を指定するかアップロードします。
  • No spinner graphics
    スピナー画像を使用しない場合はこちらを選択します。

Callback function

ページ(スライド)切替後に実行するJavaScript関数を指定できます。デフォルト値はブランクです。

Custom Search Settings パート

このパートでは、訪問者が検索キーを指定してViewの情報を絞り込んだ際の画面の挙動を制御します。

  • Full page refresh when visitors click on the search button
    検索ボタンをクリックした時に、表示中のページ全部を更新(リロード)して結果を表示します。リロード後のページは、ブラウザのアドレスバーに検索パラメーターが付与された状態になります。
  • Full page refresh when visitors click on the search button with input values auto-updating
    検索ボタンをクリックした時だけでなく、例えば、チェックボックスやラジオボタンなどの検索キーの値が変更されると自動的に、ページを更新して絞り込み結果を表示します。
  • AJAX results update when visitors click on the search button
    検索ボタンをクリックした時に、ページを更新せずに、Viewの絞り込み結果だけを更新して表示します。上の2つと違って、アドレスバーに検索パラメーターが付与されません。
  • AJAX results update when visitors change any filter values
    検索ボタンをクリックした時だけでなく、例えば、チェックボックスやラジオボタンなどの検索キーの値が変更されると自動的に、Viewの絞り込み結果だけを更新して表示します。
  • Let me choose individual settings manually
    上記4つの挙動を、より詳細に設定したい場合に選択します。

Let me choose individual settings manually の設定項目

When to update the Views results

  • Update the View results only when clicking on the search button
    検索ボタンをクリックした時だけ、Viewの結果を更新します。
  • Update the View results every time an input changes
    チェックボックスやラジオボタンなどの検索キーの値が変更されると自動的にViewの結果を更新して表示します。

Browser history management

  • Do not adjust URLs after loading search results
    検索結果が更新されてもブラウザの履歴を蓄積しません(ブラウザの戻るボタンを押した場合のページが増加しません)。
  • Update URLs after loading search results(デフォルト値)
    検索結果が更新されるとブラウザの履歴が蓄積されます(ブラウザの戻るボタンを押した場合のページが増加します)。

Javascript settings

Viewの検索結果の更新時に実行するJavaScript関数を指定できます。実行するタイミングは以下の3パターンで指定できます。デフォルト値はいずれもブランクです。

  • 〇〇 will run before getting the new results
    新しい検索結果を取得する前に実行する関数を指定します。
  • 〇〇 will run after getting the new results, but before updating them
    新しい検索結果を取得した後で、表示を更新する前に、実行する関数を指定します。
  • 〇〇 will run after updating the results
    新しい検索結果を表示した後に実行する関数を指定します。

Which options to display in the form inputs

ドロップダウンリストやラジオボタンなど、選択系の検索パーツで選択候補を表示する際、Queryセクションで抽出したコンテンツに選択候補に該当するデータがない場合(=未使用の選択候補がある場合)は、フロントエンドの選択候補の表示から除外することができます。また、すべての候補にデータがない場合は検索パーツ自体の表示を無効化することもできます。

  • Always show all values for inputs
    未使用の選択候補も表示します。
  • Show only available options for each input
    選択パーツの種類ごとに、Disable(すべての候補にデータがない場合にパーツを無効化する)、Hide(未使用の選択候補のみを非表示にする)を選択できます。

Search and Pagination パート

このパートでは、Filterセクション用のエディタを使って、検索用のパーツやページ送り用のパーツを配置・スタイリングします。なお、Viewによる抽出や検索結果を表示する部分については、Loopセクションでおこない、最終的には、Search and Pagination のエディタとLoopエディタとの位置関係を、LoopセクションのOutputエディタで調整します。

Search and Pagination エディタの画面構成

❶ 要素を挿入するためのボタン
  • New filter
    カスタム検索で使用するフィルタ(絞り込み)用のパーツを挿入し、動作やラベル等の設定をします。フィルタに用いるカスタムフィールド等の性質に応じて利用できるパーツの種類(テキストボックス、ドロップダウンリスト、チェックボックス、ラジオボタン等)が異なります。
  • Edit filter
    エディタ内に配置(記述)されたフィルタやボタン、フィールドにカーソルを合わせてからこのボタンをクリックすると、それらの動作やラベルの設定を変更することができます。
  • Text search
    Queryセクションで抽出したコンテンツやタイトルを対象とするテキスト検索ボックス用のパーツを挿入し、ラベル等の設定をします。
    ※ カスタムフィールドを対象とするテキスト検索はこちらではなく、前述の「New filter」で対象のカスタムフィールドを指定します。
  • Submit button
    検索実行用のボタンパーツを挿入し、ラベルやスタイルの設定をします。このボタンを利用するには、前述のFilterやText searchを一つ以上配置する必要があります。
  • Reset button
    フロントエンドで配置したフィルタ用パーツを使って検索を実行した後、フィルターに入力または選択した値(=検索条件)をリセットするためのボタンパーツを挿入します。このボタンを利用するには、前述のFilterやText searchを一つ以上配置する必要があります。
  • Spinner graphics
    検索実行中に表示させる回転アニメーション(スピナー画像)とテキストに関する設定をエディタ内に挿入します。
  • Fields and Views
    WordPress標準のフィールドやカスタムフィールドなどを一覧画面から選択して簡単に挿入することができます。
  • Pagination controls
    ページ送りのためのコントロールパーツを記述する際に使用します。FilterセクションでPagination(ページ送り)を有効にしている場合のみ使用できるボタンです。
  • Sorting controls
    フロントエンドで検索結果を並べ替えるためのパーツ(ドロップダウンリストやラジオボタン)を挿入し、動作やラベル等の設定をします。
  • Access
    Toolset Accessプラグインがインストールされている場合に利用できるボタンで、ユーザー権限に応じて表示させる内容を制御するためのショートコードを挿入します。
    このショートコード内に配置(記述)されたテキストや検索パーツなどの各種要素は、指定したユーザー権限でログインしたユーザーのみ表示または非表示になります。
  • Media
    画像や動画をメディアライブラリにアップロードして挿入するためのボタンです。Grid2カラムや3カラムなど、bootstrapのグリッドを簡単に挿入するためのボタンです。
❷ htmlタグ用のショートカットボタン

html用のタグを挿入するショートカットの他、以下のToolset用のショートカットボタンが利用できます。

  • raw
    [wpv-noautop][/wpv-noautop]
    のショートコードを挿入します。このショートコード内に配置したコンテンツでは、WordPressの自動段落機能が無効化されるので、意図しない改行を防止することができます。
  • format
    [wpv-autop][/wpv-autop] 
    のショートコードを挿入します。このショートコード内に配置したコンテンツでは、WordPressの自動段落機能が有効化されるので、エディタで意図した改行をフロントエンドに反映させたい場合に便利です。
  • Conditional output
    [wpv-conditional if=”"][/wpv-conditional]
    のショートコードを挿入します。このショートコードを使って、カスタムフィールドやViewショートコードの戻り値を判定し、出力内容を条件分岐させることができます。
  • Show Bootstrap buttons
    Bootstrapで使用する要素やCSSを、Bootstrap公式サイトのドキュメントで参照するためのショートカットを開きます。ドキュメントからサンプルコードをコピペして利用するのに便利です。
➌ エディタ部分

Viewで表示させる要素の配置やスタイリングをおこなうための記述をする部分です。なお、デフォルトで記述されているショートコード等の役割は以下のとおりです。これらのショートコード等は、Search and Paginationエディタの記述を正しく動作させるために必須のものなので、消さないように注意しましょう。

  • [wpv-filter-start hide=”false”] と [wpv-filter-end]
    filterセクションの検索部分を機能させるためのショートコードで、検索や絞り込みに関する内容はすべてこのショートコード内に記述する必要があります。したがって、Search and Paginationエディタ内の記述は、原則として[wpv-layout-start] から始まり、[wpv-layout-end]で終わることになります。
    なお、hide=”false” は、Filterセクションのフロントエンドでの表示を制御するためのパラメーターで、この部分をhide=”true” に変更すると、ショートコード内に記述した要素をフロントエンドで非表示にすることができます。通常は hide=”false” のままでOKです。
  • [wpv-filter-controls][/wpv-filter-controls]
    このショートコード内に、前述の検索用のパーツ等(フィルタやボタンに関するショートコード)を記述することで、それらのショートコードが正しく機能します。配置した各パーツのHTMLによるスタイリングもすべて [wpv-filter-controls][/wpv-filter-controls] の中に記述します。
❹ 検索やページ送りパーツの出力時に読み込ませたいCSSの記述エリア

CSS editorと書かれたタイトル部分をクリックすると、このViewを表示する際に適用させたいCSSを記述するエリアが展開します。必要に応じて使用してください。

❺ 検索やページ送りパーツの出力時に実行させたいjQueryの記述エリア

JS editorと書かれたタイトル部分をクリックすると、このViewを表示する際に呼び出したいjQueryなどを記述するエリアが展開します。必要に応じて使用してください。

❻ Search and Paginationエディタの使い方に関するヘルプ

Search and Pagination Editorで利用できるボタンやエディタ内にデフォルトで記述されているショートコードの役割などについて簡単な説明を読むことができます。

Search and Pagination Editor の記述方法

[wpv-filter-controls][/wpv-filter-controls] の中に、エディタ上部の要素を挿入するためのボタンを使って検索用のパーツ類を配置し、必要に応じてHTMLやCSSでスタイリングをおこないます。

なお、ボタンを使って要素を挿入すると、divやlabelなどのHTMLタグが自動で挿入されることがありますが、ショートコードと異なり、必須ではないものがほとんどなので、ご自身のレイアウトに合わせて適宜削除したり、まとめてしまっても大丈夫です。

参考までに、作例のサイトでのフロントエンド部分とエディタ部分1つの画像に並べてみました。

画像左:フロントエンドの検索条件部分
画像右青枠:エディタの記述例

エディタの操作自体は単純なので、慣れてしまえば複数のカスタムフィールドを使った検索・絞り込みのパーツも時間をかけずに実装することができるようになると思います。

なお、Viewによる抽出や検索結果を表示する部分については、Loopセクションでおこないます。これら検索条件と結果部分の位置関係は、LoopセクションのOutputエディタで調整するので、初心者の方は記述場所を間違えないように注意しましょう。

Toolsetの使い方・全目次