WordPress 6.2.2+WooCommerce产品分类描述展开收起功能故障求助

问题现象 #

• 手动插入的<span id="dots"></span>、<span id="more">标签在更新后消失
• "Read more"显示为纯文本，点击无交互效果

核心原因 #

WordPress编辑器（古腾堡/经典编辑器）会自动过滤或转义自定义HTML标签，导致手动插入的结构被清理；同时直接使用onclick可能因脚本加载顺序或冲突失效。

解决方法 #

1. 编辑器端调整（快速临时方案）

• 古腾堡编辑器：点击顶部工具栏的「更多选项」（三个点图标），切换到「代码编辑器」模式，再插入完整的HTML结构，避免可视化模式自动清理标签。
• 经典编辑器：进入「设置→写作」，取消勾选「使用可视化编辑器时自动纠正无效的HTML」，切换到「文本」模式插入代码。

2. 用PHP钩子自动生成结构（推荐长期方案）

无需手动编辑分类描述，通过主题functions.php添加代码自动处理：

// 自动为产品分类描述添加Read more/Read less结构
function woocommerce_category_read_more( $description ) {
    // 仅在前端分类页面生效
    if ( is_product_category() && ! is_admin() ) {
        $trim_length = 200; // 自定义需要截断的字符数
        if ( strlen( wp_strip_all_tags( $description ) ) > $trim_length ) {
            $trimmed_content = wp_trim_words( $description, $trim_length, '' );
            $remaining_content = substr( $description, strlen( $trimmed_content ) );
            
            $description = sprintf(
                '%s<span id="dots">...</span><span id="more">%s</span><span id="myBtn">Read more</span>',
                $trimmed_content,
                $remaining_content
            );
        }
    }
    return $description;
}
add_filter( 'term_description', 'woocommerce_category_read_more', 10, 1 );

注意：如果之前手动添加过标签，先清空分类描述里的自定义内容，让钩子自动生成结构。

3. 优化JS脚本（避免冲突）

修改read-more-script.js内容为无冲突写法，确保DOM加载完成后再绑定事件：

document.addEventListener('DOMContentLoaded', function() {
    const toggleBtn = document.getElementById('myBtn');
    if (!toggleBtn) return;

    toggleBtn.addEventListener('click', function() {
        const dots = document.getElementById('dots');
        const moreText = document.getElementById('more');
        
        if (dots.style.display === 'none') {
            dots.style.display = 'inline';
            this.textContent = 'Read more';
            moreText.style.display = 'none';
        } else {
            dots.style.display = 'none';
            this.textContent = 'Close Biography';
            moreText.style.display = 'inline';
        }
    });
});

4. 确保CSS和JS正确加载

• 保留原有的JS引入代码，确认主题/js/read-more-script.js文件存在且路径正确。
• 用钩子加载CSS（替代手动添加），添加到functions.php：

// 加载Read more功能的CSS样式
function enqueue_read_more_styles() {
    wp_add_inline_style( 'woocommerce-general', '#more { display: none; }' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_read_more_styles' );

5. 允许HTML标签通过过滤

如果标签仍被清理，添加代码允许分类描述中的span标签：

// 允许分类描述使用带id和onclick的span标签
function allow_span_in_category_desc( $allowed_tags ) {
    $allowed_tags['span'] = array(
        'id' => array(),
        'onclick' => array(),
    );
    return $allowed_tags;
}
add_filter( 'term_description_allowed_tags', 'allow_span_in_category_desc' );

内容的提问来源于stack exchange，提问作者user2240778