一为主题添加底部登入弹窗

教程分享2年前 (2022)发布战东海

将下方代码粘贴到【网站后台】->【主题设置】->【添加代码】->【底部(footer)自定义 js 代码】

<link rel="stylesheet" type="text/css" href="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-0accce98-f18a-476c-ae72-1ab863d93eda/0b636943-d211-4759-be18-74d2ada197c7.css" />
<script type="text/javascript">
    // 站长 QQ
    let qq = '76860898'
    function closeLoginTipsDom() {
        document.getElementById("login-tips").style.display = "none"
    }
    document.write(`<div class="none"><div id="login-tips" class="login-tips"><center><img class="guide-ac" src="https://cdn.aixifan.com/acfun-pc/2.8.36/img/acimg.png" alt="AC站娘" /><i class="iconfont icon-crying"></i><span style="margin-left: 20px; vertical-align: baseline; display: inline-block; font-size: 18px; font-weight: 700; vertical-align: middle; margin-left: 12px;">一键登录开启个人书签等功能！</span><a href="/login/" class="login-btn">立即登录</a><a href="http://wpa.qq.com/msgrd?v=3&amp;uin=${qq}&amp;site=qq&amp;menu=yes" rel="nofollow" class="openlogin-qq-a"><i class="iconfont icon-qq login-btn">&nbsp;联系站长</i></a></center><div style="position: absolute; top: 10px; right: 10px; background-color:rgba(255, 255, 255, 0.61); width: 20px; height: 20px; cursor: pointer; border-radius: 20px;" onclick="closeLoginTipsDom()"><i style="font-size: 12px; line-height: 20px; vertical-align: middle; margin-bottom: 8px; color:#f1404b" class="iconfont icon-close"></i></div></div></div>`)
</script>

CSS:

@media (max-width: 768px) {
    .login-tips {
        left: 0;
    }
}

@media (min-width: 768px) {
    .login-tips {
        left: 0;
    }

    .sidebar-nav.mini-sidebar~.main-content .login-tips {
        left: 60px !important;
    }
}

.login-tips {
    position: fixed;
    bottom: -2px;
    right: 0;
    z-index: 22;
    background: rgba(255, 255, 255, 0.8);
    color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    text-align: center;
    padding: 10px 0;
    transition: all 0.3s;
}

.login-tips .go-icon {
    color: rgba(0, 0, 0, 0.6);
    font-size: 22px;
    vertical-align: middle;
}

.login-tips .login-btn {
    display: inline-block;
    vertical-align: baseline;
    height: 32px;
    padding: 0 20px;
    background-color: #409CED;
    color: #ffffff;
    vertical-align: middle;
    margin-left: 16px;
    border-radius: 4px;
    line-height: 32px;
    text-align: center;
    font-size: 14px;
    margin: 8px 8px;
}

.io-black-mode .login-tips {
    color: #c6c9cf;
    background: #2C2E2F;
    box-shadow: 0 0 25px 5px rgba(10, 10, 10, .25);
}

.login-tips .guide-ac {
    position: absolute;
    bottom: 0;
    left: 180px;
    width: 330px;
    height: 145px;
}

PHP代码自行研究：

<?php if ( ! is_user_logged_in() && !wp_is_mobile()  ): ?>

<div id="login-tips" class="login-tips">
<center>
< img class="guide-ac" src="https://nav.iculture.cc/icon/acimg.png" alt="AC站娘" />
<i class="iconfont icon-crying"></i>
<span style="margin-left: 20px; vertical-align: baseline; display: inline-block; font-size: 18px; font-weight: 700; vertical-align: middle; margin-left: 12px;">一键登录开启个人书签等功能！</span>
< a href=" " class="login-btn">立即登录</ a>
< a href="http://wpa.qq.com/msgrd?v=3&amp;uin=1340682394&amp;site=qq&amp;menu=yes" rel="nofollow" class="openlogin-qq-a"><i class="iconfont icon-qq login-btn">&nbsp;联系站长</i></ a>
</center>
<div style="position: absolute; top: 10px; right: 10px; background-color:rgba(255, 255, 255, 0.61); width: 20px; height: 20px; cursor: pointer; border-radius: 20px;" onclick="closeLoginTipsDom()">
<i style="font-size: 12px; line-height: 20px; vertical-align: middle; margin-bottom: 8px; color:#f1404b" class="iconfont icon-close"></i>
</div>
</div>

<?php endif; ?>

! is_user_logged_in()代表没有登录

!wp_is_mobile()代表不是手机版

所有没有登录且不是手机版，会展示下面的窗口

素材：