详情 评论 问答 子比主题美化教程-导航菜单添加自定义徽章及多种样式菜单设置方法云先森14天前发布关注私信111714 今天分享的是子比主题首页导航的主题美化,可以用多种方式进行展现,这也是我非常喜欢的一个美化功能,喜欢的朋友记得收藏本文章。 效果图: 添加徽章 进入Wordpress后台-外观-菜单->修改导航标签 此处内容已隐藏,请评论后刷新页面查看. 根据代码就很容易理解了,badge 便签也就是徽章了。如何控制标签的样式、颜色,也就是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> 我相信,细心的朋友已经完全看明白了!简单讲解一下: 将菜单的文字用span标签包围 class仍然可以使用上面表格中的颜色、背景色class 最重要的就是class多了一个but,没错,这个就是代表按钮的 class class再增加一个radius,即可显示为两边圆角 到这里,整个教程就结束了!赶紧试一试,让您的网站导航菜单也变得丰富多彩吧! 注意: 以上的class以及badge徽章是可以运用在整个网站的自定义代码位置的,比如主题设置的很多地方都是支持自定义代码的 另外,使用自定义Html代码请一定要注意标签闭合!代码使用不当还会引起网站显示错误! 温馨提示: 本文最后更新于2025-05-04 16:12:50,某些文章具有时效性,若有错误或已失效,请在下方留言或联系柒小颜博客。 ©文章版权归作者所有 本站资源大多来自网络,如有侵犯你的权益请联系管理员,我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除! 如果遇到付费才可观看的文章,建议升级会员或者成为认证用户。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR。 THE END子比美化# 主题# 标签# 图标 喜欢就支持一下吧点赞14赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏如何下载资源?您可以通过搜索或浏览分类列表来找到您期望下载的资源。随后点击资源介绍页右侧的下载链接按钮,依据提示信息进行操作即可。是否需要充值才能下载?大部分资源可积分免费下载,为了维持网站的运行小部分资源须付费才能下载。下载的资源是否有版权?本站提供的下载资源均为网络搜集,仅供个人学习和交流使用。对于版权问题,请用户自行判断并承担相应责任。
子比主题美化教程-导航菜单添加自定义徽章及多种样式菜单设置方法云先森14天前发布关注私信111714 今天分享的是子比主题首页导航的主题美化,可以用多种方式进行展现,这也是我非常喜欢的一个美化功能,喜欢的朋友记得收藏本文章。 效果图: 添加徽章 进入Wordpress后台-外观-菜单->修改导航标签 此处内容已隐藏,请评论后刷新页面查看. 根据代码就很容易理解了,badge 便签也就是徽章了。如何控制标签的样式、颜色,也就是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> 我相信,细心的朋友已经完全看明白了!简单讲解一下: 将菜单的文字用span标签包围 class仍然可以使用上面表格中的颜色、背景色class 最重要的就是class多了一个but,没错,这个就是代表按钮的 class class再增加一个radius,即可显示为两边圆角 到这里,整个教程就结束了!赶紧试一试,让您的网站导航菜单也变得丰富多彩吧! 注意: 以上的class以及badge徽章是可以运用在整个网站的自定义代码位置的,比如主题设置的很多地方都是支持自定义代码的 另外,使用自定义Html代码请一定要注意标签闭合!代码使用不当还会引起网站显示错误! 温馨提示: 本文最后更新于2025-05-04 16:12:50,某些文章具有时效性,若有错误或已失效,请在下方留言或联系柒小颜博客。 ©文章版权归作者所有 本站资源大多来自网络,如有侵犯你的权益请联系管理员,我们会第一时间进行审核删除。站内资源为网友个人学习或测试研究使用,未经原版权作者许可,禁止用于任何商业途径!请在下载24小时内删除! 如果遇到付费才可观看的文章,建议升级会员或者成为认证用户。全站所有资源“任意下免费看”。本站资源少部分采用7z压缩,为防止有人压缩软件不支持7z格式,7z解压,建议下载7-zip,zip、rar解压,建议下载WinRAR。 THE END子比美化# 主题# 标签# 图标 喜欢就支持一下吧点赞14赞赏 分享QQ空间微博QQ好友海报分享复制链接收藏