如何实现带筛选栏的Elementor Templates分类及名称筛选功能

以下是经过实测可行的3种实现路径，根据你手头的Elementor版本、代码能力选择即可：

方案1：Elementor原生组件组合（无额外插件，需Pro版） #

• 先给模板加分类维度：默认Elementor保存的模板对应elementor_library自定义文章类型，没有自带分类，把下面这段代码贴到当前主题的functions.php文件里，就能在后台模板列表看到分类管理入口，给所有已建模板打好分类标签：

// 为Elementor模板添加自定义分类
function register_template_category() {
    register_taxonomy( 'tpl_category', 'elementor_library', [
        'hierarchical' => true,
        'labels' => [
            'name' => '模板分类',
            'add_new_item' => '新增分类'
        ],
        'show_admin_column' => true,
        'rewrite' => [ 'slug' => 'tpl-cat' ]
    ]);
}
add_action( 'init', 'register_template_category' );

• 搭建筛选栏：在目标展示页用Elementor的表单/HTML组件放两个筛选项：一个下拉选择框拉取所有tpl_category分类作为选项，一个文本输入框用来输入模板名称关键词，再加一个提交按钮。
• 做模板展示区：拖入Loop Grid（循环网格）组件，查询规则设置为查询elementor_library类型的已发布文章，模板选你提前做好的模板卡片循环项，默认展示全部模板。
• 绑定筛选逻辑：开启动态查询接收，把分类下拉的选中值绑定为循环查询的分类筛选参数，文本输入框的内容绑定为查询的标题搜索参数，提交后自动刷新循环结果，不需要额外写JS。如果是免费版没有Loop组件，换成自定义短代码输出模板列表，接收url参数做查询即可。

方案2：自定义AJAX实现（自由度最高，兼容免费版Elementor） #

• 前端部分：在页面的HTML组件里插入筛选栏和列表容器结构，不用刷新页面就能出结果：

<div class="tpl-filter-bar">
    <select class="js-tpl-cat">
        <option value="">全部分类</option>
        <!-- 后台动态输出所有模板分类选项即可 -->
    </select>
    <input type="text" class="js-tpl-keyword" placeholder="输入模板名称搜索">
    <button class="js-tpl-filter-btn">筛选</button>
</div>
<div class="tpl-list-wrap">
    <!-- 筛选结果渲染到这里 -->
</div>

• 后端部分：在functions.php里写AJAX回调，接收前端传的分类ID、关键词参数，用WP_Query查符合条件的Elementor模板，调用Elementor官方的渲染方法\Elementor\Plugin::instance()->frontend->get_builder_content_for_display($tpl_id)输出每个模板的完整渲染内容，避免样式、动态标签失效。
• 交互部分：写十几行原生JS监听筛选按钮点击，把参数POST到WordPress的AJAX接口，拿到返回的模板内容后直接替换列表容器的innerHTML就行，体验比页面刷新好很多。
  注意：接口记得加nonce校验，避免恶意请求。

方案3：插件快速实现（零代码，10分钟搞定） #

• 安装支持自定义文章类型筛选的轻量筛选插件，筛选对象直接选elementor_library（Elementor模板的内置文章类型标识）
• 筛选项分别配置：分类项关联之前创建的tpl_category分类法，搜索项设置为匹配文章标题字段
• 展示区用插件自带的自定义文章类型列表组件，内容输出规则选「渲染Elementor模板内容」，配置完参数保存就能直接用，适合完全不想碰代码的场景。

踩坑提示：不要直接读取模板存在数据库里的原始内容输出，必须用Elementor自带的渲染方法，不然会出现样式丢失、动态内容不加载的问题；查询逻辑不要写死模板ID，后续新增模板时会自动纳入筛选范围，不用改代码。

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