商品を絞り込むために多くのオプションをクリックしたオンラインストアを訪れたことがあるなら、間違ったサイズや色を選択してしまい、元に戻す方法がわからないことに気づくまで、それは素晴らしい気分です。
検索結果ページは何も表示されずに固まり、選択をクリアする簡単な方法がありません。これにより、ユーザーは通常、戻るボタンを押すかページを更新することを余儀なくされ、非常に迷惑です。
最善の解決策は、アクティブなフィルターを正確に表示し、ユーザーにすべてをリセットするための簡単なボタンを提供することです。
このガイドでは、WordPressにリセットフィルターボタンを追加する方法を説明します。
訪問者がリセットボタンなしで立ち往生する理由
食料品店の通路を歩いてカートに商品を入れたのに、それらを取り出すことができないことに気づいたと想像してみてください。
これは、ユーザーが「赤」や「小」などのフィルターを選択して、簡単にチェックを外せない場合に感じるのと同じ感覚です。
ウェブサイトで複数のオプションを選択すると、ユーザーは数分前にクリックしたことを忘れてしまうことに気づきました。
結果、「見つかりませんでした」というメッセージが表示され、修正方法がわからないため、ユーザーは不満を感じます。
この混乱は売上を低下させ、人々が私たちが管理するサイトを離れる原因となります。アクティブなフィルターを表示することで、基本的に訪問者にマップを提供し、自分がどこにいるのかを正確に把握できるようにします。
リセットボタンを追加することは、やり直しスイッチを押すようなものです。ユーザーにコントロールを戻し、行き止まりに陥る恐れなく自由にコンテンツを閲覧できるようにします。
さて、WordPressにリセットボタンを追加するための迅速かつ簡単な方法を見てみましょう。
WordPressでフィルターリセットボタンを表示する
ユーザーが検索エクスペリエンスを制御できるようにする最も簡単な方法は、WPFiltersのようなプラグインを使用することです。
WPFiltersは、WordPress向けの最高のフィルタリングプラグインであり、検索結果の管理を楽にします。
コードを書かずに便利なナビゲーションツールを追加できるため、これを使用するのが気に入っています。通常、アクティブなフィルターを表示したり、クリアボタンを追加したりするには、開発者を雇う必要があります。
しかし、WPFiltersはこれらの複雑なタスクを自動的に処理するため、コンテンツに集中できます。SearchWPの背後にあるのと同じチームによって構築されているため、毎回正確な結果が得られると信頼しています。
WPFiltersでできることは次のとおりです。
- アクティブフィルターを表示： 選択した基準のリストを表示して、ユーザーが正確に何を見ているかを知ることができます。
- ワンクリックリセット： 訪問者がすべてのフィルターを即座にクリアできるシンプルなボタンを追加します。
- さまざまなフィルタータイプ： デザインに合わせて、チェックボックス、ドロップダウン、範囲スライダー、ラジオボタンから選択します。
- 簡単な統合： ブロックエディターを使用して、サイトのどこにでもフィルターを配置します。
これで、ウェブサイトでアクティブなフィルターとリセットボタンを設定する方法を見てみましょう。
ステップ 1: WPFilters のインストールと有効化
まず、SearchWPのウェブサイトにアクセスして、WPFiltersプラグインを入手する必要があります。
完了したら、SearchWPダッシュボードに移動し、ダウンロードタブをクリックするだけです。
ダウンロードタブに移動したら、ダウンロードWPFiltersボタンを押し、プラグインのZIPファイルをコンピューターに保存してください。
ライセンスキーは左下にコピーしておいてください。セットアッププロセスで後で必要になります。
次に、WordPressウェブサイトにWPFiltersをインストールして有効化する必要があります。方法がわからない場合は、WordPressプラグインのインストール方法に関するこの初心者向けガイドを参照してください。
有効化すると、ウェルカムスクリーンとセットアップウィザードが表示されます。「開始する」ボタンをクリックし、画面の指示に従ってください。
ステップ2：新しいリセットフィルター要素を作成する
まず、すべての異なるフィルターオプションを保持する新しい要素を作成する必要があります。
WordPressダッシュボードからWPFilters » 要素に移動し、新規追加ボタンをクリックするだけです。
次に、上部にあるフィールドにフィルターセットのタイトルを入力できます。
ここから、表示したいフィルターの具体的なタイプを選択する必要があります。フィルタータイプのセクションで、リセットオプションを選択してください。
その後、コンテナセクションまでスクロールダウンできます。
ここでは、フィルターのタイトルを表示したり、折りたたみ可能にしたりするオプションが表示されます。
完了したら、一番上までスクロールしてください。
ここから、保存ボタンをクリックして変更を保存するだけです。
ステップ4：リセットボタンをWordPressに埋め込む
リセットボタンを作成したので、最後のステップは、他のフィルターを配置したウェブサイトに追加することです。
WPFiltersを使用する最大の利点は、リセットボタンを特定のページやウィジェットエリアなど、どこにでも簡単に埋め込めることです。
フィルターリセットボタンを特定のページに追加したい場合は、要素エディターの埋め込みボタンをクリックするだけです。
次に、フィルター要素を追加するためのさまざまなオプションが表示される新しいポップアップウィンドウが開きます。
たとえば、Gutenbergブロック、ショートコード、PHPコードから選択できます。その後、フィルターを新しいページまたは既存のページに配置できます。
それに加えて、サイドバーのようなサイトのウィジェットエリアにフィルターを手動で埋め込むこともできます。
このチュートリアルでは、デモのオンラインストアのサイドバーにリセットボタンを追加します。そこには他のフィルターもあります。
そうするには、WordPressダッシュボードから外観 » ウィジェットに移動するだけです。注意点として、この手順は使用しているWordPressテーマによって異なる場合があります。
次に、サイドバーセクションまでスクロールダウンし、「+」記号をクリックして「WPFilters Element」ウィジェットブロックを追加します。
それが完了したら、右側の設定パネルから作成したリセットフィルターを選択する必要があります。
「要素を選択」ドロップダウンメニューをクリックして、フィルターを選択するだけです。
その後、更新ボタンをクリックして変更を保存できます。
次のステップは、ウェブサイトにアクセスしてリセットボタンフィルターをテストすることです。
たとえば、デモサイトでは次のように機能します。
ご覧のとおり、「フィルターをリセット」ボタンをクリックすると、選択したすべてのフィルターが削除されます。これは、ワンクリックで簡単にすべてをデフォルトに戻すことができる優れた方法です。
WordPressのフィルターリセットに関するFAQ
WordPressサイトでのフィルター管理に関する、ユーザーからよく寄せられる質問を以下に示します。
1. リセットボタンの見た目をカスタマイズできますか？
はい、ボタンの見た目をブランドに合わせて変更できます。WPFiltersは、アクティブなWordPressテーマと自動的に連携するように設計されています。特定の色やフォントが必要な場合は、カスタムCSSを使用することもできます。
2. WooCommerce製品でも機能しますか？
はい、これらの機能はWooCommerceで完全に機能します。私たちは多くのオンラインストアでWPFiltersを使用して、買い物客が商品カテゴリやタグを簡単にナビゲートできるようにしてきました。
これにより、顧客はページをリロードせずに、サイズや色の選択を簡単にクリアできます。
3. これらの機能を追加するためにコードを書く必要がありますか？
いいえ、コードを書く必要はありません。このガイドで示したように、WPFiltersを使用すると、簡単なブロックを使用してアクティブなフィルターとリセットボタンを追加できます。
これにより、これらの機能を構築するために開発者を雇うコストと時間を節約できます。
この記事が、WordPressでアクティブなフィルターを表示し、リセットボタンを追加する方法を学ぶのに役立ったことを願っています。また、「ナビゲーションメニューに検索バーを追加する方法」および「検索結果から特定のページを除外する方法」に関するガイドも参照してください。
サイトナビゲーションを改善する準備ができたら、ここからWPFiltersを使い始めることができます。
