WooCommerceの商品フィルターをカスタムページやトップページに設置する

18 時間前

WooCommerceの商品フィルターをカスタムページ、ランディングページ、トップページに設置したところ、次のいずれかが起きることがあります。フォームは表示されるのに商品が出てこない、クリックするたびにショップページへ移動してしまう、ページが再読み込みされるだけで何も変わらない、といった状態です。これらは不具合ではありません。[woof] ショートコードが出力するのは検索フォームだけで、結果をどこに表示するかは、ページ上にほかに何があるかをプラグインが調べて判断します。以下では、その判断の仕組みと、よくあるケースに対応するショートコードの正確な設定を説明します。フィルターと商品を同じページに置く場合、特定のカテゴリーや属性に限定したページ、そしてトップページのフォームから結果ページへ誘導する場合です。

カスタムページの WooCommerce 商品フィルターは訪問者をどこへ送るか

訪問者がフィルター (Filter)を押したとき（オートサブミットが有効な場合は、オプションを変更したとき）、プラグインのスクリプトは ?swoof=1&pa_color=red のようなリンクを組み立て、現在のページに更新できる商品リストがあるかどうかを調べます。対象となるのは、[woof_products] の出力、WooCommerceの [products] ショートコード、または .woocommerce コンテナ内にある .products リストです。見つかった場合は、結果が同じページに表示されます。見つからない場合、訪問者はショップページへ移動します。ショップページとは、WooCommerce → 設定 → 商品 → ショップページ (WooCommerce → Settings → Products → Shop page) で選択したページです。

ページの内容	結果が表示される場所
`[woof]` のみ	選択したフィルターが適用されたショップページ
`[woof]` + `[woof_products]`	同じページ。`is_ajax=1` の場合は再読み込みなし
`[woof]` + WooCommerceの `[products]`	同じページ（再読み込みあり）
`[woof redirect="..."]` があり、AJAXの商品グリッドがない	`redirect` に指定したURL
単一商品ページ（関連商品は対象外）	ショップページ、または `redirect` のURL

何かを構築する前に、次の2点を知っておくと役に立ちます。WooCommerceでショップページが設定されていない場合、訪問者を送る先がないため、フィルターは現在のページを再読み込みします。単一商品ページでも同じです。また、トップページに商品ブロック（おすすめ商品や、WooCommerceのマークアップで作ったセール用カルーセルなど）がある場合、フィルターはそのブロックを結果グリッドとみなし、ショップを開かずにトップページを再読み込みします。

フィルターと商品を同じページに置く

小さなショップのように機能するページには、2つのショートコードを配置します。たとえば狭いカラムにフォーム、広いカラムに商品、というように、別々のブロックやカラムに置いても構いません。

[woof]
[woof_products per_page=12 columns=3 is_ajax=1]

per_page：必ず指定してください。指定しない場合、[woof_products] はプラグインの詳細設定 → オプション (Advanced → Options)タブにある1ページあたりの商品数 (Products per page)を使います。その値が -1（デフォルト）なら、WordPressの1ページに表示する最大投稿数 (Blog pages show at most)設定が使われ、ほとんどのサイトでは10になります。
columns：1行あたりの商品数です。テーマがこれに従うかどうかは、テーマのCSSによります。
is_ajax=1：ページを再読み込みせずに結果が入れ替わり、アドレスバーも更新されるため、絞り込み済みのページを共有できます。is_ajax=0 の場合はページが再読み込みされます。カスタムページでは、この属性がAJAXを有効にします。ショップのAJAX化を試みる (Try to ajaxify the shop)オプションが影響するのは、ショップとカテゴリーのアーカイブだけです。

[woof_products] は、テーマの商品カード（content-product.php テンプレート）で商品を表示し、WooCommerce標準のループフックを実行します。そのため、結果件数、並べ替え、ページネーションはショップページと同じように表示されます。

WooCommerceの [products] ショートコードも絞り込みの対象にできます。フィルターが有効な間、HUSKYはそのショートコードのクエリに条件を追加します。[woof] の隣に [products limit="12" columns="4" paginate="true"] を置くと、ページの再読み込みを伴って動作します。AJAXにしたい場合は、HUSKYが登録している対になるショートコード [products_woof] を、同じ属性で使用してください。

