【ACF】カスタムフィールドを絞り込み検索|VK Filter Search Proプラグインでカスタマイズを実装

そんな悩みを解決します。

WordPressのACF（Advanced Custom Fields）プラグインを利用すると、管理画面上にカスタムフィールドの入力画面を設置できます。「作成したカスタムフィールドをキーに、絞り込み検索フォームを作りたい！」みたいな時ってありますよね？

まずは今回のデモサイトです↓

→デモサイトを開く

デモサイトは、ACFで作成したカスタムフィールドやCustom Post Type UIで作成したタームを用いた絞り込み検索機能を実装しています。

デモサイトの構成などを簡単に紹介します。

ACFの絞り込みデモサイト

デモサイトの環境と構成についてです。

デモサイトはワイン専門のカタログ型サイトです。好みのワインを「原産国」、「価格」などで絞り込み検索できるようにしています。

デモサイトの環境

	バージョン
WordPress	6.6.2
テーマ：SWELL	2.12.0

デモサイトで有効化しているWordPressテーマはお気に入りのSWELLです。

絞り込みフォームの概要

検索フォーム上の「種類」や「原作国」といった検索キーはカテゴリー、ターム、カスタムフィールド。カテゴリーはWordPress標準。タームは無料プラグインのCustom Post Type UIで作成。カスタムフィールドはACFプラグインです。

検索フォームはWordPress無料テーマLightningを開発会社、ベクトルの絞り込み検索プラグインを活用しています。

絞り込み検索プラグインは有料ですが、買い切りタイプで複数サイトに使えてアップデートとサポートが無料、制作者ライセンス的な追加料金もないので個人的に愛用しています。

公式　絞り込み検索プラグインをダウンロード

価格をカスタムフィールドで絞り込み設定

デモサイトの価格はACFでカスタムフィールドを設定したものを絞り込み検索のキーにしています。

価格についてはACFの管理画面で次の設定をしています。

ACFの設定

フィールドタイプ	番号
フィールドラベル	価格
フィールド名	fee
初期値	0

ポイントはフィールドタイプを番号にしている点です。

エディターで投稿を作成時、編集画面下部に表示されるメタボックスで価格を入力するという運用を想定しています。

フィールドタイプを番号に設定しているため、保存するデータは必ず数字になります。運用者が数字以外を入力することはできません。

検索フォームの設置方法

サンプルサイトでは絞り込み検索をサイドバーに表示しています。

ザックリとした作業の流れですが、検索フォームはVK Filter Seach Proの管理画面上で作成。その後ウィジェット上に配置という感じです。

次の画像はVK Filter Search Proプラグイン有効後の管理画面です↓

カスタム投稿のような画面ですね。ちなみに管理画面上で何個でも絞り込み検索フォームを作成できます。

フォームの作成はブロックエディター上での作業です。次の動画は公式動画なんですが、フォーム作成のイメージがつかめます↓

標準的な検索機能は、カスタムフィールドを対象外としています。

ACFで作成したカスタムフィールドを絞り込み検索の対象にする場合は、フォームの絞り込み検索画面でVK Custom Field Search Proブロックを挿入しましょう↓

カスタムフィールドの設定オプション

カスタムフィールドの絞り込みフォームでは比較演算子の設定オプションがあります。比較演算子は「〇〇と同じ」。とか、「○○より数値が上」みたいな設定のことです。

例えば価格のカスタムフィールドで、ユーザーが100円を指定した場合の挙動を、100円以下として処理するのか、100円以上として処理するのかを指定するという使い方です。

次の画像は、価格の絞り込み検索の様子です↓

ユーザーが70,000円を指定しています。演算子の設定では「低い/前」を指定しているため、70,000円より下の価格帯の商品が絞り込み検索の対象として表示されます。

比較演算子の設定を「高い/後」にした場合は、先ほどとは逆に70,000円より上の価格帯の商品が表示されます。

VK Filter Search Proの管理画面上には、カスタムフィールドの検索時に次の比較演算子オプションがあります。

比較演算子のオプション

絞り込み検索のデモサイト

VK Filter Search Proで作成したデモサイトです。

FAQ

まとめ

ACFで作成したカスタムフィールドを絞り込み検索するカスタマイズメモでした。