效果展示

更新日志

2025年01月11日

• 修复了评论消息中表情包不显示的问题
• 解决了懒加载页面中表情预载图片的显示问题

2025年02月02日

• 优化了代码逻辑，减少了大量不必要的API请求
• 新增了自定义的WordPress REST API端点，用于返回热门评论

部署代码

将以下代码放置在主题目录下的function.php文件中，或者新建一个func.php文件：

如果只希望在首页显示该弹窗，可以通过后台小工具 → 自定义 HTML，将代码放在首页的任何位置。如果希望全站显示，则可以将代码放在主题设置中的自定义HTML部分。

通过以上步骤，您可以在网站底部添加一个动态评论弹窗，提升用户体验并增加互动性。

---

优化建议

1. 减少重复代码：

• 将重复的逻辑（如 DOM 操作、API 请求）封装成函数，提高代码复用性。

1. 优化 API 请求：

• 使用缓存机制，避免重复请求相同数据。
• 添加错误处理，确保在请求失败时用户体验不受影响。

1. CSS 优化：

• 将 CSS 样式提取到外部文件或 WordPress 主题的样式表中，减少 HTML 文件的体积。

1. JavaScript 优化：

• 使用 Promise 和 async/await 优化异步操作。
• 避免频繁操作 DOM，减少重绘和回流。

1. 代码结构优化：

• 将代码模块化，分离功能逻辑（如 API 请求、DOM 操作、事件处理）。

---

优化后的代码

1. PHP 部分（function.php 或 func.php）

---

HTML 部分

---

3. CSS 部分（建议放到外部样式表）

---

JavaScript 部分（优化后）

---

优化后的优势

1. 性能提升：

• 减少不必要的 API 请求，使用缓存机制。
• 优化 DOM 操作，减少页面重绘。

1. 可读性增强：

• 将功能模块化，代码结构更清晰。
• 使用 async/await 处理异步逻辑，避免回调地狱。

1. 可维护性提高：

• 分离 HTML、CSS 和 JavaScript，便于后续维护和扩展。
• 添加错误处理，增强代码健壮性。