通过插件添加WordPress评论时可上传图片功能,并通过CSS+JS优化交互逻辑

内容涉及两个部分

  1. 通过插件增加基础的图片上传功能
  2. 通过CSS+JS代码,优化上传图片时的交互逻辑

第一步:搜索并安装插件 DCO Comment Attachment

插件安装并启用后,评论区域显示是这样的

第二步:通过增加代码,对上传图片功能进行交互优化

  • 通过CSS控制,将上传部分的html标签全部隐藏,只保留一个label标签作为点击区域(如下图所示)
  • 通过下面的CSS代码,对label区域样式进行优化
优化后的label标签样式展示

到这里,点击label区域可以添加图片并成功上传,但无法实时显示本地预览,接下来需要通过JS实时显示本地已选择图片的预览

  • 实时预览图片之前,需要修改 functions.php ,通过增加如下代码,添加一个图片预览div
添加图片预览div后,浏览器调试时可以看到
  • 通过下面的CSS代码,需要对我们刚刚添加的图片预览div设置一些样式
  • 接下来,通过下面的JS代码就可以将本地添加的图片数据,实时预览显示在刚刚添加的div区域的img中(如下图所示)
实时预览显示

到此,基本的优化工作就算完成了,其他的一些优化可以根据需要再修改

额外

label区域的icon和文本提示可以通过 ::before::after 实现,代码如下

3109