搜索是内容型网站的核心功能之一。一个好的搜索体验可以让用户快速找到需要的内容,提高用户满意度和页面停留时间。本文介绍如何在主题中定制搜索功能和搜索页面。

自定义搜索表单的设计

使用 get_search_form 函数在主题中输出搜索表单。可以通过创建 searchform.php 模板文件完全定制搜索表单的 HTML 结构和样式。默认的搜索表单只包含一个输入框和提交按钮,但你可以添加更多内容,比如分类下拉选择、文章类型选择等。

搜索表单的样式美化

搜索表单应该与主题整体设计风格一致。使用 CSS 自定义输入框和按钮的样式,添加聚焦效果和过渡动画。在移动设备上,确保搜索表单有良好的触摸体验。

搜索结果页面的定制

搜索结果页面的模板文件是 search.php。在这个模板中,可以控制搜索结果的显示方式:以列表或网格形式展示、显示摘要还是完整内容、是否显示特色图片、是否显示分类和标签等。

当搜索结果为空时,应该显示友好的提示信息,并建议用户修改搜索关键词。

搜索功能的扩展

通过 pre_get_posts 过滤器,可以修改搜索查询的行为。扩展搜索范围到自定义字段、分类法、自定义文章类型。调整搜索结果的排序规则。

实时搜索建议的实现

在搜索输入框下方显示实时的搜索建议可以大幅提升搜索体验。前端监听输入事件,通过 AJAX 请求向服务器获取匹配的内容列表,以下拉菜单的形式展示。

服务器端可以创建一个 REST API 端点或使用 WordPress 的 admin-ajax.php 处理请求。搜索建议应该包含标题和摘要,并有合理的数量限制。