功能介绍

启用该功能之后浏览器滚动条会进行美化!

配置教程

首先利用宝塔或则FTP打开/inc/options下的admin-options.php文件把下面代码放在20行左右

array(
'id' => 'is_scrollbar',
'type' => 'switcher',
'title' => '滚动条美化',
'label' => '启用后PC端浏览器滚动条会进行美化',
'default' => false,
),

然后/assets/css目录下面新建个scrollbar.css文件放入如下代码

/*滚动条样式*/
::-webkit-scrollbar {/*滚动条整体样式*/
width: 10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
background-color: #12b7f5;
background-image: -webkit-linear-gradient(45deg, rgba(255, 93, 143, 1) 25%, transparent 25%, transparent 50%, rgba(255, 93, 143, 1) 50%,
rgba(255, 93, 143, 1) 75%, transparent 75%, transparent);
}
::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #f6f6f6;
}

 

最后在主题根目录下打开functions.php将以下代码放在最后,然后替换下面代码css文件路径即可。

//滚动条美化

if(_cao('is_scrollbar')){
add_action('wp_footer', function () {
echo <<<EOT
<link rel='stylesheet' href="https://域名/../../scrollbar.css"/>
EOT;
}, 100);
}

 

版权声明:原创作品,未经允许不得转载,否则将追究法律责任。
本站资源有的自互联网收集整理,如果侵犯了您的合法权益,请联系本站我们会及时删除。
本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
本文链接:65资源网https://www.65xwz.cn/1074.html
许可协议:《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权