WoodMart 搜索结果分类显示 Products、Portfolio 和 Posts（Elementor Loop Grid 完整教程）

解决 Elementor Loop Grid 中 Current Query 无法同时指定 Post Type 的问题，实现搜索结果按 Products、Portfolio、Posts 分类展示。

在 WoodMart + Elementor 中，Loop Grid 的 Current Query 模式无法同时指定 Post Type，因此无法直接实现 Products、Portfolio 和 Posts 分类搜索。
最佳做法是为每种内容类型创建独立的 Loop Grid，并使用 Query ID 获取当前搜索关键词，然后通过 Tabs 分类展示结果。

适用场景

为什么 Current Query 无法筛选文章类型？

当 Loop Grid 的 Query Source 设置为 Current Query 时，Elementor 会直接继承 WordPress 当前搜索查询，例如：

此时 Loop Grid 实际使用的是当前页面的查询对象，因此 Elementor 不允许再次指定，这就是为什么在 Current Query 模式下看不到 Products、Portfolio、Posts 等类型选择项。

推荐方案：Query ID + 独立 Loop Grid

核心思路
为 Products、Portfolio、Posts 分别创建独立的 Loop Grid，每个 Grid 使用不同的 Query ID，然后通过自定义查询把当前搜索关键词传入。

分别创建Loop item 和一个search搜索结果页面，如下:

结果页面

使用 Elementor Theme Builder 创建 Search Results 模板。
顶部添加 Tabs：
All Products Portfolio Posts
每个 Tab 放置对应的 Loop Grid：
Products Tab
显示：
search_products
查询结果。
Portfolio Tab
显示：
search_portfolio
查询结果。
Posts Tab
显示：
search_posts
查询结果。

步骤 1：创建 Products Loop Grid

Loop Grid 设置
Products

Source
Current Query

Query ID
search_products

步骤 2：创建 Portfolio Loop Grid

Loop Grid 设置
Portfolio

Source
Current Query

Query ID
search_portfolio

步骤 3：创建 Posts Loop Grid

Loop Grid 设置
Posts

Source
Current Query

Query ID
search_posts

步骤 4：添加自定义代码

将以下代码添加到：
子主题 functions.php
或使用 Code Snippets 插件。

产品搜索

add_action( 'elementor/query/search_products', function( $query ) {

    if ( is_search() ) {

        $query->set( 's', get_search_query() );
        $query->set( 'post_type', 'product' );

    }

} );

案例搜索

add_action( 'elementor/query/search_portfolio', function( $query ) {

    if ( is_search() ) {

        $query->set( 's', get_search_query() );
        $query->set( 'post_type', 'portfolio' );

    }

} );

新闻搜索

add_action( 'elementor/query/search_posts', function( $query ) {

    if ( is_search() ) {

        $query->set( 's', get_search_query() );
        $query->set( 'post_type', 'post' );

    }

} );

搜索所有

/**
 * Search All
 * Product + Portfolio + Post
 * Query ID:search_all
 */
add_action( 'elementor/query/search_all', function( $query ) {

    if ( is_search() ) {

        $query->set(
            's',
            get_search_query()
        );

        $query->set(
            'post_type',
            array(
                'product',
                'portfolio',
                'post'
            )
        );

    }

} );

总结

当 Elementor Loop Grid 使用 Current Query 时，无法同时指定文章类型，因此无法实现搜索结果分类展示。
最佳做法是：
为 Products、Portfolio、Posts 分别创建 Loop Grid。
使用 Query ID 自定义查询。
通过 get_search_query() 获取当前搜索关键词。
使用 Elementor Tabs 切换显示结果。
最终即可实现：

• All
• Products
• Portfolio
• Posts

这种搜索体验更符合 B2B 外贸网站、企业官网和 WooCommerce 商城的需求，同时也有利于提升用户体验和搜索结果的转化率。