给导航菜单添加自定义徽章及多种样式菜单设置方法

子比主题的菜单显示其实是支持自定义 Html 代码的，那么就有很多的扩展性了！之前我们详细的讲解过如何在导航菜单添加图标的教程，如果不会添加图标的朋友可以复习一下下方文章！

本篇文章属于扩展功能，高级教程。需要有点点的 Html 基础，如果一点都不会，那也没关系。本篇教程会很详细，有基础的朋友一看就懂，没基础的朋友就一步一步对照着来，也能做出好看的效果！

以下功能需要升级 Zibll 子比主题 V4.1 版本以上！

添加徽章
进入 Wordpress 后台-外观-菜单-> 修改导航标签

图片 [3]-给导航菜单添加自定义徽章及多种样式菜单设置方法 [图文教程]-WordPress 主题模板-zibll 子比主题
首先我们将上面预览图的相对应的 HTML 代码附上！

<!-- badge 标签即为徽章 支持多项 Class -->
主题购买<badge> 折扣</badge>
网站建设<badge class="jb-yellow">NEW</badge>
最新优惠<badge class="badge-bw jb-vip2"><i>VIP</i></badge>
特惠资源<badge class="c-blue-2">NEW</badge>
示例页面<badge class="jb-red badge-bw">99</badge>
发布文章<badge class="b-blue"></badge>
友情链接<badge class="jb-green">+1</badge>
<!-- 徽章内也支持图标代码 -->
根据代码就很容易理解了，badge 便签也就是徽章了。如何控制标签的样式、颜色，也就是 class 来处理了！

图片 [4]-给导航菜单添加自定义徽章及多种样式菜单设置方法 [图文教程]-WordPress 主题模板-zibll 子比主题
子比主题官方支持的 class 列表

class 样式 class 样式 class 样式
c-red 红色文字 b-theme 主题背景色 jb-red 渐变红色背景
c-yellow 橙色文字 b-red 红色背景 jb-yellow 渐变橙色背景
c-blue 蓝色文字 b-yellow 橙色背景 jb-blue 渐变蓝色背景
c-blue-2 深蓝色文字 b-blue 蓝色背景 jb-green 渐变绿色背景
c-green 绿色文字 b-green 深蓝色背景 jb-purple 渐变紫色背景
c-purple 紫色文字 b-purple 紫色背景 jb-vip1 渐变金色背景
jb-vip2 渐变黑色背景
当然如果这些 class 的样式还满足不了你，你还可以直接添加 style 代码哦！

同时 badge 徽章的内容也是支持自定义图标的，例如 你可以试试这句代码：

<!-- 图标徽章示例 -->
特惠资源<badge class="c-blue-2"><i class="fa fa-bolt"></i></badge>
按钮样式
按照上面的方法举一反三，菜单还可以显示为按钮风格样式，先看看效果图吧！

图片 [5]-给导航菜单添加自定义徽章及多种样式菜单设置方法 [图文教程]-WordPress 主题模板-zibll 子比主题
图片 [6]-给导航菜单添加自定义徽章及多种样式菜单设置方法 [图文教程]-WordPress 主题模板-zibll 子比主题
对应的 Html 代码如下：

<!-- 按钮风格的菜单 -->
<span class="but jb-red"> 主题购买</span>
<span class="but c-blue"> 网站建设</span>
<span class="but c-yellow"> 科技资讯</span>
<span class="but b-purple radius"> 最新优惠</span><badge><i>VIP</i></badge>
<span class="but jb-vip2 radius"> 特惠资源</span><badge class="jb-red"><i class="fa fa-bolt"></i></badge>
我相信，细心的朋友已经完全看明白了！简单讲解一下：

将菜单的文字用 span 标签包围
class 仍然可以使用上面表格中的颜色、背景色 class
最重要的就是 class 多了一个 but，没错，这个就是代表按钮的 class
class 再增加一个 radius，即可显示为两边圆角
到这里，整个教程就结束了！赶紧试一试，让您的网站导航菜单也变得丰富多彩吧！

温馨提示：
以上的 class 以及 badge 徽章是可以运用在整个网站的自定义代码位置的，比如主题设置的很多地方都是支持自定义代码的
另外，使用自定义 Html 代码请一定要注意标签闭合！代码使用不当还会引起网站显示错误！