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

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