加速大型 WooCommerce 产品分类筛选：延迟加载滑出面板

当您拥有一个父级产品分类，且具备以下情况时：

大量产品（500-1000+）
深层次分类层级（多级子分类）
启用动态重新计数

产品筛选可能在每次页面加载时生成数百个 SQL 查询，即使用户从未使用筛选器。这会导致：

页面加载缓慢（10 秒以上）
504 网关超时错误
服务器负载过高
用户体验差

为什么会发生这种情况

启用动态重新计数后，WOOF 必须：

递归处理所有子分类
为每个术语执行 SQL 查询以计数产品
考虑当前分类上下文计算数量

示例： 一个 “太阳镜” 分类，其下有子分类（男 → 女 → 款式 → 品牌），会产生大量查询负载。

传统解决方案（不够）

❌ 通过 CSS/显示规则隐藏滑出面板 — 筛选器仍在服务器端处理
❌ 禁用动态重新计数 — 失去重要功能
❌ 移除筛选选项 — 用户无法正常筛选
❌ 数据库索引 — 改进很小，不能解决根本原因

最优解决方案：懒加载滑出面板

核心理念： 仅在用户实际打开滑出面板时才加载筛选器。

✅ 页面即时加载（无需筛选处理）
✅ 需要时筛选器完美工作
✅ 不浪费服务器资源
✅ 非常适合爬虫和普通浏览者
✅ 保留所有筛选功能完整

实现

将以下代码添加到您主题的 functions.php 中：

/**
 * WOOF Lazy-Load Slideout Filter
 * Loads filter only when user clicks to open slideout
 * Solves performance issues with deep category hierarchies
 */
add_action('wp_footer', function () {
    // Only on product category pages (optional - remove condition to show everywhere)
    if (!is_product_category()) {
        //return;
    }
    ?>

    <!-- Slideout Trigger Button -->
    <div id="woof-slideout-trigger" style="position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 9999; cursor: pointer; background: #333; color: #fff; padding: 15px 10px; border-radius: 5px 0 0 5px; font-weight: bold; writing-mode: vertical-rl; text-orientation: mixed;">
        FILTERS
    </div>

    <!-- Slideout Panel -->
    <div id="woof-slideout-panel" style="position: fixed; right: -350px; top: 0; width: 350px; height: 100%; background: #fff; box-shadow: -2px 0 10px rgba(0,0,0,0.3); z-index: 9998; transition: right 0.3s ease; overflow-y: auto; padding: 20px;">
        
        <!-- Close Button -->
        <div style="text-align: right; margin-bottom: 15px;">
            <span id="woof-slideout-close" style="cursor: pointer; font-size: 24px; font-weight: bold;">✖</span>
        </div>

        <!-- WOOF Filter with autohide - loads only on first click -->
        <?php echo do_shortcode('[woof autohide=0 start_filtering_btn=1]'); ?>
    </div>

    <!-- Background Overlay -->
    <div id="woof-slideout-overlay" style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); z-index: 9997; display: none;"></div>

    <script>
        jQuery(document).ready(function ($) {
            var $trigger = $('#woof-slideout-trigger');
            var $panel = $('#woof-slideout-panel');
            var $overlay = $('#woof-slideout-overlay');
            var $close = $('#woof-slideout-close');
            var filterLoaded = false;

            // Open slideout
            $trigger.on('click', function () {
                $panel.css('right', '0');
                $overlay.fadeIn(300);

                // Auto-trigger WOOF "Start Filtering" button on first open
                if (!filterLoaded) {
                    setTimeout(function () {
                        var $woofBtn = $('.woof_start_filtering_btn');
                        if ($woofBtn.length) {
                            $woofBtn.trigger('click');
                            // Hide the button after triggering
                            $woofBtn.hide();
                            filterLoaded = true;
                        }
                    }, 500);
                }
            });

            // Close slideout
            function closeSlideout() {
                $panel.css('right', '-350px');
                $overlay.fadeOut(300);
            }

            $close.on('click', closeSlideout);
            $overlay.on('click', closeSlideout);
        });
    </script>

    <?php
}, 999);

配置步骤

禁用您当前的滑出面板（如果已启用，在 WOOF 设置中）
将上述代码添加到当前主题的 functions.php 中
保持以下 WOOF 设置启用：
- 缓存动态重新计数：是
- 缓存术语：是
- 隐藏空术语：是
- 动态重新计数：是
可选自定义：
- 调整滑出面板宽度：更改 width: 350px 和 right: -350px
- 更改按钮位置：修改 top: 50%
- 自定义颜色：更新 background 和 color 的值
- 使其全站生效：移除 if (!is_product_category()) 条件

工作原理

页面加载：仅渲染触发按钮（无筛选处理）
用户点击按钮：滑出面板打开，遮罩层出现
仅首次打开：JavaScript 自动点击隐藏的 “开始筛选” 按钮
筛选器加载：WOOF 处理所有查询并显示筛选选项
后续打开：筛选器已加载，瞬间打开

实际效果

优化前：

页面加载：10-15 秒（或 504 超时）
每次页面查看 500+ 个 SQL 查询
跳出率高

优化后：

页面加载：< 2 秒
筛选器加载约 3 秒（仅在请求时）
服务器负载降低约 50%（许多用户从不打开筛选器）

兼容性

✅ 适用于所有 WOOF 版本
✅ 兼容页面缓存（WP Rocket、LiteSpeed 等）
✅ 移动端友好
✅ 适用于任何 WordPress 主题

高级自定义

匹配您的主题样式：

/* Add to your theme's CSS */
#woof-slideout-trigger {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    font-family: 'Your Theme Font', sans-serif;
    letter-spacing: 2px;
}

#woof-slideout-panel {
    background: #f8f9fa;
    font-family: 'Your Theme Font', sans-serif;
}

#woof-slideout-trigger:hover {
    transform: translateY(-50%) scale(1.05);
}

左侧滑出面板：

更改以下值：

right: -350px  →  left: -350px
right: 0       →  left: 0
right: -350px  →  left: -350px

何时使用此方案

在以下情况下使用懒加载滑出面板：

分类具有深层层级（3 级以上）
分类中有 500+ 个产品
需要动态重新计数
页面加载时间 > 5 秒
遇到 504 超时

侧边栏筛选器的替代方案

如果您更喜欢侧边栏而不是滑出面板，请使用：

echo do_shortcode('[woof autohide=1 start_filtering_btn=1]');

这会在您的侧边栏创建一个 “开始筛选” 按钮，点击后加载筛选器。

此方案在性能和功能之间提供了最佳平衡，确保页面快速加载，同时为有需要的用户保留完整的筛选能力。

参考：https://pluginus.net/support/topic/performance-issue-504-timeouts-on-parent-category-with-deep-hierarchy-flatsome-theme/