SearchWPブログ

WordPressのチュートリアル、ヒント、リソースでビジネスを成長させる

WordPressで範囲フィルターを作成する方法

オンラインストアや不動産ディレクトリのような、多くのデータを扱うウェブサイトの運営では、検索結果が散らかりがちです。

選択肢が多すぎると、訪問者が予算や期間に合った特定のアイテムを見つけるのに苦労していることがわかりました。

これらの結果を絞り込む方法がないと、潜在的な顧客はしばしば欲求不満を感じてサイトを離れてしまいます。これは、ジャンルや著者で整理されていない図書館で特定の書籍を探すようなものです。

範囲フィルターを追加すると、ユーザーは価格や日付などの最小値と最大値の間をスライドできるようになり、この問題が解決します。しかし、ほとんどのデフォルトのWordPressセットアップではこの機能が提供されておらず、追加するには通常、複雑なコーディングが必要であることがわかりました。

この記事では、WordPressで範囲フィルターを作成する方法を説明します。

訪問者に範囲フィルターを提供する理由

チュートリアルに入る前に、範囲フィルターがサイトのユーザーエクスペリエンスをどのように向上させるかについて話しましょう。

価格や日付でフィルターできない訪問者は、検索をすぐに断念することが多いことがわかりました。

靴屋に入って、サイズや予算に関係なく、すべてのペアを見なければならないと想像してみてください。これは、ウェブサイトで関連性のない商品をスクロールしなければならないときに訪問者が感じるのと同じです。

範囲フィルターは、特定の基準に合うアイテムをすぐに表示する、役立つ店員のよう��機能します。

この小さな追加機能により、訪問者は自分が購入できるものや必要なものを正確に見ることができるため、はるかに長くエンゲージメントを維持できることがわかりました。

それがWooCommerceの価格範囲をフィルターする場合でも、予約の日付を選択する場合でも、この機能は時間を節約します。

それは散らかりを解消し、顧客がより速く意思決定できるようにするのに役立ち、それはしばしばあなたにとってより多くの売上につながります。

さて、WordPressウェブサイトに範囲フィルターを簡単に追加する方法を見てみましょう。

WordPressで範囲フィルターを追加する

WordPressサイトに範囲フィルターを追加する最も簡単な方法は、WPFiltersのようなプラグインを使用することです。

WPFilters - 最高のWordPressフィルタリングプラグイン

WPFiltersは、コンテンツの並べ替えを簡単にするWordPress向けの最高のフィルタープラグインです。これを使用して、コードを書かずに訪問者に表示されるものを正確に制御できます。

WooCommerceやEasy Digital Downloadsのような人気のeコマースプラグインと完全に連携します。

このプラグインを使用すると、タグ、カテゴリ、カスタムフィールド、その他のデータタイプに対してあらゆる種類のフィルターを作成できます。最も良い点は、WPFiltersがサイトにフィルターを追加するための複数のデータフィールドを提供していることです。

つまり、価格スライダー、日付範囲、および数値フィルターを簡単に設定でき、どのデバイスでも見栄えがします。

WPFiltersでできることは次のとおりです。

  • 価格でフィルター: 顧客がショッピングの最小予算と最大予算を設定できるようにします。
  • カスタムフィールドでフィルター: 投稿の数値データを使用して、特定の範囲スライダーを作成します。
  • 検索結果を改善する: オプションを大幅に絞り込むことで、ユーザーが必要なものを正確に見つけられるようにします。
  • 外観をカスタマイズ:フィルタータイトルを表示したり、折りたたみ可能にしたり、水平に配置したりできます。

これで、WPFiltersを使用してサイトに範囲フィルターを作成する方法を見ていきましょう。

ステップ 1: WPFilters のインストールと有効化

まず、SearchWPのウェブサイトにアクセスし、WPFiltersアカウントにサインアップする必要があります。

それが完了したら、SearchWPのアカウントエリアに移動し、「ダウンロード」タブに移動します。

WPFiltersプラグインのzipファイルをダウンロード

次に、WPFiltersのダウンロードボタンをクリックして、プラグインファイルをコンピューターに保存できます。

ダウンロードページにいる間、ライセンスキーをコピーすることもお勧めします。プラグインの設定に必要になります。

次に、WPFiltersプラグインファイルをWordPressサイトにアップロードしてプラグインをインストールします。これにヘルプが必要な場合は、WordPressプラグインのインストール方法に関するこの記事を参照してください。

プラグインをアクティベートすると、WPFiltersセットアップウィザードが表示されます。「開始する」ボタンをクリックして、画面の指示に従ってください。

