WooCommerceの商品フィルターを商品の上に横並びで表示する

サイドバーにフィルターを置くと、ショップ幅の3分の1が取られ、スマートフォンでは商品がページのずっと下に押し下げられます。WooCommerceで商品の上に横並びの商品フィルターを配置すれば、商品グリッドを全幅で使え、すべての選択肢を一目で確認できます。ドロップダウンを並べたバーにしても、フィルターセクションを2〜4カラムに配置しても構いません。HUSKYに独立した「横並びモード」はありません。レイアウトは2つの要素で決まります。フィルターが出力される場所の幅と、そのブロックのCSSです。以下では、フィルターを商品の上に置く3つの方法、組み込みのカラムレイアウト、1行にするためのCSS、そしてよくあるレイアウト崩れの対処法を説明します。

フィルターを置く場所がレイアウトを決める

フィルターの各セクション（カテゴリー、色、サイズ、価格）は、woof_container クラスを持つブロックです。サイドバーのウィジェットでは幅が狭いため、ブロックは縦に積み重なります。広い領域に出力すれば、同じブロックを横に並べることができ、プラグインにはそれらをカラムに配置するクラスが付属しています。フィルターを商品の上に置く方法は3つあります。

商品の上に表示される自動フィルター

1. WooCommerce → 設定 → Products Filter → オプション (Options)に移動し、フィルターを自動的に設定 (Set filter automatically)をはい (Yes)に設定します。スマートフォンには別のフィルターを使いたい場合は、はい、ただしデスクトップのみ (Yes, but only for desktop)にします。保存してください。
2. ページを再読み込みして、デザインタブを開きます。最初の手順を保存したあとでのみ、このタブに2つのオプションが表示されます。自動フィルターをデフォルトで非表示 (Hide auto filter by default)と自動フィルターのスキン (Skins for the auto filter)です。
3. 自動フィルターをデフォルトで非表示 (Hide auto filter by default)をいいえ (No)に設定します。デフォルトのはい (Yes)では、訪問者には開閉ボタンだけが表示され、フィルターは商品の上にパネルとして開きます。これも有効な選択肢です。ボタンのスタイルは自動フィルターの開閉画像 (Auto filter close/open image)と自動フィルターの開閉テキスト (Auto filter close/open text)で設定します。画面の端からスライドインするパネルにしたい場合は、オフキャンバス商品フィルターを参照してください。
4. スキンを選びます。Flat white、Flat grey、Flat darkのいずれかで、1、2、3、4カラムがあります。デフォルト (Default)は、1行に3ブロックを並べるシンプルなスキンです。
5. ページに2つのフィルターが表示されないよう、ショップのサイドバーからHUSKYウィジェットを削除し、テーマでショップを全幅レイアウトに切り替えます。4カラムのスキンに「without sidebar」と記されているのはこのためです。最低150pxの幅を持つ4つのブロックは、サイドバーの隣には収まりません。

内部的には、プラグインはWooCommerceのアクション woocommerce_before_shop_loop の優先度2で [woof sid="flat_grey woof_auto_3_columns" ...] を出力します。これは、通知、結果件数、並べ替えのドロップダウンよりも前です。このアクションを使うことで、次の2つの影響があります。

• テーマまたはページビルダーのテンプレートが、このアクションを実行する必要があります。クラシックテーマやWooCommerce標準のアーカイブテンプレートは実行しますが、多くのビルダーのアーカイブテンプレートやカスタム商品グリッドは実行せず、その場合は何も表示されません。そのときはショートコードを使用してください。
• フィルターの組み合わせで何も見つからない場合、WooCommerceのアーカイブテンプレートは woocommerce_before_shop_loop の代わりに woocommerce_no_products_found を実行します。ページが再読み込みされると、自動フィルターも商品と一緒に消え、訪問者には「商品が見つかりません」というメッセージだけが表示されて、選択を変更する手段がなくなります。AJAXモードでは、フォームはページに残ります。次のセクションにあるショートコードのスニペットが、このケースに対応します。

カラム表示のショートコードフィルター

[woof] の sid 属性は、フィルターフォームのCSSクラスになります。sid="flat_grey woof_auto_4_columns" は、グレーの配色を与える woof_sid_flat_grey と、ブロックを4カラムに配置する woof_auto_4_columns を出力します。プラグインのスタイルシートにあるカラムクラスは次のとおりです。

各ブロックは最小幅150pxのインラインブロックなので、狭い画面ではブロックが自動的に折り返され、カラム数が減ります。最初の単語はスキンである必要はありません。[woof sid="topbar woof_auto_3_columns"] とすれば、プラグインのニュートラルな見た目のまま、独自のCSS用に woof_sid_topbar クラスが使えます。

