カテゴリーごとに異なるWooCommerceフィルターを表示する方法（動的フィルタリング）

さまざまな商品カテゴリーに基づいて異なるフィルターセットを表示する方法、依存フィルタリングの作成方法、WooCommerceのショップページ用のカスタムフィルターの設定方法を学びます。

問題点

デフォルトでは、WOOFはすべてのページで同じフィルターを表示します。しかし、異なる商品カテゴリーには異なるフィルターオプションが必要な場合がよくあります：

例となるシナリオ：

電子機器カテゴリー：ブランド、画面サイズ、ストレージ、RAMを表示
衣料品カテゴリー：サイズ、色、素材、スタイルを表示
家具カテゴリー：素材、色、寸法、部屋タイプを表示
ショップページ（メインアーカイブ）：カテゴリー、価格帯、注目ブランドのみ表示

現在の制限：ユーザーがカテゴリーを選択した後でも、すべてのフィルターオプションがグローバルなままであるため、インターフェースが無関係なフィルターでごちゃごちゃになります。

学習内容：

依存/条件付きフィルタリングを有効にする方法（選択に基づいてフィルターが更新される）
商品カテゴリーごとに異なるフィルターを表示する方法
ショップページ用のカスタムフィルターセットを作成する方法
高度な表示制御のためのWidget Logicの使用方法

解決策1：依存フィルタリングを有効にする（AJAX再描画）

最初のステップは、AJAXフォーム再描画を有効にすることです。これにより、ユーザーが選択を行うとフィルターが動的に更新されます。

ウィジェットの場合：

外観 → ウィジェット に移動
WOOFウィジェットを見つける
“フォームAJAX再描画” オプションを有効にする

これにより、各選択後にフィルターが自動的に更新され、関連するオプションのみが表示されます。

ショートコードの場合：

WOOFショートコードに ajax_redraw 属性を追加します：

[woof ajax_redraw="1"]

これによって行われること：

ユーザーが「Wheel」を選択 → 他のフィルターが自動更新
Wheelで利用可能なサブタイプ、素材、色のみを表示
無関係なオプションを非表示にして、ごちゃごちゃを軽減

ドキュメント： https://products-filter.com/shortcode/woof

解決策2：カテゴリーベースのフィルター表示（カスタムショートコード）

この解決策では、現在の商品カテゴリーに応じて異なるフィルターを表示する動的ショートコードを作成します。

ステップ1：カスタムショートコードを作成する

このコードを子テーマの functions.php に追加します：

/**
 * Dynamic WOOF shortcode that shows different filters per category
 * Usage: [woof_dynamic]
 */
add_shortcode('woof_dynamic', function () {
    // Check if WOOF is active
    if (!function_exists('woof_shortcode')) {
        return '<!-- WOOF plugin not active -->';
    }

    // Get current category
    $term = get_queried_object();

    // Check if we're on a product category page
    if (!$term || !isset($term->taxonomy) || $term->taxonomy !== 'product_cat') {
        return do_shortcode('[woof]'); // Show default filters
    }

    // Get category slug
    $cat = strtolower($term->slug);

    // Define which filters to show for each category
    $filters_map = [
        'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
        'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
        'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
        'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
        'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        'furniture' => ['pa_material', 'pa_color', 'pa_dimensions', 'pa_room'],
    ];

    // If category not in map, show default filters
    if (!isset($filters_map[$cat])) {
        return do_shortcode('[woof]');
    }

    // Build shortcode with specific filters for this category
    $taxonomies = implode(',', $filters_map[$cat]);

    return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
});

ステップ2：ショートコードを使用する

既存の [woof] ショートコードを次のように置き換えます：

[woof_dynamic]

このショートコードを配置する場所：

ウィジェットエリア（テキスト/HTMLウィジェット）
ページビルダーブロック（Elementor、Diviなど）
テーマテンプレートファイル： <?php echo do_shortcode('[woof_dynamic]'); ?>

ステップ3：カテゴリーを設定する

$filters_map 配列を実際の値で更新します：

カテゴリースラッグ（例：「wheel」、「electronics」）
属性スラッグ（例：「pa_brand」、「pa_size」）

スラッグを見つける方法：

カテゴリースラッグ：

商品 → カテゴリー に移動
カテゴリー名にマウスを合わせる
URLを見る： ...tag_ID=123&taxonomy=product_cat&post_type=product
またはカテゴリーを編集してスラッグフィールドを確認

属性スラッグ：

商品 → 属性 に移動
pa_ で始まり、その後ろに属性名が続く
例： pa_color、 pa_size、 pa_brand、 pa_material

解決策3：ショップページ用のカスタムフィルター

メインのWooCommerceショップページはカテゴリーアーカイブではないため、異なる処理が必要です。

統合解決策：ショップページ + カテゴリーページ

このコードはショップページと個々のカテゴリーページの両方を処理します：

/**
 * Dynamic WOOF shortcode with Shop page support
 * Shows minimal filters on Shop, full filters on categories
 */
