如果你正在寻找一种更灵活、更高级的菜单展示方式,Blocksy Pro 提供的 Advanced Menus(高级菜单)扩展正好满足这种需求。本文将介绍如何结合 Gutenberg 编辑器和 Content Blocks,自定义构建一个动态、交互性强的菜单系统,提升桌面端浏览体验。
启用高级菜单扩展
首先,进入 WordPress 后台的 Blocksy Dashboard,开启 Advanced Menus 扩展模块。完成后,即可开始构建菜单中要显示的内容。
创建 Content Blocks
高级菜单的内容来自 Content Blocks。以下是基本操作流程:
进入 Blocksy > Content Blocks 页面
点击右上角 Add New
选择标准的 Content Block 类型
命名内容块(建议名称带有标识性,便于区分)
每一个菜单展示项都可以关联一个 Content Block。虽然文中提供了预设内容演示,但在你的站点中,需要自行设计区块内容。
建议使用 Gutenberg 可复用模块(Reusable Blocks)来构建这些内容块,也可以混合静态模块实现更丰富的布局。
完成后,进入「Display Conditions」,将内容块设置为 Entire Website(全站显示)。不需要调整其他设置,因为菜单扩展会自动调用这些内容。
我们要像上面的操作一样,创建菜单项的内容块,比如“博客“和“关于我们”
配置菜单结构
进入 WordPress 后台的「外观 > 菜单」,开始设置菜单项:
1. 启用高级菜单选项
点击你想自定义的一级菜单项,系统会显示 “Menu Item Settings” 按钮。点击后可以设置:
下拉菜单布局(如单列、两列等)
是否移除菜单标签或链接
是否添加图标或标记(badge)
自定义样式设置(Design)
2. 添加自定义链接(Custom Links)
为了将内容块作为菜单内容展示,建议使用自定义链接作为子项:
URL 处填写 #(代表无链接)
名称可以自定,方便识别
将该项拖动到对应的父级菜单下方,建立层级结构
展开该菜单项,在“内容类型”中选择 Content Block,并从列表中选择你刚创建的内容块。
建议同时关闭该项的标签和链接显示,以便完整展示内容块样式。
按照相同方式,完成其他内容块的插入。
查看最终效果
保存菜单后,切换到前端,即可看到全新的高级动态菜单效果。这些菜单可以展示丰富信息,如分类概览、产品推荐、图文展示等,完全突破传统下拉菜单的限制。
回顾构建流程
使用 Content Blocks 构建各类菜单内容
在菜单中为顶级项目启用高级菜单功能
添加子项并关联内容块
保存设置,前往前端查看展示效果
总结
借助 Blocksy Pro 的高级菜单功能,搭配 Content Blocks 与 Gutenberg 编辑器,可以构建具有高度互动性与美观性的菜单系统。整个过程无需编码,操作直观,适合对菜单设计有更高要求的站点使用。