WordPress右下角添加问候语

前言

看到他们不少人为WordPress添加了问候语，但是都是显示在页面的顶部，我觉得容易遮挡其他元素和存在时间很短，于是改了代码，让其显示在页面右下角并且显示五秒

代码

将代码放到主题后台的自定义代码中的页脚代码内即可。

<!--首页问候-->
<div id="greetingBox"></div>
<style>
    #greetingBox {
        position: fixed;
        bottom: 10px;
        right: 15px;
        width: 400px;
        text-align: right;
        z-index: 10000;
        pointer-events: none
    }

    #greeting {
        display: inline-block;
        position: relative;
        opacity: 0;
        bottom: -110px;
        padding: 5px 40px;
        border-radius: 50px;
        background-color: #fff;
        color: #000;
        font-size: small;
        transition: .5s;
        box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
    }

    #greeting.shown {
        opacity: 1;
        bottom: 0
    }
</style>
<script>
    (() => {
    const greeting = [
        {
            realNode: {
                greeting: "您好,今天过得怎么样?",
                start_time: 0,
                end_time: 11
            }
        },
        {
            realNode: {
                greeting: "中午好👋, 记得好好吃午饭哦",
                start_time: 11,
                end_time: 13
            }
        },
        {
            realNode: {
                greeting: "下午好👋, 希望你下午工作顺利",
                start_time: 13,
                end_time: 18
            }
        },
        {
            realNode: {
                greeting: "晚上好👋, 在属于自己的时间好好放松😌~",
                start_time: 18,
                end_time: 24
            }
        }
    ];

    let e = greeting.length !== 0 ? greeting : [
        // 默认问候语数组
    ];

    let t = document.createElement("div");
    t.id = "greeting";
    setTimeout(() => {
        t.classList.add("shown");
    }, 1000);

    let i = document.querySelector("#greetingBox");
    i.appendChild(t);

    const n = new Date().getHours();
    let r = "";
    for (let t = 0; t < e.length; t++) {
        if (n >= e[t].realNode.start_time && n < e[t].realNode.end_time) {
            r = e[t].realNode.greeting;
            break;
        }
    }
    t.innerHTML = r;
    setTimeout(() => {
        t.classList.remove("shown");
        setTimeout(() => {
            i.remove();
        }, 500);
    }, 5000);
})();
</script>