详情
评论
问答

子比主题 – 顶部悬挂样式-子主题配置教程

图片[1]轩玮博客|基于建站技术与致力打造一个IT博客子比主题 – 顶部悬挂样式-子主题配置教程轩玮博客|基于建站技术与致力打造一个IT博客轩玮博客

第一步在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);
            }
        }

 

温馨提示:本文最后更新于2025-10-29 10:06:57,某些文章具有时效性,若有错误或已失效,请在下方 留言或联系 轩玮博客
子比主题 – 顶部悬挂样式-子主题配置教程轩玮博客|基于建站技术与致力打造一个IT博客轩玮博客
子比主题 – 顶部悬挂样式-子主题配置教程
此内容为付费阅读,请付费后查看
500积分
付费阅读
© 版权声明
THE END
喜欢就支持一下吧
点赞13 分享
评论 抢沙发

请登录后发表评论

    暂无评论内容