add_shortcode('woof_dynamic', function () {
    if (!function_exists('woof_shortcode')) {
        return '';
    }

    // Shop page (main product archive) - show minimal filters
    if (is_shop() AND !is_product_category() AND !is_product_tag()) {
        return do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]');
    }

    // Product category pages - show category-specific filters
    $term = get_queried_object();
    if ($term AND isset($term->taxonomy) AND $term->taxonomy === 'product_cat') {
        $cat = strtolower($term->slug);

        // Define filters for each category
        $filters_map = [
            'wheel' => ['pa_sub-type', 'pa_material', 'pa_colour', 'pa_size'],
            'lingerie' => ['pa_size', 'pa_colour', 'pa_material'],
            'massage-candles' => ['pa_type', 'pa_material', 'pa_brand'],
            'electronics' => ['pa_brand', 'pa_screen-size', 'pa_storage'],
            'clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_style'],
        ];

        if (isset($filters_map[$cat])) {
            $taxonomies = implode(',', $filters_map[$cat]);
            return do_shortcode('[woof tax_only="' . esc_attr($taxonomies) . '" ajax_redraw="1"]');
        }
    }

    // Fallback - show all filters
    return do_shortcode('[woof ajax_redraw="1"]');
});

このコードの動作：

ショップページ：カテゴリー、色、価格フィルターのみ表示
カテゴリーページ：マッピングからカテゴリー固有のフィルターを表示
その他のページ：デフォルトフィルターを表示

ショップページのフィルターをカスタマイズ：この行を変更してショップページに異なるフィルターを表示：

[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

利用可能なパラメーター：

tax_only="product_cat,pa_brand" – これらのタクソノミーのみを表示
by_price="1" – 価格帯フィルターを表示
by_only="product_cat,pa_brand" – tax_onlyの代替
ajax_redraw="1" – 動的更新を有効にする

解決策4：条件付き表示のためのWidget Logic

ショートコードではなくウィジェットを使用したい場合は、条件ロジックでウィジェットの表示を制御できます。

ステップ1：Widget Logicプラグインをインストール

次のいずれかのプラグインを選択：

Widget Logic： https://wordpress.org/plugins/widget-logic/
Show Widget by Logic： https://github.com/realmag777/Show-WordPress-Widget-by-Logic

ステップ2：複数のWOOFウィジェットを作成

外観 → ウィジェット に移動
サイドバーに複数のWOOFウィジェットを追加
各ウィジェットに異なるフィルターを設定

ステップ3：条件ロジックを追加

各ウィジェットに表示条件を追加：

Wheelカテゴリーのみ表示：

is_product_category('wheel')

Lingerieカテゴリーのみ表示：

is_product_category('lingerie')

ショップページのみ表示：

is_shop() AND !is_product_category()

複数のカテゴリーに表示：

is_product_category(array('wheel', 'lingerie', 'massage-candles'))

ショップページ以外のすべてに表示：

!is_shop()

ElectronicsまたはComputersカテゴリーに表示：

is_product_category('electronics') || is_product_category('computers')

実際の例

例1：アダルト製品ストア

$filters_map = [
    'wheel' => ['pa_type', 'pa_material', 'pa_color', 'pa_power-source', 'pa_waterproof'],
    'lingerie' => ['pa_size', 'pa_color', 'pa_style', 'pa_material'],
    'oil' => ['pa_type', 'pa_brand', 'pa_ingredients', 'pa_volume'],
    'toys' => ['pa_category', 'pa_material', 'pa_size', 'pa_color'],
];

例2：家電ストア

$filters_map = [
    'laptops' => ['pa_brand', 'pa_processor', 'pa_ram', 'pa_storage', 'pa_screen-size'],
    'smartphones' => ['pa_brand', 'pa_storage', 'pa_ram', 'pa_camera', 'pa_battery'],
    'headphones' => ['pa_brand', 'pa_type', 'pa_connection', 'pa_noise-cancelling'],
    'cameras' => ['pa_brand', 'pa_megapixels', 'pa_sensor-size', 'pa_video-quality'],
];

例3：ファッションストア

$filters_map = [
    'mens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_style'],
    'womens-clothing' => ['pa_size', 'pa_color', 'pa_material', 'pa_brand', 'pa_occasion'],
    'shoes' => ['pa_size', 'pa_color', 'pa_brand', 'pa_type', 'pa_material'],
    'accessories' => ['pa_color', 'pa_material', 'pa_brand', 'pa_type'],
];

例4：家具ストア

$filters_map = [
    'bedroom' => ['pa_type', 'pa_material', 'pa_color', 'pa_style', 'pa_size'],
    'living-room' => ['pa_type', 'pa_material', 'pa_color', 'pa_seating-capacity'],
    'office' => ['pa_type', 'pa_material', 'pa_color', 'pa_ergonomic'],
    'outdoor' => ['pa_type', 'pa_material', 'pa_weather-resistant', 'pa_color'],
];

高度な設定：価格とカテゴリーを含める

属性に加えて価格帯とカテゴリーを表示したい場合：