カラムには余裕のある幅が必要です。ウィジェットエリアの幅はサイドバーと同じなので、ショートコードは全幅の場所に置いてください。全幅のElementorまたはDiviのセクション内にあるショートコードウィジェット、[products] や [woof_products] の上のページ（カスタムページのフィルターを参照）、あるいはショップテンプレートです。フィルターを自動的に設定 (Set filter automatically)を使わずにショップと商品アーカイブのページで商品の上に出力するには、プラグインが使うものと同じアクションにフックします。

/*
 * HUSKY: filter in columns above the products on the shop and product archives.
 * Child theme functions.php or a code snippets plugin.
 * Keep "Set filter automatically" = No, otherwise the page shows two filters.
 */
function my_husky_top_filter() {
    if (is_shop() || is_product_taxonomy()) {
        echo do_shortcode('[woof sid="flat_grey woof_auto_4_columns"]');
    }
}
add_action('woocommerce_before_shop_loop', 'my_husky_top_filter', 1);

// WooCommerce skips woocommerce_before_shop_loop when nothing is found:
// keep the filter on the "no products" page too.
add_action('woocommerce_no_products_found', 'my_husky_top_filter', 5);

is_product_taxonomy() は、カテゴリー、タグ、属性のアーカイブをカバーします。優先度1が重要です。ショップのAJAX化を試みる (Try to ajaxify the shop)がオンの場合、プラグインは同じアクションの優先度2で、AJAXが置き換える領域を開きます。その時点より後に出力されたフィルターはその領域の内側に入り、最初の絞り込みのあとで消えてしまいます。制限が1つあります。スマートフォンでフィルターをフィルターを開く (Open filter)ボタンに置き換えるモバイルモードは、バージョン3.4.6では、sid が2語のフォームを見つけられません。モバイルモードが必要な場合は、フォームに1語の sid を付け、次のセクションのCSSでレイアウトを作ってください。詳細はモバイルフィルターのガイドで説明しています。

[woof_front_builder] ショートコードは、コード不要の代替手段です。ページ上にフィルターフォームを構築し、そのレイアウト (Layout)オプションにはフィルターセクションのデフォルト幅 (Default filter section width)があります。25%なら1行に4セクション、50%なら2セクションです。各セクションは、独自のセクション幅 (Section width)でこれを上書きできます。このようなフォームをショップの商品の上に出力する方法は、FAQ「商品グリッドの上にフィルターを挿入する」に記載されています。

すべてのフィルターを1行に並べる

カラムはチェックボックスのリストに向いています。スリムなバーにするには、構造 (Structure)タブでセクションをコンパクトな表示タイプに切り替えます。ドロップダウン (Drop-down)、複数選択ドロップダウン (Multi drop-down)、ドロップダウン内のラジオ/チェックボックス (Radio/Checkbox in drop-down)（ドロップダウンパネル内のチェックボックス。拡張機能のページを参照）、カテゴリー用の階層ドロップダウン (Hierarchy drop-down)です。ドロップダウンはフィルター名を最初のオプションとして表示するため、各セクションの追加オプション（歯車アイコン）にあるタイトルラベルを表示 (Show title label)でブロックのタイトルをオフにして、1行分の高さを節約できます。そのうえで、flexboxでブロックを配置します。[woof sid="topbar"] で配置したフォームの場合は次のとおりです。

/*
 * HUSKY: filter sections in one row above the products.
 * Advanced → Code → Custom CSS code, or the theme's Additional CSS.
 */
.woof_sid_topbar .woof_redraw_zone {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 12px;
}
.woof_sid_topbar .woof_container {
    flex: 1 1 180px;      /* share the row, never narrower than 180px */
    width: auto;
    margin: 0;
    padding: 0;
    overflow: visible;    /* drop-down panels must not be cut off */
}
.woof_sid_topbar .woof_submit_search_form_container {
    flex: 0 0 auto;       /* Filter and Reset buttons at the end of the row */
    margin: 0;
}
.woof_sid_topbar .chosen-container,
.woof_sid_topbar .select2-container {
    width: 100% !important;
}
@media (max-width: 767px) {
    .woof_sid_topbar .woof_container,
    .woof_sid_topbar .woof_submit_search_form_container {
        flex-basis: 100%;
    }
}

幅1200pxのコンテンツエリアなら、5〜6個のドロップダウンが1行に収まります。それ以上は、詰め込まれるのではなく2行目に折り返されます。フィルター (Filter)ボタンはオートサブミット (Autosubmit)がオフの場合にのみ存在し、リセット (Reset)は何かを選択した後にのみ表示されるため、ボタンのブロックは空であることが多く、その場合は行の中で場所を取りません。768px未満では、すべてのブロックが全幅になります。同じルールを自動フィルターに適用するには、.woof_sid_topbar をそのスキンのクラス（たとえば .woof_sid_flat_grey、デフォルト (Default)スキンなら .woof_sid_auto_shortcode）に置き換えてください。

