「自学哈网」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' ), ),
本站声明:
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」RiProV2美化-导航栏VIP按钮
本站所有资源来源于网络,分享目的仅供大家学习和交流!如若本站内容侵犯了原著者的合法权益,可联系邮箱976157886@qq.com进行删除。
自学哈专注于免费提供最新的分享知识、网络教程、网络技术的资源分享平台,好资源不私藏,大家一起分享!
自学哈网 » 「自学哈网」RiProV2美化-导航栏VIP按钮
也想出现在这里?
联系我们吧