跳到内容 
本文介绍如何为 Wordpress 自定义内容类型创建独立的搜索结果页面，通过实际的案例一步一操作实现自定义产品内容类型的独立搜索结果页面。可以实现不同内容类型的搜索结果隔离，用户通过产品搜索框搜索出来的结果都是产品内容，搜索结果的展示布局按照产品展示的list风格进行展示。
本文基于 Elementor 页面编辑器实操，需要用到 Jet Engine 的Listing Items/Components 功能和 Jet search 搜索框。
Jet Engine 和 Jet Search 为付费插件，如果你需要可以在我的购买清单中查看和购买。
通常我们使用 Elementor 主题构建器创建主题模板时，只能创建一个默认搜索结果页面模板，创建其他的搜索结果页面就会提示报错。并且搜索结果中只能使用 Current Query 来展示查询结果，不能修改查询结果的限制。
Elementor 默认的搜索元素来源限制设置是有限，无法做精准的内容类型选项，如果你设置来源是Product，那么在搜索结果中就无法出现 Post 和页面的内容。
如果你只是希望做一个产品搜索或者博客搜索，你可以直接在搜索框元素这里限定搜索范围。
最终的搜索结果展示模板是同一个，也就是说产品搜索结果和博客搜索结果会以同一种列表进行展示。
如果你希望产品搜索结果展示列表和博客搜索结果展示列表以不同的列表（产品可能需要和博客展示列表做区分）展示，那么本文的教程就可以满足你的需求。
我的环境已经安装好et Engine 和 Jet Search 2 个插件。
1、在产品相关页面添加一个 Jet Search 搜索框元素。
在产品列表模板页面添加一个Jet Search 组件，设置搜索框的风格。
限制搜索结果的范围为 Product
后续我们还要回来修改这里的 Custom Seach Results URL，然后先继续下面的内容。
2、创建一个 Page 页面 Product Search Result
返回到Wordpress 网站的 Page 管理页面，添加一个新的页面名称：Product Search Result。
使用 Elementor 编辑这个页面，添加必要的展示元素，然后使用 JET 的 Listing Grid 来代替展示列表元素。
JET 的 Listing Grid 和 Elementor 原生的Loop Grid 一样需要自己制作 item 模板来展示，在 Jet 中 Listing Grid 的Item 模板叫Listing Items/Components，所以我们要先去制作一个Listing Items/Components。
然后在Listing Grid 的常规设置 Listing 选项中选择制作好的Listing Items。
做好 Listing 模板之后刷新页面，就可以在 Listing 中选择已经做好的Listing 模板了
最后发布这个产品搜索结果的页面。
3、创建一个Listing Items/Components 放在搜索页面中
打开 Jet Engine 的 Listins/Components 菜单
点击【Add New Listing】创建一个新的 Listing 模板。选项设置按照红色框内先选择，Listing source 选择Post，From Post Type 选择你需要查询的内容类型，这里我们设置为自定义的产品内容 Product，Listing Itme Name 是这个模板的名称你可以按照自己想法设置，Listing View 选择 Elementor（注意 Block 是用来在古腾堡编辑器中使用的）。
然后按照你自己想要的产品列表展示需求，设置模板，可以完全参照 Elementor 原生的 Loop Items 模板制作过程进行制作，如果你已经制作好了产品的 Loop Items 模板也可以直接复制过来用，不需要做任何修改，保存和发布模板。
4、设置搜索组件的自定义搜索结果 URL
发布搜索结果页面之后，就可以返回 Ajax Search 组件设置，将创建的搜结果的 URL 填写到Custom Search Results URL 选项中。设置好之后保存对应的模板或页面。
5、验证搜索结果
打开产品列表页面，使用页面中的产品搜索框（也就是我们设置好的 Jet Ajax Search 组件），输入产品搜索关键词，并回车，检查跳转的搜索结果页面和结果列表。
可以看到搜搜结果已经变成了我们创建的产品搜索结果页面，按照产品 Listing 模板，只展示了产品的数据。
6、教程 延伸
以上过程的整体逻辑就是，创建一个页面用来展示搜索结果，然后在 Search 框元素设置中限定搜索范围和展示搜索结果页面，这样可以将不同的内容类型搜索结果进行隔离，比如产品搜索，案例搜索，博客搜索等等。
观看Blibli 视频：https://www.bilibili.com/video/BV1VE3C6gEH1/
