RiProV2美化-导航栏VIP按钮

功能介绍

导航条上用户头像左侧会展示出一个引导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="https://www.52oc.cn/wp-content/themes/van/assets/images/home/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行左右

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' ),
),