网站导航菜单也是整个网站的家门,zibll主题支持多种样式的导航栏样式,功能也十分强大。
创建菜单之前,我们首先进入
![图片[1]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/20251022155259509-image-230.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_935)
详细配置教程请查看此文章:
创建菜单
主题需要显示菜单的位置一共有两处:PC端顶部导航栏和移动端弹出菜单栏,我们可以为这两处创建同一个菜单,也支持为两个不同位置创建不同菜单。特别是开启高级子菜单后,由于PC端可显示的内容有很多,有时候我们不想移动端显示太拥挤,这时候我们就可以为移动端单独创建一个菜单。
进入后台:外观->菜单,先创建菜单,并勾选需要显示的位置。
![图片[2]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022162137948-image-233.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_801)
添加菜单内容
从左侧可以选择链接、或使用自定义链接,点击添加就到了右侧,右侧就是已经添加好的菜单明细,点击展开就可以配置更多功能,上下拖动排序,向右拖动成为子菜单
![图片[3]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022162821655-image-234.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_1208)
添加普通子菜单
我们将添加到右侧的菜单通过向右拖动,即可配置成子菜单,需要注意的是:移动端仅显示2级菜单,多了不显示。PC端为了美观,一般也不加一超过两级。
![图片[4]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022163542801-image-235.png)
菜单徽章和图标
有时候我们需要为菜单着重显示,使用徽章功能,就很实用了,支持配置颜色,样式也很漂亮
效果预览:
![图片[5]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/image-31.png)
![图片[6]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/image-32.png)
配置方式:
![图片[7]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022163926291-image-236.png)
高级子菜单
上面我们介绍了通过拖动实现的普通子菜单,高级子菜单是功能更加强大,显示内容更加丰富,UI也更加漂亮的功能。使用方法也很简单,开启高级子菜单,选择类型。然后添加子菜单项目即可
我们官方演示站就是用了此功能,【点击查看演示】
![图片[8]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022164452809-image-237.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_554,h_800)
![图片[9]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022164457711-image-238.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_315,h_800)
![图片[10]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022164534320-image-239.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_353,h_800)
截图演示:
![图片[11]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022164737953-image-240.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_386)
![图片[12]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022164850623-image-241.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_1300,h_330)
需要注意的是:
- 1.高级子菜单只能在仅在当前菜单为一级菜单时生效
- 2.当前菜单下的默认子项目将失效,仅显示下方配置的子菜单
- 3.高级子菜单一般内容较多,请注意考虑移动端显示情况(PC端和移动端最好分开创建菜单)
© 版权声明
分享是一种美德,转载请保留原链接
THE END
![创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/10/20251022172800202-创建菜单-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_800,h_560)


![Zibll子比主题-V8.2商城系统已更新[2025-10-01][更新日志]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/更新日志.jpg)
![付费阅读、付费资源、付费图库、付费视频等知识付费功能详解及教程[图文教程]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/支付功能-列表图.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![子比主题官方推广计划正式上线,推广可获高额奖励[限时推广]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/11/推广计划.png?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_429,h_300)




![Zibll子比主题-编辑器增强-古腾堡编辑器块详解[入门详解]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/04/古腾堡编辑器-列表图2.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![zibll子比主题评论和用户主页显示IP归属地功能配置教程[V7.2新功能]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2023/05/ip归属地-列表图1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_700,h_490)
![Zibll子比主题-方便快捷的前端页面设置功能简介[教程]-WordPress主题模板-zibll子比主题](https://oss.zibll.com/zibll.com/2020/03/主题教程-1.jpg?x-oss-process=image%2Fquality,q_50%2Fresize,m_fill,w_600,h_375)






- 最新
- 最热
只看作者