ページを1つのカテゴリー、タグ、属性に限定する

1つのブランド、1つの地域、あるいは「中古スマートフォンのみ」といったページでは、訪問者が解除できない固定の条件が必要です。それが taxonomies 属性で、2つのショートコードの両方に指定します。

[woof taxonomies="product_cat:87+product_tag:105" tax_exclude="product_cat,product_tag"]
[woof_products taxonomies="product_cat:87+product_tag:105" per_page=12 columns=3 is_ajax=1]

構文は taxonomy:ID です。同じタクソノミーの複数のIDはカンマで区切り、異なるタクソノミーは + でつなぎます。この場合、すべての条件に一致する必要があります。デフォルトのOR条件では、product_cat:87,92+pa_brand:14 は「カテゴリー87または92に属し、かつブランド14」を意味し、87と92の子カテゴリーの商品も含まれます。プラグイン設定であるタクソノミーをAND条件に切り替えている場合は、ここでもそのIDにAND条件が適用されます。

スラッグや名前ではなくタームID

プラグインは、各値を指定されたIDのタームに変換します。cadeau のようなスラッグや Yes のような名前はIDではないため、何にも一致せず、その部分の条件はエラーなく無視されて、ページにはすべての商品が表示されます。IDを調べるには、商品 → カテゴリー (Products → Categories)（またはタグ (Tags)、商品 → 属性 → ターム設定 (Products → Attributes → Configure terms)）を開き、そのタームの編集 (Edit)リンクにマウスを重ねて、リンク内の tag_ID= に続く数字を確認します。

タクソノミー名は正確に指定する必要があります。product_cat、product_tag、グローバル属性の場合は pa_ に属性スラッグを続けたもの（color ではなく pa_color）、またはブランド用タクソノミーなどのカスタムタクソノミーのスラッグです。個々の商品に直接入力したカスタム属性はタクソノミーではないため、ここでは使えません。

各ショートコードがこの値をどう扱うか

[woof_products] では、商品を限定します。実際に効果を発揮するのはこちらです。
[woof] では、フォームが集計する範囲を限定します。件数を表示 (Show count)と動的再カウント (Dynamic recount)が有効な場合、オプションの横の数字や価格帯は、同じ限定された商品群を基に表示されます。また空の用語を非表示 (Hide empty terms)を有効にすると、このページに商品がないオプションは表示されなくなります。AJAXモードでは、絞り込みのたびに [woof_products] の値を使ってフォームが再描画されます。そのため2つの値は同一にしてください。そうしないと、最初のクリックのあとで件数が変わってしまいます。

この条件はURLには含まれず、ページの一部です。リセットしたり、すべてのチェックを外したりすると、ページに戻り、条件はそのまま残っています。事前に絞り込んだブロックは、tax_exclude（タクソノミー名をカンマ区切りで指定）で非表示にするか、tax_only と by_only を使って短いフォームを作ります。たとえば [woof tax_only="pa_brand,pa_size" by_only="by_price"] のようにします。by_only="none" を指定すると、価格、テキスト検索など、タクソノミー以外のフィルターが非表示になります。ほかの組み合わせはページごとに異なるフィルターを表示する方法に、全属性の一覧は[woof] ショートコードのページにあります。タクソノミーではなくメタフィールドで事前に絞り込みたい場合は、検索データの操作を参照してください。

ショップへリダイレクトするトップページのフィルター

トップページで確実に動作する構成は、訪問者を結果ページへ送る検索フォームです。

[woof redirect="https://example.com/shop/" autosubmit=1 ajax_redraw=1 tax_only="product_cat,pa_size" by_only="none"]

redirect：結果ページです。ショップ、https://example.com/product-category/tires/ のようなカテゴリーアーカイブ（カテゴリーがアドレスに含まれるため、結果はそのカテゴリー内にとどまります）、または [woof] と [woof_products] を置いたカスタムページを指定できます。? を含まないクリーンなURLを使用してください。プラグインが ?swoof=1&... を後ろに付加します。
単独の autosubmit=1 は、最初の変更で訪問者を移動させるため、ドロップダウンが1つだけのフォームに向いています。複数のフィールドがあるフォームには、ajax_redraw=1 を追加してください。選択のたびにフォームだけが更新され（件数や依存するオプション）、フィルター (Filter)ボタンで結果ページが開きます。autosubmit=0 の場合、訪問者がフィルター (Filter)を押すまで何も起こりません。

