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

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

Leave a Reply

您的电子邮箱地址不会被公开。 必填项已用 * 标注