1つのフィルターのタームを行または列に並べる

サイズやブランドが縦に長く並ぶ問題は、もう半分の課題です。チェックボックスとラジオボタンの場合は、構造 (Structure)でそのセクションの追加オプションを開き、アイテムを横並びに表示 (Display items in a row)をはい (Yes)に設定します。アイテムが横に流れ、折り返されます。これはサブカテゴリーのないタームに適用されます。子を持つ親は、その下にサブカテゴリーが開けるように、独立した1行のままです。

カラム数を固定したい場合は、1つのセクションのリストにCSSグリッドを使用します。

/* Sizes in three equal columns. Replace pa_size with your taxonomy slug. */
.woof .woof_container_pa_size ul.woof_list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4px 12px;
}

すべてのセクションには、woof_container_ にタクソノミーのスラッグを続けたクラスが付いています。woof_container_product_cat、woof_container_pa_color、woof_container_pa_size などです。サブカテゴリーのリストは独自のクラスを持つため、グリッドは第1階層にのみ適用されます。長いリストを短く保ちたい場合は、同じ追加オプションのブロックの最大高さ (Max height of the block)を設定します。リストに独自のスクロールバーが付きます。ほかのセレクターは、CSSでフィルターのスタイルを設定するガイドにあります。

崩れた横並びレイアウトを修正する

• まずクラス名を調べます。詳細設定 (Advanced) → オプション (Options) → ブロックヘルパーボタンを表示 (Show blocks helper button)をはい (Yes)に設定します。すると管理者には、sid を持つすべてのフィルターの上にブロックヘルパーを表示 (show blocks helper)リンクが表示されます。クリックすると、各セクションに woof_container_pa_color などのクラス名が表示され、フォームのクラスも出力されます。その後は、ヘルパーボタンに関するFAQのとおりにオフにしてください。
• ブロックがまだ縦に積み重なる。コンテナの幅が狭すぎる（ウィジェットエリアや狭いビルダーのカラム）か、以前のカスタムCSSが .woof_container に幅やフロートを設定しています。新しいルールを追加する前に、過去の試行を削除してください。フロートベースとflexベースのルールが混在すると、予測できない結果になります。
• タイトルが白いボックスに隠れる、リストが切れる。デフォルト (Default)の自動スキンは、各ブロックの高さを250pxに制限し、独自のスクロールバーを付けます。またテーマは、コンテンツエリア内のブロックにフロート、背景、固定の高さを追加することがよくあります。フォーム用にそれらをリセットしてください（例：.woof_sid_auto_shortcode .woof_container { float: none; max-height: none; overflow: visible; }）。または、Flatスキンに切り替えます。
• ドロップダウンパネルが商品の後ろで開く。フォームに独自の重ね順を設定します。.woof_sid_topbar { position: relative; z-index: 20; }
• ビルダーのレイアウト。ElementorまたはDiviでは、商品の上にある全幅セクション内のショートコードウィジェットまたはモジュールにショートコードを置きます。グリッド自体は、フィルターが制御できるものでなければなりません。Elementorのループグリッドの絞り込みを参照してください。
• CSSを編集しても何も変わらない。ページキャッシュと、結合または最適化されたCSSをすべてクリアし、ログアウトした状態でテストしてください。

デモサイトで使用しているCSSには、フィルターのレイアウトの実用的な例がさらに掲載されています。

チェックリスト

• 1ページにつきフィルターフォームは1つ：サイドバーのウィジェットを削除するか、ショートコードを使う場合はフィルターを自動的に設定 (Set filter automatically)をオフにする。
• バーを常に表示したい場合は、自動フィルターをデフォルトで非表示 (Hide auto filter by default)をいいえ (No)にする。
• フィルターが全幅のコンテナにある。4カラムの場合、ショップにサイドバーがない。
• カラムは、sid 内の woof_auto_N_columns クラスで設定するか、モバイルモードが必要な場合は1語の sid とCSSを使う。
• 1行のバーにはドロップダウンの表示タイプ、長いチェックボックスリストにはアイテムを横並びに表示 (Display items in a row)またはグリッドを使う。
• キャッシュをクリアし、ログアウトした状態で、デスクトップとスマートフォンの両方でページを確認した。

それでもレイアウトが崩れる場合は、ページのリンクと追加したCSSを添えて、HUSKYサポートフォーラムでトピックを立ててください。私たちが確認します。