最新爆文 2023-09-09 816

【子比主题】给导航菜单添加自定义徽章及多种样式菜单设置方法[图文教程]

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

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

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

效果预览

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

首先我们将上面预览图的相对应的HTML代码附上！

<!– badge标签即为徽章支持多项Class –>

主题购买<badge>折扣</badge>

网站建设<badge class=“jb-yellow”>NEW</badge>

最新优惠<badge class=“badge-bw jb-vip2”>VIP</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	渐变黑色背景