Tutorial de Kadence: Añadir funcionalidad de búsqueda avanzada con el bloque de búsqueda (Adv) de los bloques de Kadence

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

Search (Adv) 区块功能介绍

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

常见使用场景包括：

• 页面顶部的搜索输入框

• 产品页面的关键词检索

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

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

搜索样式设置

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

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

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

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

按钮与图标自定义

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

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

输入框样式设置

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

• 设置最大和最小宽度

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

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

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

模态样式设置

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

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

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

进阶选项

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

• 添加上下边距

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

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

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

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

resúmenes

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

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