评论快捷预览插件-子比主题

安装方法

方法一: 手动安装

1. 将 `zibll-comment-preview` 文件夹上传到 `wp-content/plugins/` 目录
2. 在WordPress后台进入「插件」管理页面
3. 找到「子比主题 – 评论预览插件」并点击启用

方法二: 压缩包安装

1. 将 `zibll-comment-preview` 文件夹压缩为 `zibll-comment-preview.zip`
2. 在WordPress后台进入「插件」→「安装插件」→「上传插件」
3. 选择压缩包上传并启用

## 使用说明

### 基础配置

启用插件后,在WordPress后台左侧菜单会出现「评论预览设置」,点击进入配置页面:

#### 基础配置选项

– **启用评论预览**: 全局开关,控制是否启用评论预览功能
– **悬停延迟时间**: 鼠标悬停多久后显示预览(默认1000毫秒=1秒)
– **预览评论数量**: 显示最新的几条评论(1-10条)
– **预览框最大高度**: 控制预览框的最大高度(150-600px)

#### 显示配置选项

– **显示用户头像**: 在评论预览中显示评论者头像
– **显示评论时间**: 显示评论发表时间(以友好格式显示,如”3小时前”)
– **评论内容长度**: 每条评论显示的最大字符数,超出部分会显示省略号
– **显示”查看更多”**: 在预览框底部显示查看更多评论的链接

#### 样式配置选项

– **预览框背景色**: 自定义预览框背景颜色
– **预览框边框色**: 自定义预览框边框颜色
– **显示阴影**: 为预览框添加阴影效果,增强视觉层次
– **动画效果**: 选择预览框显示动画(淡入淡出/滑动/缩放/无动画)

### 前台使用

配置完成后,在网站前台的帖子列表页面:

1. 将鼠标移动到任意帖子的评论图标上
2. 等待约1秒(可自定义延迟时间)
3. 自动显示该帖子的评论预览弹窗
4. 移开鼠标或点击”查看更多”链接可关闭预览

## 技术特性

### 兼容性

– **WordPress版本**: 5.0 及以上
– **PHP版本**: 7.0 – 8.5
– **主题依赖**: zibll子比主题
– **浏览器支持**: Chrome、Firefox、Safari、Edge等现代浏览器

### 性能优化

– 使用AJAX异步加载,不影响页面加载速度
– 防重复加载机制,避免重复请求
– 智能缓存,提高响应速度
– 按需加载,仅在需要时才加载评论数据

### 安全性

– WordPress Nonce验证,防止CSRF攻击
– 数据过滤和转义,防止XSS攻击
– 仅显示已审核通过的评论
– 权限验证,确保数据安全

## 目录结构

“`
zibll-comment-preview/
├── assets/ # 资源文件
│ ├── css/
│ │ ├── main.css # 前台样式
│ │ └── admin.css # 后台样式
│ └── js/
│ └── main.js # 前台脚本
├── inc/ # 功能文件
│ ├── options.php # 后台配置
│ └── ajax.php # AJAX处理
├── zibll-comment-preview.php # 插件主文件
└── README.md # 说明文档
“`

## 常见问题

### Q: 为什么鼠标悬停后没有显示预览?

A: 请检查以下几点:
1. 确认插件已启用
2. 在后台设置中检查「启用评论预览」开关是否打开
3. 确认帖子确实有评论
4. 打开浏览器控制台(F12),查看是否有错误信息或调试日志
5. 查看控制台是否输出”ZCP: 准备显示预览,文章ID: xxx”

### Q: 控制台提示”无法获取文章ID”?

A: 这可能是因为:
1. 评论链接的HTML结构与插件不兼容
2. 链接格式特殊无法解析
3. 请将完整的HTML结构和链接格式反馈给开发者

### Q: 预览框位置不正确怎么办?

A: 预览框会根据屏幕边界自动调整位置。如果仍有问题,可能是主题CSS冲突,请联系开发者。

### Q: 支持自定义样式吗?

A: 支持!可以在后台配置中调整颜色、阴影等样式,或者通过自定义CSS进一步美化。

### Q: 会影响网站性能吗?

A: 不会。插件使用AJAX异步加载,仅在鼠标悬停时才请求数据,对性能影响极小。

### Q: 支持移动端吗?

A: 完全支持!插件采用响应式设计,在移动端也能完美显示。

## 更新日志

### v1.0.0 (2025-11-11)

– 🎉 首次发布
– ✨ 支持鼠标悬停预览评论
– ⚙️ 完善的后台配置选项
– 🎨 精美的UI设计
– 📱 响应式支持
– 🌙 暗色模式支持