WordPress右下角添加问候语

奥多也网络

前言

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

代码

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

1. <!--首页问候-->
   
2. <div id="greetingBox"></div>
   
3. <style>
   
4.     #greetingBox {
   
5.         position: fixed;
   
6.         bottom: 10px;
   
7.         right: 15px;
   
8.         width: 400px;
   
9.         text-align: right;
   
10.         z-index: 10000;
    
11.         pointer-events: none
    
12.     }
    
13. 
    
14.     #greeting {
    
15.         display: inline-block;
    
16.         position: relative;
    
17.         opacity: 0;
    
18.         bottom: -110px;
    
19.         padding: 5px 40px;
    
20.         border-radius: 50px;
    
21.         background-color: #fff;
    
22.         color: #000;
    
23.         font-size: small;
    
24.         transition: .5s;
    
25.         box-shadow: rgb(0 0 0 / 5%) 0 10px 20px
    
26.     }
    
27. 
    
28.     #greeting.shown {
    
29.         opacity: 1;
    
30.         bottom: 0
    
31.     }
    
32. </style>
    
33. <script>
    
34.     (() => {
    
35.     const greeting = [
    
36.         {
    
37.             realNode: {
    
38.                 greeting: "您好,今天过得怎么样?",
    
39.                 start_time: 0,
    
40.                 end_time: 11
    
41.             }
    
42.         },
    
43.         {
    
44.             realNode: {
    
45.                 greeting: "中午好👋, 记得好好吃午饭哦",
    
46.                 start_time: 11,
    
47.                 end_time: 13
    
48.             }
    
49.         },
    
50.         {
    
51.             realNode: {
    
52.                 greeting: "下午好👋, 希望你下午工作顺利",
    
53.                 start_time: 13,
    
54.                 end_time: 18
    
55.             }
    
56.         },
    
57.         {
    
58.             realNode: {
    
59.                 greeting: "晚上好👋, 在属于自己的时间好好放松😌~",
    
60.                 start_time: 18,
    
61.                 end_time: 24
    
62.             }
    
63.         }
    
64.     ];
    
65. 
    
66.     let e = greeting.length !== 0 ? greeting : [
    
67.         // 默认问候语数组
    
68.     ];
    
69. 
    
70.     let t = document.createElement("div");
    
71.     t.id = "greeting";
    
72.     setTimeout(() => {
    
73.         t.classList.add("shown");
    
74.     }, 1000);
    
75. 
    
76.     let i = document.querySelector("#greetingBox");
    
77.     i.appendChild(t);
    
78. 
    
79.     const n = new Date().getHours();
    
80.     let r = "";
    
81.     for (let t = 0; t < e.length; t++) {
    
82.         if (n >= e[t].realNode.start_time && n < e[t].realNode.end_time) {
    
83.             r = e[t].realNode.greeting;
    
84.             break;
    
85.         }
    
86.     }
    
87.     t.innerHTML = r;
    
88.     setTimeout(() => {
    
89.         t.classList.remove("shown");
    
90.         setTimeout(() => {
    
91.             i.remove();
    
92.         }, 500);
    
93.     }, 5000);
    
94. })();
    
95. </script>
    

复制代码