文章最后更新时间：2024-12-21 23:46:38

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

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

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

效果预览

添加徽章

进入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来处理了！

子比主题官方支持的 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>

我相信，细心的朋友已经完全看明白了！简单讲解一下：

将菜单的文字用span标签包围

class仍然可以使用上面表格中的颜色、背景色class

最重要的就是class多了一个but，没错，这个就是代表按钮的 class

class再增加一个radius，即可显示为两边圆角

到这里，整个教程就结束了！赶紧试一试，让您的网站导航菜单也变得丰富多彩吧！

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