WooCommerce 属性・メタフィールドのレンジスライダーフィルター

15 時間前

サイズ、出力、長さ、画面の対角寸法、年式、走行距離など、数値の商品データには、チェックボックスの長いリストよりもレンジスライダーが向いています。HUSKYでは、属性向けのWooCommerceレンジスライダーフィルターを簡単に有効にできますが、100000が9000より前に表示されたり、1,9が2つの値に分割されたり、常に0から100までの範囲になったりするスライダーになってしまうことも同じくらい簡単に起こります。原因はほとんどの場合同じです。スライダーには2種類あり、数値の扱いが異なります。このガイドでは、両方のスライダーの仕組みと設定方法、そして順序の誤り、小数、空の範囲の対処法を説明します。

2種類のレンジスライダー：属性の値か、数値メタフィールドか

HUSKYは2種類のデータからレンジスライダーを描画でき、どちらを選ぶかでスライダーにできることが決まります。

	属性（タクソノミー）スライダー	メタフィールドスライダー
データ	グローバル属性または他の商品タクソノミーの用語	商品メタに保存された数値：`_length`、`_weight`、ACFの数値フィールド、任意のカスタムフィールド
範囲の意味	用語が並んでいる順序で、2つのハンドルの間にあるすべての用語	実際の数値比較：fromとtoの間の値
スライダーの位置	既存の用語ごとに1つの停止位置、等間隔	最小値と最大値の間の任意の値、指定したステップ刻み
最小値と最大値	最初と最後の用語	範囲（Range）オプションで手動設定
from/toの数値ボックス	なし	あり、入力欄を表示（Show inputs）
テキストの目盛り（ソフト、ミディアム、ハード）	可能	不可、数値のみ
バリアブル商品	商品の属性用語で検索される	商品自体のメタのみが検索され、バリエーションは対象外

重要な違いは、属性の用語がテキストであるという点です。WordPressは 9000 と 100000 を数値ではなく名前として保存するため、属性スライダーは、指定された順序で用語のリストをたどることしかできません。計算は行いません。メタフィールドスライダーはデータベース上で数値を比較するので、ほかのどの商品にもない値を含め、範囲内のあらゆる値を扱えます。

商品の属性タブに直接入力したカスタム商品属性は、背後にグローバル属性がなければタクソノミーではなく、どのフィルタータイプでも使用できません。まず商品 → 属性（Products → Attributes）でグローバル属性を作成してください（WooCommerceドキュメントの商品タクソノミーの管理を参照）。

属性向けのレンジスライダーフィルターを設定する

たとえば出力（Power）というグローバル属性を作成し、その値を用語として追加します：5、7.5、10、15。通常どおり商品に割り当てます。
WooCommerce → 設定 → 商品フィルター → 構造（WooCommerce → Settings → Products Filter → Structure）を開き、その属性のタイプをスライダー（Slider）に設定します。このタイプはSlider拡張機能が追加します。
属性の横にある追加オプション（additional options）（歯車）ボタンをクリックし、スライダーのオプションを設定します。
- タイプ（Type）：from-toの範囲にはダブル（double）、最初の値からハンドルまでのすべてを選択する1つのハンドルにはシングル（single）（「10 kW以下」など）。
- グリッドステップ（Grid step）：スライダーの下に表示するラベルを決めます。1 ですべて表示、2 で1つおき、-1 で両端以外のラベルを非表示にします。長い値が重なる場合に便利です。
- 動的再カウントを有効化（Enable dynamic recount）：現在の結果に商品がない値を除外します（後述）。
- スライダースキン（Slider skin）：このスライダーのデザイン。
フィルタリングのロジック（Logic of filtering）はORのままにしてください。スライダーは選択した区間のすべての用語、たとえば pa_power=5,7-5,10 を送信し、商品はそのうち1つに一致すれば十分です。ANDにすると商品がすべてに一致する必要があり、何も見つからなくなります。

範囲とは「ハンドルの間にある用語」のことなので、用語の順序がスライダーのロジックのすべてです。6.5がリストの8.2より後ろにあると、6から7の範囲ではスキップされます。次のセクションで順序を修正します。

属性スライダーの値の順序が正しくない

典型的な症状：100000が9000より前に来る、10と11が2より前に来る、負の値が-1、-2、-3、0、1の順に並ぶ、ドラッグ中にハンドルが行ったり来たりする。いずれもテキストとしての並べ替えが原因です。対処法は、用語に数値の順序を与えることです。

最善の方法：WooCommerceに属性を数値順で並べ替えさせる

