给你的wordpress菜单增添一些特色角标,让你的菜单变得更有特色。
总感觉菜单栏好单调怎么办?或是自己有一些很有趣的菜单想要突出展示给网站的访客,那么这个时候就可以给你的wordpress菜单增添一些角标,让你的菜单更加吸引访客的注意力。

我们以最新的wordpress2020主题为准,在你的菜单中添加如下代码:
<small>更新</small>

演示
然后在前台通过CSS查到我们的small,用CSS对其定位,在你的style.css底部添加以下代码:
红色
.primary-menu small { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #f308a0 0%, #fb0655 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }
保存后刷新浏览器本地缓存(或开隐私模式),查看前端页面即可看到效果。
黄色
.primary-menu small { display: inline-block; transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }
蓝色
.primary-menu small { display: inline-block; -webkit-transform: translateY(-12px); -ms-transform: translateY(-12px); transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: #188ef4; background: -webkit-linear-gradient(legacy-direction(to right), #6454ef 0%, #316ce8 100%); background: -webkit-gradient(linear, left top, right top, from(#6454ef), to(#316ce8)); background: -webkit-linear-gradient(left, #6454ef 0%, #316ce8 100%); background: -o-linear-gradient(left, #6454ef 0%, #3021ec 100%); background: linear-gradient(to right, #6454ef 0%, #3021ec 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }
黄色
.primary-menu small { display: inline-block; -webkit-transform: translateY(-12px); -ms-transform: translateY(-12px); transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: #f9e1be; background: -webkit-linear-gradient(legacy-direction(to right), #efd3b0 0%, #f9e1be 100%); background: -webkit-gradient(linear, left top, right top, from(#efd3b0), to(#f9e1be)); background: -webkit-linear-gradient(left, #efd3b0 0%, #f9e1be 100%); background: -o-linear-gradient(left, #efd3b0 0%, #f9e1be 100%); background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold; }
不想这么复杂版:
如果你不想弄这么复杂,没关系,你可以这样做。
在填写菜单的时候,将以下代码添加进菜单即可。
网站源码<span style="XXX">推荐</span>

然后将“XXX”替换为上面.primary-menu small {}之间的内容即可。
例如这样:
网站源码<span style="display: inline-block; -webkit-transform: translateY(-12px); -ms-transform: translateY(-12px); transform: translateY(-12px); font-size: .75rem; letter-spacing: 0.05em; background: #f9e1be; background: -webkit-linear-gradient(legacy-direction(to right), #efd3b0 0%, #f9e1be 100%); background: -webkit-gradient(linear, left top, right top, from(#efd3b0), to(#f9e1be)); background: -webkit-linear-gradient(left, #efd3b0 0%, #f9e1be 100%); background: -o-linear-gradient(left, #efd3b0 0%, #f9e1be 100%); background: linear-gradient(to top, #efd3b0 0%, #f9e1be 100%); color: #ffffff; border-radius: 1rem; padding: .15rem .275rem; line-height: 1; font-weight: bold;">Help</span>

效果
