效果图

代码部署

定位： zibll主题设置 >> 全局功能 >> 自定义代码 >> 自定义底部HTML代码 如果你想要显示在首页，就放首页的就行。添加以下代码。

<!-- 自定义侧边悬浮按钮-->
<div class="comfortable-nav">
    <div class="nav-item vip-item-right">
        <div class="vip-pulse"></div>
        <div class="vip-pulse"></div>
        <div class="vip-pulse"></div>
        <i class="fa fa-diamond nav-icon"></i>
        <div class="vip-panel">
            <h4><i class="fa fa-diamond"></i> 开通会员享特权</h4>
            <div class="vip-benefits">
                <div class="vip-benefit">
                    <i class="fa fa-check"></i>
                    <span>专属内容无限访问</span>
                </div>
                <div class="vip-benefit">
                    <i class="fa fa-check"></i>
                    <span>下载权限提升至最高级</span>
                </div>
                <div class="vip-benefit">
                    <i class="fa fa-check"></i>
                    <span>专属付费优惠</span>
                </div>
                <div class="vip-benefit">
                    <i class="fa fa-check"></i>
                    <span>免费下载更多精品资源</span>
                </div>
            </div>
            <div class="vip-pricing">
                <div class="vip-price">
                    <span class="current">¥10</span>
                    <span class="original">¥29</span>
                </div>
                <div class="vip-period">黑钻会员 · 立省10元</div>
            </div>
            <a href="/" class="vip-cta">
                <i class="fa fa-rocket"></i> 立即开通
            </a>
        </div>
    </div>
    
    <div class="nav-item">
        <a class="initiate-checkin my-custom-checkin checkin-link" href="javascript:;" form-action="user_checkin" ed-text="每日签到">
            <i class="fa fa-calendar-check-o nav-icon"></i>
            <span class="nav-tooltip">每日签到</span>
        </a>
    </div>
    
    <div class="nav-item service-item">
        <button data-height="550" 
                data-remote="/wp-admin/admin-ajax.php?action=private_window_modal&receive_user=1"
                class="service-button" 
                data-toggle="RefreshModal">
            <i class="fa fa-comments-o nav-icon"></i>
            <span class="service-status">在线</span>
        </button>
    </div>
    
    <div class="nav-item">
        <i class="fa fa-qrcode nav-icon"></i>
        <div class="qrcode-panel">
            <div class="qrcode-container">
                <img src="/mh/img/lxfs/gzh.png" alt="公众号二维码" class="qrcode-img">
            </div>
            <div class="qrcode-title">扫码关注公众号</div>
            <div class="qrcode-desc">获取更多专属内容和最新资讯</div>
        </div>
    </div>

    <div class="nav-item fullscreen-item">
        <i class="fa fa-expand nav-icon" id="fullscreen-icon"></i>
        <span class="nav-tooltip" id="fullscreen-tooltip">展开全屏</span>
    </div>
    
    <div class="nav-item backtop-item">
        <i class="fa fa-arrow-up nav-icon"></i>
        <span class="nav-tooltip">返回顶部</span>
    </div>
</div>

