Elementorチュートリアルで記事と商品に複数レベルのフィルタリングを追加する

このチュートリアルでは エレメンタ ずぼしをさす アンリミテッド・エレメンツ 商品や投稿に複数レベルのフィルタを追加するプラグイン。この記事は WooCommerce タブ・フィルター」ウィジェットを使用した商品グリッドの例。これは一般的な適用シナリオです。実際、マルチレベルフィルターは多くのタイプの記事、ギャラリー、その他のコンテンツに適用できます。

以下は、マルチレベルのフィルタリングを実装するための詳細なステップバイステップのガイドです：

ステップ1：カテゴリーとサブカテゴリーの設定

始める前に、記事や商品のカテゴリーとサブカテゴリーを設定し、それらを正しいカテゴリーに割り当てます。

これにより、フィルターはあらかじめ設定された階層的なロジックに従ってコンテンツを表示することができる。

ステップ2：必要なウィジェットをインストールする

まずアンリミテッド・エレメンツ プラグイン。

この例では タブフィルター ガジェットと WooCommerce商品グリッド ガジェット

Unlimited Elements Widget Libraryを開き、これら2つのウィジェットを検索します。ウィジェットにカーソルを合わせると、「インストール」ボタンが表示されるので、クリックしてインストールを完了します。

ステップ3：商品グリッドをページに追加する

を追加する。 WooCommerce 商品グリッドウィジェットを作成し、商品クエリ条件を設定します。例えば、"メンズ "または "レディース "カテゴリーの商品のみを表示することができます。

そうしないと、複数のカテゴリーを選択したときに、結果がグリッドに正しく表示されません。

次のステップに進む前に、商品グリッド・ウィジェットを エイジャックス ろ過機能.

ステップ4：フィルタリングを有効にする

商品グリッドのガジェット設定でAjaxフィルタリングを有効にします。

ステップ5：メインフィルターの追加

タブ・フィルター・ウィジェットをページにドラッグし、そのフィルター・ロールを メインフィルター（メイン）.

次に、"Terms Selection "セクションに行き、メインタブに表示させたいカテゴリー、例えば "Men's Clothing"、"Women's Clothing"、"Women's Clothing "などを表示させるようにクエリーをカスタマイズする。".

ステップ6：サブフィルターの追加

メインフィルターの下に、別のタブフィルター・ウィジェットを追加し、その「フィルターの役割」を次のように設定する。 子供.

次に「Term Selection」セクションに行き、表示したいサブカテゴリーを設定します。この例では、親カテゴリーとして "Men "を選択し、"Show Children Of "にチェックを入れます。

このセットアップでは、サブフィルターメインフィルターの選択に応じて動的に更新される分類ラベル

概要

設定が完了したら、ページをプレビューして、マルチレベルフィルタリング機能が期待通りに機能するかテストしてください。メインカテゴリー（例：「メンズ服」）をクリックすると、対応するサブカテゴリーが下に動的に表示されます。サブカテゴリーをクリックすると、商品グリッドが自動的に一致する商品をフィルタリングします。

これらの手順を踏むことで エレメンタ マルチレベルのフィルタリング機能の実装では、ページの内容がより整理して表示されるように、訪問者が迅速にターゲット情報を見つけることを容易にします。

お問い合わせ
チュートリアルが読めない？無料でお答えします！個人サイト、中小企業サイトのための無料ヘルプ！	カスタマーサービス WeChat
① 電話：020-2206-9892
② QQ咨询：1025174874
三 Eメール：info@361sale.com
④ 勤務時間: 月～金、9:30～18:30、祝日休み