![图片[1]轩玮博客|基于建站技术与致力打造一个IT博客子比主题 – 顶部悬挂样式-子主题配置教程轩玮博客|基于建站技术与致力打造一个IT博客轩玮博客](https://www.xuwbk.com/wp-content/uploads/2025/06/85.jpg)
第一步在zibll_child\core\options/options.php中合适位置添加以下代码:
//顶部悬挂样式
CSF::createSection($prefix, array(
'id' => 'top_sticky',
'title' => '顶部悬挂样式',
'icon' => 'fa fa-linode',
'description' => '',
'fields' => array(
array(
'title' => '启用顶部悬挂样式',
'id' => 'top_sticky_switcher',
'class' => 'compact',
'type' => 'switcher',
'default' => false,
'desc' => '开启后,顶部导航栏将悬挂在页面顶部,方便用户快速定位.',
),
),
));
第二步在zibll_child\core\functions/functions.php中合适位置添加以下代码:
//顶部悬挂设置
function top_sticky_setting() {
// 获取顶部悬挂开关的状态
$top_sticky_enabled = _child('top_sticky_switcher');
// 如果顶部悬挂样式开启,则输出相应的CSS样式
if ($top_sticky_enabled) {
//加载CSS样式
echo '<link rel="stylesheet" href="' . get_stylesheet_directory_uri() . '/css/xuwbk_hang.css">';
echo '<div class="xuwbk_hang"></div>';
echo '<script>
var xuwbk_hang = document.querySelector(".xuwbk_hang");
xuwbk_hang.addEventListener("click", function() {
window.scrollTo({
top: 0,
behavior: "smooth"
});
});
</script>';
}
}
add_action('wp_head', 'top_sticky_setting');
第二步在zibll_child\CSS/中新建一个CSS文件,轩玮博客搭建的是:xuwbk_hang.css代码如下:
/*顶部悬挂设置*/
@media screen and (min-width: 850px) {
.xuwbk_hang {
width: 150px;
height: 200px;
display: inline-block;
background: url(https://img.alicdn.com/imgextra/i1/2210123621994/O1CN01mCJxMU1QbImPZHBHZ_!!2210123621994.webp) no-repeat 50%/100%;
vertical-align: middle;
position: fixed;
left: 90%;
top: 55px;
z-index: 50;
cursor: pointer;
animation: new-year 1.2s ease-in-out 0s infinite alternate;
margin-left: -1px;
transform-origin: 50% 0;
pointer-events: none;
}
}
@keyframes new-year {
0% {
transform: rotate(10deg);
}
100% {
transform: rotate(-10deg);
}
}
© 版权声明
THE END
















暂无评论内容