WordPress 7B2 Pro 主题美化-页眉菜单添加开通vip图标

鼠标指向图标会弹出窗口

效果图：

WordPress 7B2 Pro 主题美化-页眉菜单添加开通vip图标

附件放到网站根目录，内容图标位置都可以自定义。

修改文件：

在下方插入如下代码：

<style> .abcd_benefitTag_benefits-wrapper {position:relative;margin-right: 5px;display:flex;justify-content:center;height:53px;}.benefitTag__benefits-icon___3aeab {display:inline-block;width:32px;height:32px;}.benefitTag__benefits-text___5d19f {font-size:12px;color:#4d3626;font-weight:600;position:absolute;bottom:0;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);white-space:nowrap;}.benefitTag__popover___fbaea {min-width:0;max-width:200px;z-index:9;}.abcd_memberWrapper {position: relative;padding: 5px 20px 20px;cursor: pointer;display: flex;flex-direction: column;background-color: #feebdc;backdrop-filter: blur(10px);align-items: center;border-radius: 0px 0px 10px 10px;box-shadow: 0px 5px 40px 0px rgba(17,58,93,.1);}.abcd_memberWrapper .abcd_memberCard_member-header {position:relative;padding-top:12px;font-weight:700;white-space:nowrap;text-align:center;margin-bottom:16px;width: 300px;box-sizing:border-box;}.abcd_memberWrapper .abcd_memberCard_member-header .abcd_memberCard_member-title {font-size:16px;line-height:22px;color:#663f32;letter-spacing:0;font-weight:600;margin-bottom:4px;}.abcd_memberWrapper .abcd_memberCard_member-header .abcd_memberCard_member-desc {font-size:12px;color:#663f32;letter-spacing:0;line-height:17px;font-weight:400;}.abcd_memberWrapper.abcd_memberCard_none .abcd_memberCard_member-header .abcd_memberCard_member-title {height:25px;width:180px;margin-left:auto;margin-right:auto;}.abcd_memberWrapper.memberCard__expired___9de29 .abcd_memberCard_member-header,.abcd_memberWrapper.memberCard__will-expired___3128d .abcd_memberCard_member-header {background:hsla(0,0%,100%,.8);padding:16px 0;border-radius:8px;}.abcd_memberWrapper.memberCard__expired___9de29 {background:#dadde0;}.abcd_memberWrapper.memberCard__expired___9de29 .abcd_memberCard_member-header .abcd_memberCard_member-desc {color:#ff2b00;}.abcd_memberWrapper .abcd_memberCard_member-benefits {position:relative;width: 100%;box-sizing:border-box;background:hsla(0,0%,100%,0.48);border-radius:8px;margin-bottom:16px;white-space:nowrap;overflow:hidden;}.abcd_memberWrapper .abcd_memberCard_member-benefits li {float: left;width: 25%;margin: 10px 0;}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917,.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__rightBtn___0cc46 {position:absolute;top:50%;width:12px;height:28px;-webkit-transform:translateY(-50%);transform:translateY(-50%);background-color:rgba(230,163,115,.2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s;}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917 .memberCard__icon-font___9846a,.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__rightBtn___0cc46 .memberCard__icon-font___9846a {color:#4d3626;font-size:12px;-webkit-transform:scale(.5);transform:scale(.5);}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917:hover,.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__rightBtn___0cc46:hover {background-color:rgba(230,163,115,.16);}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__leftBtn___ec917 {left:0;border-radius:0 4px 4px 0;}.abcd_memberWrapper .abcd_memberCard_member-benefits .memberCard__rightBtn___0cc46 {right:0;border-radius:4px 0 0 4px;}.abcd_memberWrapper .memberCard__joinBtn___a50c1 {position:relative;width:152px;height:32px;background-image:linear-gradient(134deg,#4d5580,#3d4466);font-size:14px;color:#fff3eb;font-weight:600;display:flex;align-items:center;justify-content:center;cursor:pointer;}.abcd_memberWrapper>button{border: 0!important;}.abcd_memberWrapper .memberCard__joinBtn___a50c1:hover {background-image:linear-gradient(134deg,rgba(77,85,128,.9),rgba(61,68,102,.9));}.abcd_memberWrapper .memberCard__joinBtn___a50c1:active {background-image:linear-gradient(134deg,rgba(77,85,128,.8),rgba(61,68,102,.8));}.abcd_memberWrapper .memberCard__joinBtn___a50c1 .memberCard__tips___3220a {top:-14px;right:-54px;position:absolute;background-image:linear-gradient(90deg,#ff9580,#f36);border-radius:6px;color:#fff;letter-spacing:0;text-align:center;font-weight:100;padding:2px 8px;font-size:20px;-webkit-transform:scale(.5);transform:scale(.5);}.abcd_memberCard_benefitsLiWrapper {position:relative;left:0;transition:left .3s linear;}.abcd_header_vip_topi {padding:0 6px;right: 0px;line-height:24px;color:#fff;text-align:center;position: absolute;top: 5px;box-sizing:border-box;border-radius:16px;font-size:19px;white-space:nowrap;-webkit-transform:scale(.5);}.abcd_header_vip {padding:0 24px;position:relative;width:20px;height: 70px;background:url(/img/hy.svg) no-repeat 10%/30px;}.abcd_header_vip>i {position:absolute;top: 5px;right:-6px;}.abcd_header_vip:hover .abcd_member_tip[data-status=true] {display:block;}.abcd_member_tip {position:absolute;top:70px;right:-14px;display:none;z-index:8000;}.abcd_header_vip i {font-style: normal;font-weight: 400;} </style>
<a href="svip" class="abcd_header_vip nav-member-btn" draggable="false" style="padding: 0px 18px; width: 0px;">
<div class="icon-btn">
</div>
<i class="abcd_header_vip_topi jiaobiao_color4" style="right: -20px;">开通</i>
<div class="abcd_member_tip" data-status="true">
<div data-position="" class="abcd_memberWrapper abcd_memberCard_none">
<div class="abcd_memberCard_member-header">
<div class="abcd_memberCard_member-title">开通VIP</div>
<div class="abcd_memberCard_member-desc">尊享更多VIP特权！</div>
</div>
<ul class="abcd_memberCard_member-benefits">
<div class="abcd_memberCard_benefitsLiWrapper" style="left: 0px;"> <li>
<div class="abcd_benefitTag_benefits-wrapper">
<i class="benefitTag__benefits-icon___3aeab" style="background: url(/img/xz.svg) center center / contain no-repeat;">
</i>
<span class="benefitTag__benefits-text___5d19f">
无限下载
</span>
</div>
</li> <li>
<div class="abcd_benefitTag_benefits-wrapper">
<i class="benefitTag__benefits-icon___3aeab" style="background: url(/img/qd.svg) center center / contain no-repeat;">
</i>
<span class="benefitTag__benefits-text___5d19f">
每日签到
</span>
</div>
</li> <li>
<div class="abcd_benefitTag_benefits-wrapper">
<i class="benefitTag__benefits-icon___3aeab" style="background: url(/img/sh.svg) center center / contain no-repeat;">
</i>
<span class="benefitTag__benefits-text___5d19f">
优先审核
</span>
</div>
</li> <li>
<div class="abcd_benefitTag_benefits-wrapper">
<i class="benefitTag__benefits-icon___3aeab" style="background: url(/img/vip.svg) center center / contain no-repeat;">
</i>
<span class="benefitTag__benefits-text___5d19f">
VIP服务
</span>
</div>
</li></div>
</ul>
<button class="memberCard__joinBtn___a50c1">
开通VIP
<div class="memberCard__tips___3220a">
年费VIP只要78！
</div>
</button>
</div>
</div>
</a>

保存清理缓存，刷新就可以到效果了