<style>
.comfortable-nav{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:999;display:flex;flex-direction:column;gap:7px}.nav-item{width:46px;height:46px;border-radius:12px;background-color:#fff;box-shadow:0 2px 8px rgba(0,0,0,.05);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:all .2s ease}.nav-item:hover{background-color:#f5f7fa;transform:translateX(-2px)}.nav-icon{font-size:20px;transition:color .2s ease}.nav-item:hover .nav-icon{color:#334155}.nav-tooltip{position:absolute;right:52px;background-color:#334155;color:#fff;padding:5px 12px;border-radius:6px;font-size:13px;white-space:nowrap;opacity:0;pointer-events:none;transition:all .2s ease}.nav-item:hover .nav-tooltip{opacity:1;right:48px}.vip-item-right{width:50px;height:50px;border-radius:50%;background-color:#3b82f6;position:relative;box-shadow:0 4px 12px rgba(59,130,246,.2);z-index:2}.vip-item-right .nav-icon{color:#fff;font-size:22px;position:relative;z-index:2}.vip-pulse{position:absolute;width:100%;height:100%;border-radius:50%;background-color:rgba(59,130,246,.4);animation:pulse 2s infinite;z-index:1}.vip-pulse:nth-child(2){animation-delay:.5s}.vip-pulse:nth-child(3){animation-delay:1s}@keyframes pulse{0%{transform:scale(1);opacity:1}100%{transform:scale(2);opacity:0}}.vip-panel{position:absolute;right:70px;top:50%;transform:translateY(-50%);background-color:#fff;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.08);width:260px;padding:18px;opacity:0;pointer-events:none;transition:all .25s cubic-bezier(.4,0,.2,1)}.vip-panel::after{content:'';position:absolute;top:50%;right:-8px;transform:translateY(-50%) rotate(45deg);width:16px;height:16px;background-color:#fff;box-shadow:3px -3px 5px rgba(0,0,0,.05);z-index:-1}.vip-item-right:hover .vip-panel{opacity:1;pointer-events:all}.vip-panel h4{color:#334155;font-size:16px;margin-bottom:10px;font-weight:600;display:flex;align-items:center;gap:6px}.vip-panel h4 i{color:#3b82f6}.vip-benefits{margin-bottom:18px}.vip-benefit{display:flex;align-items:center;gap:8px;font-size:13px;color:#64748b;margin-bottom:8px}.vip-benefit i{color:#3b82f6;font-size:14px}.vip-pricing{background-color:#f8fafc;border-radius:8px;padding:12px;margin-bottom:15px}.vip-price{display:flex;align-items:baseline;gap:6px}.vip-price .current{font-size:20px;font-weight:600;color:#3b82f6}.vip-price .original{font-size:12px;color:#94a3b8;text-decoration:line-through}.vip-period{font-size:12px;color:#94a3b8;margin-top:3px}.vip-cta{width:100%;padding:9px 0;background-color:#3b82f6;color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;gap:6px;text-decoration:none}.vip-cta:hover{background-color:#2563eb;transform:translateY(-1px);color:#fff}.qrcode-panel{position:absolute;right:65px;top:50%;transform:translateY(-50%);background-color:#fff;border-radius:10px;box-shadow:0 5px 15px rgba(0,0,0,.08);width:200px;padding:18px;text-align:center;opacity:0;pointer-events:none;transition:all .25s cubic-bezier(.4,0,.2,1)}.qrcode-panel::after{content:'';position:absolute;top:50%;right:-8px;transform:translateY(-50%) rotate(45deg);width:16px;height:16px;background-color:#fff;box-shadow:3px -3px 5px rgba(0,0,0,.05);z-index:-1}.nav-item:hover .qrcode-panel{opacity:1;pointer-events:all}.qrcode-container{background-color:#fff;border-radius:8px;padding:10px;display:inline-block;box-shadow:0 2px 8px rgba(0,0,0,.05);margin-bottom:12px}.qrcode-img{width:130px;height:130px;border-radius:4px}.qrcode-title{color:#334155;font-size:14px;font-weight:500;margin-bottom:6px}.qrcode-desc{color:#64748b;font-size:12px;line-height:1.4}.service-item{position:relative}.service-status{position:absolute;top:-3px;right:-3px;background-color:#10b981;color:#fff;font-size:9px;padding:2px 5px;border-radius:10px;font-weight:600;white-space:nowrap;z-index:2;animation:pulseOnline 2s infinite}@keyframes pulseOnline{0%{box-shadow:0 0 0 0 rgba(16,185,129,.4)}70%{box-shadow:0 0 0 6px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}.backtop-item{background-color:#f1f5f9;opacity:0;visibility:hidden;transition:all .3s ease}.backtop-item.visible{opacity:1;visibility:visible}.checkin-link,.service-button{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;text-decoration:none}.service-button{background:0 0;border:none;cursor:pointer;padding:0;margin:0}.fullscreen-item.active{background-color:#f5f7fa}.fullscreen-item.active .nav-icon{color:#334155}@media (max-width:767px){.comfortable-nav .nav-item{display:none !important}}
</style>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const backtopBtn = document.querySelector('.backtop-item');
    
    function checkScroll() {
        if (window.scrollY > 300) {
            backtopBtn.classList.add('visible');
        } else {
            backtopBtn.classList.remove('visible');
        }
    }
    
    checkScroll();
    window.addEventListener('scroll', checkScroll);
    
    backtopBtn.addEventListener('click', function() {
        window.scrollTo({
            top: 0,
            behavior: 'smooth'
        });
    });
    
    const vipItem = document.querySelector('.vip-item-right');
    const vipUrl = '<?php echo esc_url($vip_url); ?>';
    if (vipItem && vipUrl) {
        vipItem.addEventListener('click', function() {
            window.location.href = vipUrl;
        });
    }

    const fullscreenBtn = document.querySelector('.fullscreen-item');
    const fullscreenIcon = document.getElementById('fullscreen-icon');
    const fullscreenTooltip = document.getElementById('fullscreen-tooltip');

    function updateFullscreenState() {
        if (document.fullscreenElement) {
            fullscreenIcon.classList.remove('fa-expand');
            fullscreenIcon.classList.add('fa-compress');
            fullscreenTooltip.textContent = '退出全屏';
            fullscreenBtn.classList.add('active');
        } else {
            fullscreenIcon.classList.remove('fa-compress');
            fullscreenIcon.classList.add('fa-expand');
            fullscreenTooltip.textContent = '展开全屏';
            fullscreenBtn.classList.remove('active');
        }
    }

    updateFullscreenState();

    fullscreenBtn.addEventListener('click', function() {
        if (!document.fullscreenElement) {
            document.documentElement.requestFullscreen().catch(err => {
                console.error(`无法进入全屏模式: ${err.message}`);
            });
        } else {
            if (document.exitFullscreen) {
                document.exitFullscreen();
            }
        }
    });

    document.addEventListener('fullscreenchange', updateFullscreenState);
});
</script>

<!-- 自定义侧边悬浮按钮结束-->

注：别忘了公众号图片改成自己的。

结语

就这么简单，赶快去部署吧！