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://van.ygit.net/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' ),
),