WordPressのクエリーループブロックにはすでにフィルターパネルが付属していますが、訪問者向けではありません。
それらの分類、著者、キーワードのオプションはエディターのブロック設定にあり、そこでページが読み込まれる前にループが表示する投稿を決定します。
つまり、60件の投稿のグリッドを持つ旅行ブログは、すべての読者に同じ60件の投稿を表示します。ポルトガルへの旅行を計画している人は、目的の記事を見つけるために、日本とメキシコのガイドをすべてスクロールしてスキップする必要があります。
訪問者がクリックできるWordPressクエリーループブロックにフィルターを追加するには、カスタムコードを追加するか、開発者を雇う必要があります。しかし、WPFiltersのようなプラグインは、クエリーループの隣にカテゴリフィルターを配置し、ページをリロードせずに結果を更新し、共有できるフィルター付きリンクを提供します。
この記事では、コーディングなしでWordPressクエリーループブロックにフィルターを追加する方法を説明します。
クエリーループブロックの組み込みフィルターが不十分な理由
クエリーループブロックは、任意のページまたはテンプレートに投稿、ページ、その他のコンテンツの動的なリストを表示します。
ブロック設定から、投稿タイプ、順序、および1ページあたりの投稿数を指定して、そのリストに何を含めるかを決定します。
クエリーループブロックのフィルターパネルは、カテゴリ、タグ、著者、またはキーワードでそのリストをさらに絞り込みます。
ページを編集している間にこれらの選択を行い、訪問者は結果のみを確認できます。
フロントエンドには、読者がループが表示するものを変更できるチェックボックスやドロップダウンはありません。
訪問者フィルターは、これらのチェックボックスとドロップダウンをフロントエンドに配置するため、読者は自分でループを絞り込むことができます。
クエリーループに訪問者フィルターを追加する理由
長いクエリーループグリッドは、サイトが数十件の投稿を超えて成長するまで問題なく機能することに気づきました。
グリッドが長くなると、4つの問題が発生します。
- 読者はリストを絞り込めません。エディター側のフィルターは固定されているため、すべての訪問者は探しているものに関係なく同じグリッドを受け取ります。
- 長いグリッドは最高のコンテンツを隠します。ページごとに投稿をスクロールしなければならない読者は、目的の記事にたどり着く前に諦めてしまうことがよくあります。
- コードルートには開発者が必要です。WordPressでは、開発者はquery_loop_block_query_varsフックを使用してクエリーループの結果を変更できますが、それはPHPの記述と保守を意味します。
- 全ページリロードはブラウジングを遅くします。フィルターがページ全体をリロードするたびに、読者は自分の場所を失い、すべてが再び読み込まれるのを待ちます。
フィルタープラグインは、既存のクエリーループの隣にクリック可能なフィルターを追加するため、設定を変更したりPHPを記述したりする必要はありません。
WPFiltersを使用してWordPressクエリーループブロックにフィルターを追加する方法
クエリーループブロックにビジターフィルターを追加する最も簡単な方法として、WPFiltersをお勧めします。
WPFiltersは、SearchWPと同じチームによって構築された、WordPress向けの最高のフィルタリングプラグインです。
これにより、サイトが既に持っているカテゴリ、タグ、カスタムフィールドからフィルターを構築し、コードを書かずにクエリーループの隣に配置できます。
WPFiltersがクエリーループページに適している機能の一部を以下に示します。
- クエリーループブロックと連携します。 WPFiltersはクエリーループブロックに自動的に接続されるため、オンにする追加の設定はありません。
- 7つの要素タイプ。 チェックボックス、ラジオボタン、ドロップダウン、ドロップダウン（複数選択）、スライダー、検索、リセットから、訪問者がリストを絞り込む方法に応じて選択できます。
- ページリロードなし。 訪問者がフィルターを選択すると、WPFiltersはAJAXを使用してクエリーループの結果をその場で更新します。
- 共有可能なフィルターURL。 各選択はページURLに保存されるため、読者はフィルターされたビューをブックマークしたり共有したりできます。
これで、WPFiltersを使用してクエリーループブロックにフィルターを追加する方法を見てみましょう。
ステップ 1: WPFilters のインストールと有効化
まず、SearchWPのウェブサイトでWPFiltersプランにサインアップできます。
サインアップしたら、アカウントダッシュボードのダウンロードタブに移動できます。
そこから、WPFiltersプラグインZIPファイルをダウンロードしてください。
その際に、ライセンスキーもコピーしておいてください。すぐに必要になります。
次に、WordPressダッシュボードにログインしてプラグインをインストールできます。
ZIPファイルからプラグインをインストールしたことがない場合は、このステップバイステップガイドを参照してください。手順を説明します。
アクティベーション後、オンボーディングウィザードが開きます。開始するをクリックして、画面の指示に従って開始できます。
これで完了し、WPFiltersの準備が整いました。最初のクエリーループフィルターを作成できます。
ステップ2：カテゴリフィルター要素を作成する
フィルターを作成するには、WordPressダッシュボードからWPFilters » Elementsに移動できます。
そこから、画面上部の新規追加ボタンをクリックしてください。
新しい要素がデフォルトのタイトルで開きます。横の鉛筆アイコンをクリックして、「宛先でフィルタリング」のようなわかりやすい名前に変更できます。
次に、フィルターフィールドセクションを見つけて、チェックボックスを選択します。
クエリーループページではチェックボックスをお勧めします。これにより、読者はポルトガルと日本を同時に選択するなど、一度に複数のカテゴリを選択できます。
その後、データソースセクションまでスクロールして、ドロップダウンを開きます。
タクソノミーグループの下で、カテゴリ（category）を選択してください。
データソースが設定されたら、フィルターの外観を調整できます。
コンテナ設定では、タイトルを表示トグルをオンにすると、訪問者はチェックボックスの上にラベルを確認できます。
折りたたみ可能で水平のトグルもあります。フィルターを折りたたんだり、1行に配置したりしたい場合に使用できます。
アイテム設定では、各カテゴリにいくつの投稿があるかを示すアイテム数をオンにすることをお勧めします。
表示しないをオフにして、投稿がないカテゴリを非表示のままにすることもできます。
これらの設定を変更すると、ライブプレビューパネルにフィルターの外観が表示されます。
これで満足したら、保存をクリックしてください。
ステップ3：クエリーループブロックの隣にフィルターを追加する
次に、ブロックエディター（Gutenberg）でフィルターを表示したいページを開きます。
ページにまだクエリーループがない場合は、クエリーループブロックを追加して、投稿を表示するように設定できます。
その後、クエリーループの上にある+インサーターをクリックし、WPFilters Elementブロックを検索します。
ブロックがページに表示されたら、ブロック設定で要素の選択を開き、「宛先でフィルタリング」を選択できます。
Y
フィルターをループの上に配置するか、カラムブロックを使用して、ループの横のサイドバー列に配置できます。
すべてが配置されたら、ページを保存または公開してください。
注意：1つのページに2つのクエリーループブロックを配置してテストしたところ、WPFiltersはページ上のすべてのクエリーループブロックにフィルターを適用するため、両方とも同じフィルター結果が表示されました。「最新の投稿」セクションのように、フィルターがかからない2番目のリストが必要な場合は、代わりに最新の投稿ブロックを使用できます。
ブロックを使用したくない場合は、要素の画面にある埋め込みボタンから、ショートコードとPHPコードのオプションも利用できます。
ステップ4：クエリーループフィルターをテストする
これで、サイトのフロントエンドでページにアクセスしてフィルターを試すことができます。
最初のテストとして、「ポルトガル」チェックボックスをオンにしてください。ページをリロードせずに、ポルトガル関連の投稿のみを表示するようにクエリーループがすぐに更新されるはずです。
ページのURLが選択内容を含むように変更されることにも気づくでしょう。
2番目のテストとして、次の結果ページをクリックしてください。チェックボックスがオンのままで、2ページ目もポルトガル関連の投稿のみを表示するはずです。
URLをコピーして新しいブラウザウィンドウで開くこともできます。同じフィルター表示が読み込まれるため、訪問者はそれを共有したりブックマークしたりできます。
ボーナス：リセットボタンまたはキーワード検索を追加する
カテゴリフィルターが機能したら、隣にさらに要素を追加できます。
リセット要素は、すべての選択を一度にクリアするボタンを追加します。これは、WordPressでリセットフィルターボタンを追加する方法ガイドで説明しました。
検索要素はキーワードボックスを追加するため、訪問者は「ビーチ」のような単語を入力してリストを絞り込むことができます。
サイトでSearchWPがアクティブな場合、その検索要素はデフォルトのWordPress検索ではなく、SearchWPの検索エンジンを使用します。
よくある質問
1. プラグインなしでクエリーループブロックをフィルタリングできますか？
エディター側からのみ可能です。クエリーループブロックのフィルターパネルで、ループが表示するカテゴリ、タグ、著者、またはキーワードを選択できますが、訪問者はそれらの選択を変更することはできません。
訪問者がプラグインなしでループをフィルタリングできるようにするには、query_loop_block_query_varsフックを使用してカスタムPHPを記述する必要があります。
2. WPFiltersはWooCommerce製品を表示するクエリーループで機能しますか？
WPFiltersは、標準のクエリーループブロックに接続するのと同じ方法で、WooCommerceの商品テンプレートブロックに接続します。
データソースの下の分類法グループにある商品カテゴリ（product_cat）のような、商品データからフィルターを構築できます。
3. クエリーループフィルターは、結果の次のページでも機能し続けますか？
はい、訪問者が次のページにクリックしても、選択したフィルターはURLに残ります。
同じフィルターが適用され、同じボックスがチェックされた状態で次のページが読み込まれます。
4. 同じページで2つのクエリーループブロックを別々にフィルターできますか？
いいえ、WPFiltersはページ上のすべてのクエリーループブロックにフィルターを適用するため、2つのループは同じフィルター結果を表示します。
フィルターされていない2番目のリストが必要な場合は、代わりに最新の記事ブロックを使用できます。
次は何をしますか…
これで、クエリーループブロックの横にカテゴリフィルターが表示され、ページのリロードなしで結果が更新され、読者が共有できるURLが生成されます。
また、WordPressで複数の分類法でフィルターする方法やコーディングなしでWordPressでフィルターを設定する方法に関するガイドも参照してください。
読者にクエリーループをフィルターさせますか？ここからWPFiltersを使い始めることができます。すべてのプランには14日間の返金保証が付いています。