「リダイレクトが動作しない」という報告の大半は、次のルールが原因です。

AJAXモードではリダイレクトは無視されます。同じページに [woof_products is_ajax=1] や [products_woof] もある場合、フォームはリダイレクトせずそのグリッドを絞り込みます。
1ページにつきフィルターは1つです。ページに複数のフォームがある場合、スクリプトは最初に見つけたフォームから redirect、autosubmit、ajax_redraw を取得します。サイドバーの2つ目のフォームや、商品の上に表示される自動フィルターが、設定したフォームを気づかないうちに上書きすることがあります。HUSKYウィジェットには、同じ目的のためのリダイレクト先 (Redirect to)フィールドがあります。
トップページのフォームに指定した taxonomies 条件は、リダイレクト先には引き継がれません。URLに入るのは、訪問者が選択した内容だけです。フォームが1つのカテゴリーに関するものであれば、そのカテゴリーのアーカイブへリダイレクトしてください。

固定フロントページ自体で絞り込まない理由

その場での絞り込みは、通常のページでは機能します。固定フロントページは例外です。product_cat や product_tag などのパラメータはWordPressのクエリ変数でもあり、サイトのルートアドレスに付くと、WordPressはそのリクエストをフロントページとして扱わなくなります。テーマによっては、訪問者にカテゴリーアーカイブ、空のページ、またはSEOプラグインが追加したページが見つかりません (Page not found)というタイトルが表示されます。フィルターと [woof_products] は通常のページ（たとえば /products/）に置き、トップページのフォームからそこへリダイレクトさせてください。

訪問者が絞り込んだあとにだけ商品を表示する

フォームだけで開くランディングページにしたい場合は、[woof_products] に display_on_search=1 を追加します。フィルターが適用されるまで商品エリアは空のままで、最初の検索のあとに結果が表示されます。ドキュメントでは、この属性は再読み込みモード向けと説明されているため、is_ajax=0 と併用してください。詳細は[woof_products] ショートコードのページをご覧ください。

単一商品ページ、メニュー、ページビルダーのグリッド

単一商品ページ。商品ページのサイドバーにあるフィルターは、常にショップ（または redirect のURL）を開きます。関連商品やアップセル商品は結果とはみなされません。
メニューとメガメニュー。カテゴリー項目は、ショートコードを置いたページではなく、実際のカテゴリーアーカイブ（/product-category/.../）にリンクしてください。アーカイブは設定なしで絞り込みができ、絞り込み中もカテゴリーが維持されます。
ビルダーの商品グリッド。ElementorやDiviなど、独自の商品クエリを実行するビルダーのグリッドは、フォームがページ上にあってもフィルターに反応しません。[woof_products] に置き換えるか、フィルターのURLは変わるのに商品が変わらない場合の説明に従って、そのクエリを絞り込み可能にしてください。
カテゴリーテンプレート上の [woof_products]。このショートコードは、自分がどのカテゴリーアーカイブに置かれているかを認識しません。ページ向けに作られています。カテゴリーテンプレートでは、taxonomies を渡さない限りすべての商品が表示されるため、そこでは標準のアーカイブ商品ループを使用してください。

それでも動作しない場合

引用符がストレート（直線）になっています。ワープロや一部のウェブページからコピーしたショートコードは、カーリークォート（’pa_age’）になっていることがあり、WordPressは属性の引用符として認識しません。ショートコードブロックで入力し直してください。
taxonomies のすべての値が数値のタームIDで、タクソノミー名が正確で、+ や : の前後にスペースがなく、2つのショートコードが同じ値になっています。
[woof_products] に per_page があるため、ページが10商品で止まることはありません。
WooCommerceの設定でショップページが選択されています。
ページ上のフィルターフォームは1つだけか、最初のフォームに目的の redirect が指定されています。
ページ上の商品グリッドは、独自のクエリを持つビルダーウィジェットではなく、[woof_products]、[products]、[products_woof] のいずれかです。

すべて確認してもページが正しく動作しない場合は、ページのリンクと、エディターにある2つのショートコードをそのままの形で、HUSKYサポートフォーラムに投稿してください。