给Zibll子比主题导航菜单添加自定义徽章

玩Zibll子比主题的站长们，应该都知道Zibll子比主题的导航菜单是支持自定义Html代码的，可以在导航菜单添加图标，如下图。

导航菜单添加图标的方法非常简单，只需进入 WordPress 后台 - [外观] - [菜单] - 修改导航标签，插入任意的 Font Awesome 图标代码即可，如下图。

不过，今天十一张（www.11zhang.com）主要想讲解一下如何给Zibll子比主题导航菜单添加自定义徽章，先来看一下效果预览。

效果预览

添加徽章

进入 WordPress 后台 - [外观] - [菜单] - 修改导航标签，将上面预览图相对应的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来处理。

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>

同理，导航菜单还可以显示为按钮风格样式，先看看效果图吧！

上面预览图对应的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>

总结

小伙伴们应该都看明白了吧！总结一下：

1、将菜单的文字用 span 标签包围
2、class 仍然可以使用上面表格中的颜色、背景色 class
3、最重要的就是 class 多了一个but，没错，这个就是代表按钮的 class
4、class 再增加一个 radius，即可显示为两边圆角