Riprov2主题美化包|HUAN子主题:顶部导航区域悬停半透明毛玻璃效果美化教程
今天给HUAN主题增加一个顶部导航区域悬停时显示半透明毛玻璃效果,比原版的纯色要舒服一些。
美化方法也很简单,直接添加下方CSS样式代码到样式表中即可。
如:HUAN主题(基于Riprov2的子主题美化包)只用在child-style.css文件中加入如下代码即可:
/*顶部半透明*/
.site-header {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}
.navbar .dropdown-menu {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}
如果需要加入后台设置项,需要在function.php及HUAN主题admin-options.php设置文件中分别添加如下代码。
HUAN主题function.php中增加代码:
//顶部毛玻璃半透明
if (_cao('huan_headeropty', "0") === "1") {
add_action('wp_head', function () {
echo <<<EOT
<style type="text/css">
.site-header {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}
.navbar .dropdown-menu {background-color: rgba(255,255,255,0.5); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px) !important;}
</style>
EOT;
}, 100);
}
HUAN主题admin-options.php的设置项中增加一个设置项代码:
array(
'id' => 'huan_headeropty',
'type' => 'switcher',
'title' => '是否启用顶部导航毛玻璃效果',
'label' => '启用后增加顶部导航悬停时毛玻璃效果',
'default' => false,
),
保存后,刷新网页缓存,在HUAN主题后台设置美化特效中开启半透明毛玻璃效果即可。
注意:以上设置代码仅限于riprov2主题美化包HUAN子主题中使用,其他网站需根据实际情况修改为对应的导航样式。