子比主题美化教程 – 不同时段问候弹窗美化教程

给子比主题加上24 小时不同时段的专属问候弹窗，访客打开页面会根据当前时间显示对应的暖心提示语，适配电脑 + 移动端，教程超简单，复制即用～

效果预览

1. 弹窗固定在页面右下角，电脑端宽 400px、移动端自适应缩小，不影响网站原有操作；
2. 页面加载 1 秒后弹窗顺滑淡入，显示 5 秒后自动顺滑淡出并消失；
3. 0-23 点每个小时对应一句专属问候语（带可爱表情），可自行修改文字 / 表情 / 样式；
4. 弹窗层级拉满不被遮挡，且不触发鼠标事件，不影响点击下方的按钮 / 链接。

代码部署

第一步：复制完整代码

直接复制下方全部代码，无需修改即可直接使用，后续想自定义的话看「自定义修改说明」即可。

第二步：子比主题后台粘贴代码

1. 登录你的 WordPress 后台，找到「子比主题设置」→「自定义代码」→「自定义底部HTML代码」；
2. 将复制的代码直接粘贴到「自定义底部HTML代码」的输入框中；
3. 点击「保存设置」，刷新网站首页即可看到效果～

自定义修改说明

不需要懂代码，按照提示直接改内容即可，改完保存就生效～

1. 修改问候语 / 表情

找到代码中const hourGreetings = [后面的数组，0 对应凌晨 0 点、1 对应凌晨 1 点……23 对应晚上 23 点，直接修改双引号内的文字和表情即可，比如把"早上7点🍜 起床啦，记得吃一顿热乎乎的早餐～"改成"早上7点☕ 早呀，新的一天要元气满满～"。

2. 修改弹窗显示 / 消失时间

• 页面加载后多久弹出：找到代码中setTimeout(() => {greetingBox.classList.add("shown");}, 1000);，其中1000是 1 秒，改成 2000 就是 2 秒，以此类推；
• 弹窗显示多久后消失：找到代码中setTimeout(() => {greetingBox.classList.remove("shown");}, 5000);，其中5000是 5 秒，改成 8000 就是 8 秒，以此类推。

3. 修改弹窗位置

找到#greetingBox中的样式：

• bottom: 10px; 是弹窗距离页面底部的距离，改成 20px 就是 20 像素；
• right: 15px; 是弹窗距离页面右侧的距离，改成 10px 就是 10 像素；如果想放左下角，把right: 15px;改成left: 15px;即可。

4. 修改弹窗样式（颜色 / 大小）

• 改背景色：找到#greeting中的background-color: #fff;，#fff是白色，换成子比主题主色号即可（比如子比默认蓝#4E5BA6）；
• 改文字色：找到#greeting中的color: #333;，#333是深灰色，换成#fff就是白色；
• 改弹窗大小：电脑端改#greetingBox中的width: 400px;，移动端改@media (max-width: 768px)中的width: 280px;，数值越小弹窗越窄。

注意事项

1. 代码仅适配子比（Zibll）主题，其他主题使用可能会有样式兼容问题；
2. 粘贴代码时确保没有遗漏字符，否则可能导致弹窗不显示；
3. 若弹窗被网站的悬浮按钮（如客服、回到顶部）遮挡，可适当调大z-index: 10000;的数值，比如改成 100000。

电脑端打开网站，右下角会 1 秒后淡入时段问候弹窗，显示 5 秒后自动淡出；手机端打开会自适应缩小，样式依旧简约，和子比主题的移动端布局完美适配，给访客增加一点小温暖～