WPFiltersセットアップウィザード

ステップ2:範囲フィルター要素の追加

プラグインがアクティブになったので、WordPress用の最初の範囲フィルターを作成する時間です。

まず、WordPressダッシュボードからWPFilters » Elementsにアクセスし、「新規追加」ボタンをクリックしてください。

WPFiltersで新しい要素を追加

その後、上部でフィルターの名前を入力することから始めることができます。サイトに複数のフィルターがある場合に整理を維持するのに役立つ特定の名前を使用できます。

次に、フィルターフィールドセクションの下にあるスライダーオプションを選択します。この特定の要素は、訪問者が最小値と最大値を選択するために使用するスライドバーを作成します。

スライダーフィルターフィールドを選択

フィルタータイプを選択したら、データソースセクションまでスクロールします。ここで、範囲値を決定するデータを正確に選択できます。

たとえば、ストアを実行している場合は、商品価格または在庫合計アイテムをソースとして選択できます。

範囲データソースを選択


データを選択したら、スライダーの外観をサイトのデザインに合わせてカスタマイズできます。

「コンテナ」セクションまでスクロールして表示設定を調整するだけです。たとえば、フィルターにラベルタイトルを表示できます。

範囲フィルターのコンテナー設定を編集

外観に満足したら、ページの上部までスクロールします。

次に、保存ボタンをクリックして変更を保存します。

範囲フィルターを保存

ステップ3:範囲フィルターをサイトに追加する

WPFiltersを使用する最も良い点は、フィルターをサイトのどこにでも簡単に埋め込めることです。

開始するには、要素ページの「埋め込み」ボタンをクリックするだけです。

要素の埋め込みボタンをクリック

次に、さまざまなオプションが表示されたポップアップウィンドウが表示されます。

開発者の場合は、Gutenbergブロック、ショートコード、またはPHPコードを選択できます。

検索結果ページを埋め込む

それに加えて、WPFilters Gutenbergブロックをサイドバーやウェブサイトの他の領域に手動で追加することもできます。

このチュートリアルでは、デモWooCommerceサイトのサイドバーに範囲フィルターを追加します。

これを行うには、WordPressダッシュボードから外観 » ウィジェットに移動するだけです。使用しているWordPressテーマによって、この手順が異なる場合があることに注意してください。

次に、サイドバーセクションまでスクロールし、「+」記号をクリックしてWPFilters要素ウィジェットブロックを追加します。

WPFilters要素ウィジェットブロックをWooCommerceサイドバーに追加

次に、右側の設定パネルから作成した範囲フィルターを選択する必要があります。

「要素を選択」ドロップダウンメニューをクリックして、フィルターを選択するだけです。

範囲フィルターを選択

完了したら、上部にある更新ボタンをクリックします。

ここから、ウェブサイトにアクセスして範囲フィルターが機能していることを確認できます。

範囲フィルターのプレビュー

スライダーをスライドさせることで、訪問者は価格に基づいて商品をフィルターできます。

WordPressで範囲フィルターを作成することに関するFAQ

WordPressで範囲フィルターを設定する方法について、よく寄せられる質問をいくつかご紹介します。

1. 範囲スライダーでどのような種類のデータをフィルタリングできますか?

ほぼすべての数値データをフィルタリングできます。範囲スライダーは、ディレクトリサイトの商品価格、予約日、または重量やサイズなどの測定値によく使用されます。

2. WooCommerce製品でも機能しますか?

はい、WooCommerceと完全に統合されます。価格範囲スライダーを追加すると、顧客は手頃な価格の商品をより速く見つけることができ、コンバージョン率を高めることができます。

3. 1つのページに複数の範囲フィルターを追加できますか?

もちろんです。フィルターを積み重ねて、ユーザーが価格とユーザー評価で同時に並べ替えることができます。これにより、訪問者にとって非常に正確な検索エクスペリエンスが作成されます。

この記事がWordPressで範囲フィルターを作成する方法を学ぶのに役立ったことを願っています。また、タグでWooCommerce製品をフィルタリングする方法およびカテゴリでWooCommerce製品をフィルタリングする方法に関するガイドも参照してください。

オンラインストアに強力なフィルターを追加する準備はできましたか?WPFiltersで始めることができます

著者アバター
Aazim Akhtar

今日からより良いWordPress検索エクスペリエンスを作成しましょう

役に立たない検索結果で訪問者を失うことはもうありません。SearchWPを使用すると、独自のスマートなWordPress検索をすばやく簡単に作成できます。

Get SearchWP Now
複数の検索エンジンアイコン