右下角会员开通引导框 重置版 wordpress子比主题

前言：

为了提升用户体验并邀请您享受更多专属特权，我们在页面的右下角精心设计了一个优雅的提示框，温馨引导您开通会员服务。

起初，这份创意来自一位网友的精心编码，但他的代码如同艺术品般复杂，让人赞叹不已。不过，别担心，我在保留其精髓的同时，利用Jquery进行了重构与优化，确保这份功能能够无缝融入任何WordPress程序中，为您的网站增添一抹亮色。现在，只需轻轻一瞥，即可发现开通会员的便捷途径，享受更多精彩内容与服务！

可以在右下角显示一个提示框，引导开通会员！

重置部分：

• 原生JS 替换为 Jquery
• 将设置提取了出来
• 新增定时显示功能
• 简化代码逻辑，减少卡顿

截图：

下载部署：

若出现报错 Uncaught ReferenceError: $ is not defined 请引用以下代码

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.js"></script>

请勿删除我的署名信息，谢谢！

[content_hide]

<!-- Made by Juanyi -->
<script src="https://cdn.bootcdn.net/ajax/libs/js-cookie/3.0.5/js.cookie.js"></script>
<style>
    /* 活动背景图片 */
    .vip-login-tip {
        background-image: url(https://www.pknn.net/images/vme5rmb.jpeg)
    }
</style>
<script>
    // 是否开启？
    var viptips = true;
    // 结束时间
    var endtime = "2023/12/28";
    endtime = new Date(endtime);
    // 活动内容
    var viptitle = "秋冬季限时福利~";
    var vipsubtitle = "2023年10月1日至12月28日";
    var payvip = "月卡会员限时5元";
    // 多少天时间显示一次
    var displaytime = 1;

    function addZero(e){return e<10?"0"+e:e+""}function countDown(){var e=new Date,o=parseInt((endtime.getTime()-e.getTime())/1e3),i=addZero(parseInt(o/86400)),t=addZero(parseInt(o/3600%24)),n=addZero(parseInt(o/60%60)),d=addZero(parseInt(o%60));$(".count").html(`活动倒计时  <code>${i}</code>天<code>${t}</code>时<code>${n}</code>分<code>${d}</code>秒`),o<=0?$(".Ji-col").hide():setTimeout(countDown,1e3)}function checkCookie(){var e=Cookies.get("viplogin_dontshow");""==e||null==e?($(".Ji-row").show(),countDown()):$(".Ji-row").hide()}$(document).ready(function(){viptips&&($(".vip-login-title").html(viptitle),$(".vip-login-subtitle").html(vipsubtitle),$(".vip-login-btn").html(payvip),$(".vip-login-close").click(function(){$(".Ji-row").hide(),Cookies.set("viplogin_dontshow","1",{expires:displaytime})}),checkCookie())});
</script>
<div class="Ji-row"><style>@media(max-width:800px){.Ji-col{display:none}}.vip-login-tip{position:relative;box-sizing:border-box;padding:18px 10px 22px 20px;width:400px;height:175px;border-radius:var(--main-radius);background-color:var(--main-bg-color);background-position:right 50%;background-repeat:no-repeat;background-size:130px;box-shadow:0 0 30px rgba(0,0,0,.1);box-shadow:0 0 8px rgba(255,112,173,.35)}.vip-login-countdown-row{display:flex;align-items:center}.vip-login-countdown-row i{color:var(--header-color);font-size:18px}.vip-login-countdown-row.countdown-lable{margin:0 3px 0 4px;font-size:14px;line-height:16px}.vip-login-countdown-row.counddown-wrap{font-size:14px}.vip-login-title{width:218px;margin:10px 0;font-weight:600;font-size:16px;line-height:22px;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;word-break:break-word!important;word-break:break-all;line-break:anywhere;-webkit-line-clamp:1}.vip-login-subtitle{width:218px;color:var(--text2);font-size:14px;line-height:20px;display:-webkit-box;color:#8e8e8e;overflow:hidden;-webkit-box-orient:vertical;text-overflow:-o-ellipsis-lastline;text-overflow:ellipsis;word-break:break-word!important;word-break:break-all;line-break:anywhere;-webkit-line-clamp:1}.vip-login-btn{margin-top:10px;display:inline-block;height:40px;width:160px;line-height:40px;text-align:center;border-radius:8px;color:#fff;background-color:#00b2ff;transition:background-color.3s,color.3s;font-weight:600;cursor:pointer}.vip-login-close{position:absolute;width:15px;top:5px;right:5px;cursor:pointer}.Ji-row{position:fixed;bottom:30px;right:80px;z-index:10;display:none}.vip-login-countdown-row.counddown-wrap span{display:inline-block;margin:0 4px;width:20px;font-size:13px;height:18px;color:var(--header-color);border-radius:5px;text-align:center;line-height:18px;font-weight:500px;background:var(--header-color)}</style><div class="Ji-col"><div class="vip-login-tip"><div class="vip-login-countdown-row"><div class="counddown-wrap"><p class="count"></div></div><div class="vip-login-title"></div><div class="vip-login-subtitle"></div><div><a class="pay-vip vip-login-btn" href="javascript:void(0);"></a></div><div class="vip-login-close"><svg class="ic-close" viewBox="0 0 1024 1024"><path d="M573.44 512.128l237.888 237.696a43.328 43.328 0 0 1 0 59.712 43.392 43.392 0 0 1-59.712 0L513.728 571.84 265.856 819.712a44.672 44.672 0 0 1-61.568 0 44.672 44.672 0 0 1 0-61.568L452.16 510.272 214.208 272.448a43.328 43.328 0 0 1 0-59.648 43.392 43.392 0 0 1 59.712 0l237.952 237.76 246.272-246.272a44.672 44.672 0 0 1 61.568 0 44.672 44.672 0 0 1 0 61.568L573.44 512.128z"></path></svg></div></div></div></div>

[/content_hide]

其他：

若想将蓝色按钮修改成点击打开链接，可搜索并将代码：

<a class="pay-vip vip-login-btn" href="javascript:void(0);"></a>

修改成：

<a class="vip-login-btn" href="你需要打开的链接"></a>