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

商品カテゴリに基づいて異なるフィルターセットを表示する方法、依存関係のあるフィルタリングを作成する方法、WooCommerce ショップページでフィルターをカスタマイズする方法を学びます。

問題

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

例:

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

現在の制限： カテゴリを選択してもすべてのフィルターオプションがグローバルなままになり、インターフェイスが無関係なフィルターで煩雑になります。

学習内容:

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

解決策 1: 依存フィルタリングを有効にする (AJAX 再描画)

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

ウィジェットの場合:

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

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

ショートコードの場合:

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

[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 ウィジェット)
Page builder blocks (Elementor, Divi, etc.)
Theme template files: <?php echo do_shortcode('[woof_dynamic]'); ?>

ステップ3: カテゴリの設定

更新する $filters_map 次の配列を使用します：

カテゴリースラッグ （例：「wheel」、「electronics」）
属性のスラッグ (例: ‘pa_brand’, ‘pa_size’)

スラッグの検索方法:

カテゴリスラッグ:

移動 Products → Categories
カテゴリ名をホバー
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 プラグインをインストールする

いずれかのプラグインを選択してください：

ウィジェットロジック: https://wordpress.org/plugins/widget-logic/
ロジックによるウィジェットの表示： https://github.com/realmag777/Show-WordPress-Widget-by-Logic

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

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

ステップ3：条件付きロジックを追加する

各ウィジェットについて、表示条件を追加します：

Wheel カテゴリでのみ表示:

is_product_category('wheel')

ランジェリーカテゴリーのみに表示:

is_product_category('lingerie')

ショップページでのみ表示:

is_shop() AND !is_product_category()

複数のカテゴリに表示：

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

ショップページを除くすべてに表示:

!is_shop()

電子機器またはコンピューターのカテゴリで表示：

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 array
マッピングにカテゴリが存在するか確認してください。

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

問題: ページにフィルターが表示されません
ソリューション:

属性のスラッグが～で始まることを確認 pa_ (例: pa_color not color)
そのカテゴリの製品に属性が割り当てられているか確認してください。
使用 [woof] 基本的なショートコードが機能するかどうかを確認するために一時的に

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

問題: ショップページでフィルターセットが正しく表示されない
ソリューション:

Verify is_shop() 条件はコードの最初にあります
確認する !is_product_category() is included
すべてのキャッシュ（WordPress、サーバー、ブラウザ）をクリア

Attribute slugs not working

問題: 特定の属性でフィルターが表示されない
ソリューション:

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

追加後にコードが機能しない

問題: コード追加後に白い画面またはエラーが発生する
ソリューション:

エラーログでPHP構文エラーを確認する
child theme の functions.php を編集していることを確認してください。
すべてのブラケットと引用符が閉じられていることを確認してください
コードを削除し、行ごとに元に戻します

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

AJAX再描画の影響：

各選択は AJAX リクエストをトリガーします
商品数が多い = 応答時間が長くなる
ソリューション: キャッシュを使用し、データベースを最適化する

複数のウィジェット対ショートコード：

ウィジェット: より多くのメモリ使用量 (すべてのウィジェットがロードされます)
Shortcode: More efficient (only one set loads)
Recommendation: Use shortcode approach

大規模カタログ：

フィルターでのページネーションを考慮する
属性に遅延読み込みを使用する
サーバーサイドキャッシングを実装する

代替アプローチ

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

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再描画を有効にする

Solution 2: Create [woof_dynamic] カテゴリマッピング付きショートコード

ソリューション 3: 最小限のフィルターでショップページ処理を追加

ソリューション 4: Widget Logic を使用して高度な表示制御を行う

最善のアプローチ: 2 + 3 を組み合わせて包括的な動的フィルタリングを実現

Key Code:

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
});

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