カスタムフィールドは、WordPressサイトに追加情報を表示するための強力な方法です。
たとえば、製品のSKU、色、レシピの材料、不動産の価格などの詳細を保存するために使用できます。
しかし、このデータを訪問者が操作できる方法で表示することは、しばしば困難です。
ここで、カスタムフィールドのフィルターを作成すると、ユーザーが結果を絞り込み、必要なものを正確に見つけるのに役立ちます。幸いなことに、ユーザーがこのカスタムデータに基づいてコンテンツを並べ替える簡単な方法があります。
この記事では、WordPressでカスタムフィールドフィルターを作成する方法を説明します。
サイトでカスタムフィールドフィルターが重要な理由
経験から、カスタムフィールドは追加データを保存するのに役立つことはわかっています。しかし、訪問者がコンテンツの並べ替えに使用できない場合、そのデータは役に立ちません。
オンラインでシャツを購入しようとしているのに、サイズがあるかどうかを確認するためにすべての製品をクリックしなければならないと想像してみてください。これは、フィルターがカスタムフィールドに接続されていない場合に発生することとまったく同じです。
不動産ウェブサイトを例にとってみましょう。カスタムフィールドを使用して、寝室の数や家の総平方フィートを保存している場合があります。
これらのフィールドにフィルターがないと、3ベッドルームの家を探している家族は、すべてのスタジオアパートのリストをスクロールしなければなりません。
これはフードブログにも当てはまります。カスタムフィールドが、カロリー数や調理時間などの特定の詳細に使用されているのをよく見かけます。
訪問者が30分でできる簡単な食事を探している場合、それを見つけるために長いスロークッカーのレシピをすべて読む必要はないはずです。
訪問者は物事をすばやく見つけたいと思っています。価格、場所、または特定の材料でフィルターをかけられない場合、サイトを離れる可能性が高くなります。
これらの特定のフィルターを追加することは、追加データとユーザーエクスペリエンスの間のギャップを埋めます。散らかったリストを有機的なカタログに変えます。
次に、WordPressでカスタムフィールドフィルターを簡単に設定する方法を見てみましょう。
WordPressでカスタムフィールドフィルターを作成する
カスタムフィールドフィルターを追加する最も簡単な方法は、WPFiltersのようなプラグインを使用することです。
WPFiltersは、最も機能が豊富で初心者にも使いやすいフィルタリングプラグインであり、AmazonスタイルのフィルターをWordPressサイトに追加できます。
これにより、カテゴリ、タグ、またはカスタムデータに基づいてカスタムフィルターセットを構築し、サイトのどこにでも配置できます。
これにより、訪問者はコンテンツをドリルダウンして、必要なものを数秒で見つけることができます。
WPFiltersは、SearchWPの背後にあるのと同じチームによって構築されています。これにより、検索結果と完全に連携することが確信できます。
WPFiltersを使用すると、単純なテキストフィールドをチェックボックス、ドロップダウン、範囲スライダー、ラジオボタンなどのフィルターに変換できます。これにより、カスタムデータのパワーを訪問者の手に委ねることができます。
次に、サイトでカスタムフィールドフィルターを作成するためにそれを使用する方法を見てみましょう。
ステップ 1: WPFilters のインストールと有効化
まず、WPFiltersのコピーを入手するためにSearchWPのウェブサイトにアクセスする必要があります。
サインアップ後、アカウントエリアにログインし、「ダウンロード」タブをクリックしてください。
ここで、「WPFiltersのダウンロード」ボタンをクリックしてファイルをコンピューターに保存します。後で必要になるので、ライセンスキーを今コピーしておくこともお勧めします。
次に、プラグインをサイトにアップロードしてインストールする必要があります。これに慣れていない場合は、WordPressプラグインのインストール方法に関するこのガイドを参照してください。
有効化すると、セットアップウィザードが表示されます。初期セットアップを完了するには、「開始する」ボタンをクリックしてください。
ステップ 2: 新しいフィルターエレメントの作成
開始するには、WordPressダッシュボードから「WPFilters » Elements」に移動するだけです。
次に、「新規追加」ボタンをクリックしてフィルターの構築を開始します。
ここからは、フィルターにわかりやすい名前を上部に入力します。これにより、後で複数のフィルターを作成する場合でも、管理が容易になります。
次に、「フィールドタイプ」セクションを確認します。チェックボックス、ドロップダウンメニュー、スライダー、ラジオボタンなど、フィルターの表示方法を選択できます。
たとえば、価格でフィルターしたい場合はスライダーが最適です。複数のオプションを使用して商品を並べ替えたい場合はチェックボックスが便利です。ブランドを選択する場合はドロップダウンが適しています。
検索フィルターフィールドを使用して、ユーザーが特定のキーワードでフィルターすることもできます。
ステップ3：フィルターをカスタムフィールドに接続する
次に、フィルターが情報を取得する場所を指示する必要があります。これを行うには、下にスクロールして「データソース」セクションに移動します。
次に、ドロップダウンメニューをクリックし、「カスタムフィールド」セクションまでスクロールします。ここから、フィルターを作成するために使用したいカスタムフィールドを選択できます。
たとえば、価格、色、ブランド、重量、長さ、その他の製品属性を選択できます。
WPFiltersは、Advanced Custom Fields (ACF)のようなカスタムフィールドプラグインともシームレスに連携します。サイト上のACFのいずれに対しても簡単にフィルターを作成できます。
ステップ 4: フィルター設定のカスタマイズ
データソースを接続した後、フィルターを訪問者にとって見栄えの良いものにするためにカスタマイズする必要があります。
まず、下にスクロールして「コンテナ」セクションに移動し、フィルターボックスの動作を変更することから始めます。
たとえば、「タイトルを表示」オプションを有効にすると、「価格帯」や「材料」のように、ユーザーは何をフィルターしているのかを知ることができます。
または、「折りたたみ可能」オプションをオンにして、ユーザーがフィルターを非表示にしてスペースを節約できるようにすることもできます。また、「水平」オプションを使用して、長い縦長のリストではなく、選択肢を横並びに配置することもよく行います。
次に、その下の「アイテム」セクションを確認して、リスト内の特定の選択肢を制御します。
ここでは、「アイテム数」を有効にして、各オプションに存在する結果の数を正確に表示し、ユーザーの期待を設定するのに役立ちます。通常、「空を表示」はオフにしておくことをお勧めします。これにより、訪問者はゼロ結果につながるオプションをクリックして時間を無駄にすることがなくなります。
すべてがどのように見えるかに満足したら、一番上までスクロールして、右上にある「保存」ボタンをクリックするだけです。
左側のパネルにカスタムフィールドフィルターのプレビューも表示されます。
ステップ5：サイトにカスタムフィールドフィルターを表示する
WPFiltersの最も良い点は、新しいフィルターをウェブサイトのどこにでも配置できることです。
フィルターをサイトのページやサイドバーに追加する方法を見てみましょう。
1. ページにカスタムフィールドフィルターを追加する
プラグインは、フィルターを作成する際に組み込みの埋め込みオプションを提供します。右上にある「埋め込み」ボタンをクリックするだけです。
次に、さまざまな埋め込みオプションから選択できるポップアップウィンドウが開きます。
開発者であれば、Gutenbergブロック、ショートコード、またはPHPコードから選択できます。
既存のページにフィルターを追加するか、新しいページを作成するオプションもあります。
たとえば、「Gutenbergブロック」を使用し、新しいページに追加したいとします。
次に、新しいページの名前を入力し、「開始」ボタンをクリックする必要があります。
カスタムフィールドフィルターが新しいページにプリロードされ、WordPressコンテンツエディターで表示できます。
次に、右上にある「公開」ボタンをクリックできます。
一方、WPFiltersブロックを任意のページまたは投稿に手動で配置することもできます。
まず、フィルターを表示したいページまたは投稿を開き、プラス（+）ボタンをクリックして新しいブロックを追加し、「WPFilters Element」を検索します。
次に、設定パネルから作成したフィルターを選択する必要があります。
「要素を選択」オプションの下にあるドロップダウンメニューをクリックして、フィルターを選択するだけです。
完了したら、「保存」ボタンをクリックします。
2. サイドバーにカスタムフィールドフィルターを追加する
ウェブサイトのサイドバーにフィルターを追加することもできます。これは、フィルターをユーザーに常に表示しておくための優れた方法であり、ユーザーは適切な製品やコンテンツをすばやく並べ替えたり見つけたりできます。
まず、WordPressダッシュボードから「外観 » ウィジェット」に移動できます。これは、使用しているWordPressテーマによって異なる場合があることに注意してください。
次に、サイドバーセクションまでスクロールダウンし、「+」記号をクリックして「WPFilters Element」ウィジェットブロックを追加します。
ここから、右側の設定パネルから作成したカスタムフィールドフィルターを選択できます。
「要素を選択」ドロップダウンメニューをクリックして、フィルターを選択するだけです。
完了したら、「更新」ボタンをクリックします。
これで、ページにアクセスしてカスタムフィールドフィルターが機能していることを確認してください。
たとえば、デモオンラインストアでさまざまなカスタムフィールドフィルターがどのように表示されるかを以下に示します。
カスタムフィールドフィルターに関するFAQ
1. 高度なカスタムフィールド（ACF）データにフィルターを使用できますか？
はい、間違いなく可能です。当社の多くのサイトでACFを使用しており、WPFiltersはACFと完全に連携します。
2. 1つのページに複数のカスタムフィールドフィルターを追加できますか？
もちろんです。「色」用と「サイズ」用など、異なるフィールドに対して個別のフィルター要素を作成できます。それらをより見やすくするために、サイドバーに積み重ねて、ユーザーが段階的に結果を絞り込めるようにすることができます。
3. 設定にコーディングの知識は必要ですか？
全く必要ありません。WPFiltersを使用する主な利点は、技術的な作業をすべて処理してくれることです。PHPファイルを一切変更することなく、メニューをクリックするだけで高度なフィルターを設定できます。
カスタムフィールドフィルターは、訪問者がデータと対話する方法を変えます。
このチュートリアルで、コーディングなしでWordPressでカスタムフィールドフィルターを作成する方法を学んでいただけたことを願っています。また、サイトにライブ検索を追加する方法やWooCommerceでカテゴリ別に検索する方法に関するガイドもご覧ください。
訪問者にコンテンツを並べ替えるより良い方法を提供する準備はできましたか？ここからWPFiltersを使い始めることができます。
