移动端搜索短码致桌面端产品搜索网格展示异常求助

排查思路 #

• 短码污染全局查询变量：移动端搜索短码执行时，可能修改了全局$wp_query对象的query_vars（如search_terms），导致wpsc_display_categories()函数的条件判断逻辑出错，无法触发网格视图。
• wp_is_mobile()误判：该函数会将平板设备判定为移动端，部分缓存服务也会导致设备检测结果混乱，可能在桌面端也执行了移动端短码，干扰全局状态。
• wpsc_display_categories()逻辑优先级问题：函数末尾的if ( get_option( 'wpsc_display_categories' )) $output = true;会覆盖前面的搜索判断条件，导致搜索时仍强制显示分类栏，无法切换到网格视图。
• 移动端搜索JS的全局影响：短码内置的JS可能全局绑定了表单提交事件，阻止了桌面端搜索表单的默认跳转行为。

解决方案 #

1. 修复移动端短码的设备检测与查询隔离 #

使用GeneratePress主题内置的精准移动端检测函数，同时克隆全局查询对象避免短码污染：

add_action( 'generate_inside_navigation','tu_add_to_mobile_bar' );
function tu_add_to_mobile_bar() { 
    // 用主题专属检测替代wp_is_mobile，避免误判
    if ( function_exists('generate_is_mobile') && generate_is_mobile() ) {
        global $wp_query;
        // 克隆原始查询，防止短码修改全局状态
        $temp_query = clone $wp_query;
        
        ?>
        <div class="search">
            <?php echo do_shortcode( '[our shortcode in here] ' ); ?>
        </div>
        <?php
        
        // 恢复原始全局查询
        $wp_query = $temp_query;
    }
}

2. 调整wpsc_display_categories()的逻辑优先级 #

给全局显示分类的判断加上搜索场景排除，避免覆盖搜索时的逻辑：

function wpsc_display_categories() {
    global $wp_query;
    $output = false;

    // 全局开关仅在非搜索场景生效
    if ( get_option( 'wpsc_display_categories' ) && !isset($wp_query->query_vars['search_terms']) ) {
        $output = true;
    }

    if ( !is_numeric( get_option( 'wpsc_default_category' ) ) && ! get_query_var( 'product_tag' ) ) {

        if ( isset( $wp_query->query_vars['products'] ) )
            $category_id = $wp_query->query_vars['products'];
        else if ( isset( $_GET['products'] ) )
            $category_id = $_GET['products'];

        if ( is_numeric( get_option( 'wpsc_default_category' ) ) || (isset( $product_id ) && is_numeric( $product_id )) )
            $output = true;
        if ( (get_option( 'wpsc_default_category' ) == 'all+list'))
            $output = true;

        if (get_option( 'wpsc_default_category' ) == 'list' && (!isset($wp_query->query_vars['wpsc_product_category']) || !isset($wp_query->query_vars['product_tag']) && get_option('wpsc_display_categories')))
            $output = true;

        // 搜索时强制隐藏分类栏，触发网格视图
        if (get_option( 'wpsc_default_category' ) == 'list' && isset($wp_query->query_vars['search_terms']))
            $output = false;
    }

    if ( isset( $category_id ) && $category_id > 0 )
        $output = false;

    return $output;
}

3. 隔离移动端搜索的JS事件 #

给移动端搜索表单添加专属类名（如mobile-search-form），让JS仅作用于该表单：

document.addEventListener('DOMContentLoaded', function() {
    const mobileForm = document.querySelector('.mobile-search-form');
    if (mobileForm) {
        mobileForm.addEventListener('submit', function(e) {
            // 移动端搜索的自定义逻辑（如下拉展示）
            e.preventDefault();
            // 执行你的搜索处理代码
        });
    }
});

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