创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]

网站导航菜单也是整个网站的家门,zibll主题支持多种样式的导航栏样式,功能也十分强大。

创建菜单之前,我们首先进入主题配置-页面显示-顶部导航栏:按需配置导航栏的样式及功能。

图片[1]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题

详细配置教程请查看此文章:

创建菜单

主题需要显示菜单的位置一共有两处:PC端顶部导航栏移动端弹出菜单栏,我们可以为这两处创建同一个菜单,也支持为两个不同位置创建不同菜单。特别是开启高级子菜单后,由于PC端可显示的内容有很多,有时候我们不想移动端显示太拥挤,这时候我们就可以为移动端单独创建一个菜单。

进入后台:外观->菜单,先创建菜单,并勾选需要显示的位置。

图片[2]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题

添加菜单内容

从左侧可以选择链接、或使用自定义链接,点击添加就到了右侧,右侧就是已经添加好的菜单明细,点击展开就可以配置更多功能,上下拖动排序,向右拖动成为子菜单

图片[3]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题

添加普通子菜单

我们将添加到右侧的菜单通过向右拖动,即可配置成子菜单,需要注意的是:移动端仅显示2级菜单,多了不显示。PC端为了美观,一般也不加一超过两级。

图片[4]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题

菜单徽章和图标

以下教程需升级zibll v8.2及以上版本!

有时候我们需要为菜单着重显示,使用徽章功能,就很实用了,支持配置颜色,样式也很漂亮

效果预览:

图片[5]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题
图片[6]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题

配置方式:

图片[7]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题

高级子菜单

上面我们介绍了通过拖动实现的普通子菜单,高级子菜单是功能更加强大,显示内容更加丰富,UI也更加漂亮的功能。使用方法也很简单,开启高级子菜单,选择类型。然后添加子菜单项目即可

我们官方演示站就是用了此功能,【点击查看演示】

截图演示:

图片[11]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题
图片[12]-创建菜单、添加徽章、高级子菜单等功能配置教程[v8.3新功能]-WordPress主题模板-zibll子比主题

需要注意的是:

  • 1.高级子菜单只能在仅在当前菜单为一级菜单时生效
  • 2.当前菜单下的默认子项目将失效,仅显示下方配置的子菜单
  • 3.高级子菜单一般内容较多,请注意考虑移动端显示情况(PC端和移动端最好分开创建菜单)

© 版权声明
THE END
文章不错?点个赞呗
点赞31赞赏 分享
评论 共5条

请登录后发表评论