商品 → 属性（Products → Attributes）に移動して属性を編集し、デフォルトの並び順（Default sort order）を名前（数値）（Name (numeric)）に設定します。これでWooCommerceは用語を名前の数値で並べ替え、ドットで書かれた小数、負の数、10 cm のように数字で始まる名前を正しく処理します。スライダーの追加オプションでは、HUSKYがその順序を維持するよう、用語の並べ替え（Sort terms）をデフォルト（Default）のままにしてください。用語をキャッシュ（Cache terms）が有効な場合（詳細設定 → オプション（Advanced → Options））は、その後用語キャッシュをクリア（clear terms cache）を押してください。

テキストの目盛りの場合は、代わりにカスタム順序（Custom ordering）を選び、属性の用語を設定（Configure terms）画面で用語をドラッグして並べます：ソフト、ミディアム、ミディアムハード、ハード。順序を手動で管理したい数値リストにも、同じドラッグ＆ドロップが使えます。

HUSKY独自の用語の並べ替えオプション

スライダーの追加オプションにある用語の並べ替え（Sort terms）オプションは、デフォルトの順序を上書きします。

タイトル（Title）は名前の自然順ソートを使用します。正の整数（2が10より前）や 10 cm のような名前には正しく動作しますが、小数や負の数には対応しません。
数値（Numeric.）は用語のスラッグ（slug）の整数部分の値を比較します。正の整数にのみ有効です。6.5 のスラッグは 6-5 で、6として扱われ、WordPressはスラッグ作成時に先頭のマイナスを取り除くため、-3 は3として並べ替えられます。

コード：任意のタクソノミースライダーの数値順

カスタムタクソノミーでは、WooCommerceの名前（数値）（Name (numeric)）が使えないため、スライダーの値をコードで並べ替えます。woof_sort_terms_before_out フィルターは、各フィルターの用語とフィルタータイプを受け取ります。

/**
 * HUSKY: order the values of every taxonomy range slider by their number
 * (decimals with a dot and negative numbers included).
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_sort_terms_before_out', function ( $terms, $type ) {
    if ( 'slider' === $type && is_array( $terms ) ) {
        uasort( $terms, function ( $a, $b ) {
            return (float) $a['name'] <=> (float) $b['name'];
        } );
    }
    return $terms;
}, 20, 2 );

先頭に数字のない用語（テキストの目盛り）はここではすべて0として扱われ、既存の順序を保つため、このスニペットがそのようなスライダーに影響することはありません。

属性スライダーの小数、カンマ、不均等なステップ

小数はドットで書きます。スライダーはラベルをカンマ区切りの1つのリストとして受け取るため、1,9 という名前の用語は 1 と 9 の2つのラベルになり、それ以降のすべての位置が誤った用語を指すことになります。そのような用語は 1.9 に名前を変更してください。これはストアの小数点区切りの設定とは関係ありません。用語名はただのテキストだからです。
位置は値ではなく用語ごとに等間隔です。1、2、5、50の用語は4つの等しいステップになります。スライダーを比例した見た目にしたい場合は、間の値を用語として追加してください。
スライダーには少なくとも2つの値が必要です。用語が2つだけの場合、ハンドルは両端にしか置けません。動的再カウントのあとに残る値が2つ未満になると、スライダーはまったく表示されません。
選択できるのは既存の用語のみです。値が6.5の商品は、6.5という用語が存在し、ハンドルの間にある場合にのみ見つかります。

メタフィールドのレンジスライダー：寸法、年式、その他の数値

値が実際の測定値である場合は、通常メタフィールドスライダーのほうが適しています。数値を比較し、from/toの入力を受け付け、何千もの異なる値があっても高速です。Meta Fields拡張機能での設定方法は次のとおりです。

フィルター設定のメタデータ（Meta Data）タブを開きます。キーを手動で追加（Add Custom key by hands）にキーを入力するか、商品IDから任意の商品のキーを取得（Get keys from any product by its ID）を使って、商品がどのキーを持っているかを確認します。
フィールドのタイプを数値（number）、ビューをスライダー（Slider）に設定します。スライダーはテキストフィールドや日付フィールドでは選択できません。保存します。
フィールドの追加オプションを開き、範囲（Range）を min^max の形式（たとえば 10^250）で入力します。ステップ（Step）（0.5 も使えます）を設定し、必要に応じてプレフィックス（Prefix）、ポストフィックス（Postfix）（cm）、from/toの数値ボックス用の入力欄を表示（Show inputs）、桁区切り用の見やすい形式を使用（Use prettify）も設定します。
新しいフィルター項目を、ほかの項目と同じように構造（Structure）タブに配置します。

便利なキー：WooCommerceは、商品の配送用寸法と重量を _length、_width、_height、_weight として保存します。ACFの数値フィールドは、そのフィールド名で保存されます。メタキーの詳細はメタデータのドキュメントにあります。

メタスライダーについて知っておくべきこと：

範囲は自動計算されません。スライダーには入力した範囲（Range）がそのまま表示され、空欄の場合は0〜100になります。実際の最小値と最大値を求めるには、ページ表示のたびにすべての商品を読み込む必要があるためです。動的再カウントが決めるのはどのフィルターと値を表示するかであり、スライダーの始点と終点ではありません。新しい商品が範囲を超えた場合は、範囲を更新してください。
数値はそのままの形で保存します。小数点にはドットを使い、桁区切りは使いません：1250.5。データベースは値の先頭にある数字のみを読み取るため、1,250.5 は1として、1250,5 は1250として比較されます。
年式：1990^2026 のような範囲、ステップは 1、見やすい形式を使用（Use prettify）はいいえ（No）に設定します。そうしないと2026が「2 026」と表示されます。
バリエーション：商品自体のメタが検索されます。値がバリエーションにしかない場合は、親商品にも保存するか、属性を使用してください。

小数値：woof_slider_meta_query_type

デフォルトでは、メタスライダーは値を NUMERIC として比較しますが、MySQLはこれを整数として扱います。そのため、10.11の商品は1〜10の範囲で見つかり、4.2、4.4、4.6はすべて4として扱われます。小数を比較するには、woof_slider_meta_query_type フィルターでタイプを変更します。

/**
 * HUSKY: compare these meta sliders as decimal numbers.
 * Child theme functions.php or a code snippets plugin.
 */
