Kadence 教学：使用 Kadence Blocks 的Search (Adv) 块添加高级搜索功能

网站中的搜索功能有助于提升内容可访问性。Kadence Blocks 插件中的 Search (Adv) 高级搜索块，支持插入至页面、文章、小工具区域、页眉模块等位置，并具备较强的自定义能力。

Search (Adv) 区块功能介绍

Search (Adv) 区块适用于 Gutenberg 编辑器环境，兼容 Kadence 高级页眉、侧边栏等区域。

常见使用场景包括：

• 页面顶部的搜索输入框

• 产品页面的关键词检索

• 折叠菜单中的模态搜索弹窗

搜索样式可切换为标准或模态样式，在不同布局中具有更高的灵活性。

搜索样式设置

• 标准搜索样式
  搜索框始终可见，适合放置在页面主区域或导航栏

• 模态搜索样式
  点击按钮后弹出搜索窗口，适合在空间有限的位置使用

两种样式下均可启用搜索按钮，支持自定义按钮文字与样式。

可设置搜索范围是否包含商品内容，适合 WooCommerce 网站限定搜索类型。

按钮与图标自定义

• 提交按钮为高级按钮区块

• 支持更换图标（内置图标或自定义 SVG）
• 可调整颜色、边框、圆角、字体等外观样式
• 支持独立为正常与悬停状态设置颜色和尺寸

输入框样式设置

输入框支持字体、颜色、边距等多种视觉控制选项：

• 设置最大和最小宽度

• 自定义占位符文本颜色与大小

• 调整字体族、字号、行高、字距

• 添加图标，设定图标大小与线条宽度
• 设置圆角与内边距数值，优化排版效果

模态样式设置

启用模态搜索后，搜索框将隐藏在按钮之后，点击后弹出显示：

• 背景可设置为纯色或渐变色
• 支持关闭图标样式调整
• 控制模态窗口的边距与最大尺寸

这种样式适合在移动端页面中展示精简界面。

进阶选项

搜索块支持以下附加设置：

• 添加上下边距

• 指定锚点 ID，便于跳转定位

• 填写 ARIA 标签，用于提升无障碍浏览支持

• 添加 CSS 类名，便于样式拓展或 JS 操作

• 保存当前设置为默认，方便未来快速复用

总结

Kadence Blocks 的 Search (Adv) 模块提供了更灵活的搜索构建方式，可满足页面排版、美观展示与功能组合等多方面需求。借助标准输入样式与模态弹窗形式，不同终端下的访问方式得以兼容。搭配主题与高级布局工具使用，有助于构建结构清晰的内容入口。

如需进一步细化搜索范围、图标样式或视觉布局，可结合网站实际设计进行调配。