// On category pages, add price and allow category drill-down
if (isset($filters_map[$cat])) {
    $taxonomies = implode(',', $filters_map[$cat]);
    return do_shortcode('[woof tax_only="product_cat,' . esc_attr($taxonomies) . '" by_price="1" ajax_redraw="1"]');
}

パラメーターの説明：

product_cat – ドリルダウン用のカテゴリーフィルターを表示
by_price="1" – 価格帯スライダーを表示
ajax_redraw="1" – フィルターを動的に更新

トラブルシューティング

フィルターが動的に更新されない

問題： 選択後もフィルターが静的なまま
解決策：

ショートコードに ajax_redraw="1" が含まれていることを確認
ウィジェット設定で「フォームAJAX再描画」を有効にする
JavaScriptコンソールでエラーを確認

カテゴリーに間違ったフィルターが表示される

問題： カテゴリーに誤ったフィルターセットが表示される
解決策：

カテゴリースラッグが正しいか確認（URLまたはカテゴリー設定を確認）
$filters_map 配列で小文字を使用
カテゴリーがマッピングに存在するか確認

フィルターがまったく表示されない

問題： ページにフィルターが表示されない
解決策：

属性スラッグが pa_ で始まっていることを確認（例： pa_color であって color ではない）
そのカテゴリーの商品に属性が割り当てられているか確認
一時的に [woof] を使用して基本ショートコードが機能するか確認

ショップページにカテゴリーフィルターが表示される

問題： ショップページに間違ったフィルターセットが表示される
解決策：

is_shop() 条件がコードの最初にあることを確認
!is_product_category() が含まれていることを確認
すべてのキャッシュをクリア（WordPress、サーバー、ブラウザ）

属性スラッグが機能しない

問題： 特定の属性のフィルターが表示されない
解決策：

商品 → 属性 に移動して正しいスラッグを見つける
pa_ プレフィックスを使用することを忘れない（WooCommerceの要件）
スペルを確認： pa_colour と pa_color

コード追加後に動作しない

問題： コード追加後に白画面またはエラーが発生
解決策：

エラーログでPHP構文エラーを確認
子テーマのfunctions.phpを編集していることを確認
すべての括弧と引用符が閉じていることを確認
コードを削除し、1行ずつ追加し直す

パフォーマンスに関する考慮事項

AJAX再描画の影響：

各選択でAJAXリクエストが発生
商品数が多いほど応答時間が長くなる
解決策：キャッシュを使用し、データベースを最適化

複数ウィジェット vs. ショートコード：

ウィジェット：メモリ使用量が多い（すべてのウィジェットが読み込まれる）
ショートコード：効率的（1セットのみ読み込まれる）
推奨：ショートコードアプローチを使用

大規模なカタログ：

フィルターでのページネーションを検討
属性の遅延読み込みを使用
サーバーサイドキャッシュを実装

代替アプローチ

複数のショートコードを使用

1つの動的ショートコードの代わりに、複数の静的ショートコードを使用：

// On wheel category page
[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size" ajax_redraw="1"]

// On Lingerie category page
[woof tax_only="pa_size,pa_colour,pa_material" ajax_redraw="1"]

// On Shop page
[woof tax_only="product_cat,pa_colour" by_price="1" ajax_redraw="1"]

その後、Widget Logicを使用して各ページに正しいショートコードを表示します。

テンプレートファイルを使用

テーマテンプレートに直接条件ロジックを追加：

<?php
if (is_product_category('books')) {
    echo do_shortcode('[woof tax_only="pa_sub-type,pa_material,pa_colour,pa_size"]');
} elseif (is_product_category('lingerie')) {
    echo do_shortcode('[woof tax_only="pa_size,pa_colour,pa_material"]');
} elseif (is_shop()) {
    echo do_shortcode('[woof tax_only="product_cat,pa_colour" by_price="1"]');
} else {
    echo do_shortcode('[woof]');
}
?>

まとめ

問題： 同じフィルターがすべての場所に表示され、インターフェースがごちゃごちゃする

解決策1： 依存フィルタリングのためのAJAX再描画を有効にする

解決策2： カテゴリーマッピングを使用した [woof_dynamic] ショートコードを作成

解決策3： 最小限のフィルターでショップページ処理を追加

解決策4： 高度な表示制御にWidget Logicを使用

最適なアプローチ： 解決策2と3を組み合わせて包括的な動的フィルタリングを実現

主要コード：

add_shortcode('woof_dynamic', function() {
    // Shop page logic
    if (is_shop() AND !is_product_category()) {
        return do_shortcode('[woof tax_only="product_cat" by_price="1"]');
    }
    
    // Category mapping
    $term = get_queried_object();
    if ($term AND $term->taxonomy === 'product_cat') {
        $filters_map = [
            'category-slug' => ['pa_attribute1', 'pa_attribute2'],
        ];
        // Return category-specific filters
    }
    
    return do_shortcode('[woof]'); // Fallback
});

これにより、各商品カテゴリーに合わせたプロフェッショナルでユーザーフレンドリーなフィルタリング体験が実現します。

問題点