子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文

前言

子比主题的菜单显示其实是支持自定义Html代码的,那么就有很多的扩展性了!

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

图片展示

图片[1]-子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文
图片[2]-子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文

添加徽章

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

图片[3]-子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文

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

根据代码就很容易理解了,badge 便签也就是徽章了。如何控制标签的样式、颜色,也就是class来处理了

图片[4]-子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文

子比主题官方支持的 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 徽章的内容也是支持自定义图标的,例如 你可以试试这句代码:

按钮样式

按照上面的方法举一反三,菜单还可以显示为按钮风格样式,先看看效果图吧!

图片[5]-子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文
图片[6]-子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文

我相信,细心的朋友已经完全看明白了!简单讲解一下:

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

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

温馨提示:本文最后更新于2024-05-05 08:25:50,某些文章具有时效性,若有错误或已失效,请在下方留言或联系执笔
© 版权声明
THE END
喜欢就支持一下吧
点赞6 分享
子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文-执笔博客
子比主题美化-导航菜单添加自定义徽章及多种样式菜单图文
此内容为免费阅读,请登录后查看
执币0
免费阅读
评论 共42条

请登录后发表评论

    • 的头像-执笔博客linju60