RiPro v2主题 – 导航栏VIP按钮

a89592c32920250217124554

美化说明:
导航条上用户头像左侧会展示出一个引导VIP按钮,支持后台自定义链接地址!
代码部署:
首先利用宝塔或则FTP打开主题/template-parts/global文件夹下的header-menu.php文件放入以下代码在第21行:

<?php if ( _cao('is_header_vip_logo') && !_cao('is_login_site_shop') ) : ?>
<span class="fuid-vip-link">
<a href="<?php echo _cao('header_vip_logo_link') ?>">
<?php echo '<img src="/../../nav-vip.svg">' ?> 成为VIP
</a>
</span>
<?php endif;?>

随后进入后台将以下CSS代码放在外观-自定义-额外CSS当中

.fuid-vip-link {
text-align: center;
}
.fuid-vip-link img {
width: 24px;
display: initial;
}
.fuid-vip-link a {
font-size: 12px;
font-weight: 500;
padding: 7px 20px;
color: #A16629;
border-radius: 30px;
background: linear-gradient(151deg,#FEEDC2 0%, #fef1d2 100%);
transition: all .5s cubic-bezier(.215,.61,.355,1),
transform .5s cubic-bezier(.215,.61,.355,1),
-webkit-box-shadow .5s cubic-bezier(.215,.61,.355,1),
-webkit-transform .5s cubic-bezier(.215,.61,.355,1)
}
.fuid-vip-link a:hover{
box-shadow: 0 6px 18px -6px rgb(255 199 115 / 38%);
}
@media(max-width:746px){
.fuid-vip-link{
display: none;
}
}

最后利用宝塔或则FTP打开/inc/options下的admin-options.php文件把下面代码放在20行左右
注意替换代码里面的SVG图片路径

array(
'id' => 'is_header_vip_logo',
'type' => 'switcher',
'title' => '导航栏VIP按钮',
'label' => '启用导航栏VIP按钮',
'default' => false,
),
array(
'id' => 'header_vip_logo_link',
'type' => 'text',
'title' => 'VIP按钮地址',
'default' => '/user/vip',
'dependency' => array( 'is_header_vip_logo', '==', 'true' ),
)

 

RiPro v2主题 – 导航栏VIP按钮-龙盟网
RiPro v2主题 – 导航栏VIP按钮
此内容为免费资源,请登录后查看
0
免费资源
© 版权声明
THE END
喜欢就支持一下吧
点赞15 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容