一为（onenav）主题导航 – 添加弹出问候语教程

效果展示

教程

代码添加路径：/wp-content/themes/onenav/footer.php

<!--问候语开始-->
	<div id="greetingBox"></div>
	<style>
	  #greetingBox {
	    position: fixed;
	    top: 20px;
	    left: 50%;
	    transform: translateX(-50%);
	    width: 420px;
	    text-align: center;
	    z-index: 10000;
	    pointer-events: none;
	    font-family: 'Microsoft YaHei', sans-serif;
	  }
	  .greeting {
	    display: inline-block;
	    position: relative;
	    opacity: 0;
	    top: -120px;
	    padding: 12px 50px;
	    border-radius: 30px;
	    background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
	    color: #2c3e50;
	    font-size: 15px;
	    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
	    margin: 8px 0;
	    border: 1px solid rgba(255, 255, 255, 0.3);
	    backdrop-filter: blur(6px);
	    transform: scale(0.9);
	    min-width: 280px;
	  }
	  .greeting.shown {
	    opacity: 1;
	    top: 0;
	    transform: scale(1);
	  }
	  @keyframes float {
	    0% { transform: translateY(0px); }
	    50% { transform: translateY(-5px); }
	    100% { transform: translateY(0px); }
	  }
	</style>
	<script>
	  (() => {
	    const greetings = [
	      {
	        compliment: "太晚啦，还不睡的嘛！太厉害了叭！",
	        start_time: 0,
	        end_time: 5
	      },
	      {
	        compliment: "早起的鸟儿有虫吃，您真自律呀！",
	        start_time: 6,
	        end_time: 9
	      },
	      {
	        compliment: "状态很好，继续保持哦～",
	        start_time: 10,
	        end_time: 10
	      },
	      {
	        compliment: "坚持到现在很棒啦，准备吃午饭叭！",
	        start_time: 11,
	        end_time: 11
	      },
	      {
	        compliment: "午休是充电的好时机呢！",
	        start_time: 12,
	        end_time: 14
	      },
	      {
	        compliment: "今天又是充实的一天呢！",
	        start_time: 14,
	        end_time: 18
	      },
	      {
	        compliment: "晚餐要好好犒劳自己哦！",
	        start_time: 19,
	        end_time: 19
	      },
	      {
	        compliment: "放松时间到，享受此刻的宁静吧～",
	        start_time: 20,
	        end_time: 24
	      }
	    ];
	    const currentDate = new Date();
	    const currentHour = currentDate.getHours();
	    const currentMinute = currentDate.getMinutes().toString().padStart(2, '0');
	    const greetingBox = document.querySelector("#greetingBox");
	    const timeGreeting = `你好！很高兴在${currentHour}:${currentMinute}见到你呀！`;
	    let compliment = "";
	    for (const group of greetings) {
	      if (currentHour >= group.start_time && currentHour <= group.end_time) {
	        compliment = group.compliment;
	        break;
	      }
	    }
	    const messages = [timeGreeting];
	    if (compliment) messages.push(compliment);
	    const greetingElements = [];
	    messages.forEach((msg, index) => {
	      const greetingElement = document.createElement("div");
	      greetingElement.className = "greeting";
	      greetingElement.innerHTML = `
	        <div style="position: relative;">
	          ${msg}
	          <div style="position: absolute; right: -25px; top: 50%; transform: translateY(-50%);">
	            ${index === 0 ? '🕒' : '✨'}
	          </div>
	        </div>
	      `;
	      greetingBox.appendChild(greetingElement);
	      greetingElements.push(greetingElement);
	    });
	    setTimeout(() => {
	      greetingElements.forEach((element, index) => {
	        setTimeout(() => {
	          element.classList.add("shown");
	          element.style.animation = "float 3s ease-in-out infinite";
	        }, index * 550);
	      });
	    }, 800);
	    setTimeout(() => {
	      greetingElements.forEach(element => {
	        element.style.animation = "none";
	        element.classList.remove("shown");
	        setTimeout(() => element.remove(), 600);
	      });
	      setTimeout(() => greetingBox.remove(), 1000);
	    }, 4800);
	  })();
	</script