add_filter( 'woof_slider_meta_query_type', function ( $type, $meta_key ) {
    if ( in_array( $meta_key, array( '_length', '_width', '_height', 'screen_size' ), true ) ) {
        return 'DECIMAL(10,2)'; // up to 99999999.99
    }
    return $type;
}, 10, 2 );

DECIMAL(M,D) では、M が全体の桁数、D が小数点以下の桁数です。最大の値に合わせて選んでください。DECIMAL(5,3) では最大値が99.999で、それより大きい値はすべて99.999として扱われます。

現在のカテゴリーに該当しないスライダーを非表示にする

属性スライダー：追加オプションで動的再カウントを有効化（Enable dynamic recount）をはい（Yes）に設定します。現在のカテゴリーとフィルター選択に商品がない値は消え、残りの値が2つ未満になるとスライダーは削除されます。各値ごとに1回の追加カウントクエリが発生するため、数百の用語を持つ属性ではページ速度に注意するか、メタスライダーを使用してください。
メタスライダー：オプションタブで空の用語を非表示（Hide empty terms）をはい（Yes）に設定すると、現在の結果で範囲内に商品がないメタスライダーは表示されません。

値のない属性スライダーは、ページ読み込み後にプラグインのスクリプトによって削除されるため、タイトルが一瞬表示されることがあります。次のCSSを使うと最初から非表示になります（外観 → カスタマイズ → 追加CSS、または子テーマのスタイルシート）。

/* HUSKY: hide empty taxonomy sliders before the script removes them */
.woof_container_slider:has(.woof_hide_slider) {
    display: none;
}

商品自体が範囲を持つ場合

スライダーは、商品ごとに1つの値で商品を見つけます。商品が範囲を持つ場合（身長150〜190 cmに適している、プレイヤー3〜10人など）、「範囲の重なり」を検索する機能は組み込まれていません。実用的なモデルは2つあります。

たとえば players_min と players_max のように2つのメタフィールドを用意し、それぞれに専用のスライダーを設定します。4人用のゲームを探す訪問者は、1つ目のスライダーを1〜4、2つ目のスライダーを4〜10に設定します。
値ごとに1つの用語（150、151 ... 190）を持つ属性を作り、当てはまるすべての用語を商品に割り当てて、その属性をスライダーとして表示します。用語は手作業ではなく、一括で割り当ててください。

チェックリスト

属性スライダー：グローバル属性、小数はドットで記述、デフォルトの並び順（Default sort order）を名前（数値）（Name (numeric)）に設定するか用語をドラッグして並べる、フィルタリングのロジック（Logic of filtering）はORのまま。
メタスライダー：フィールドタイプは数値（number）、値は純粋な数値、範囲（Range）を min^max で入力、小数値には小数用のタイプ。
異なる値が多い場合や実際の測定値：数百の用語を持つ属性ではなく、メタスライダー。
該当しないカテゴリーにスライダーが表示される：属性スライダーには動的再カウントを有効化（Enable dynamic recount）、メタスライダーには空の用語を非表示（Hide empty terms）。

これらの手順を行ってもスライダーの値が正しくない場合は、属性またはメタキー、いくつかの値の例、ページへのリンクを添えて、HUSKYサポートフォーラムでご質問ください。