遇见每一个孩子的成长!

基于WordPress实现的评论点赞

2023年11月09日 10:52更新

添加你的广告代码

非常认可 威言威语 基于 Jdeal 创意,做出来的 WordPress走心评论,于是也很想实现这个功能。

但由于技术能力不足,又得不到高人指点,这个想法搁置了至少半个月。虽然,过程中也一直在,但仍然不得其法。百度能搜到的样例少之又少,且没有类似的原理释义。于是,就从jQuery的基础知识开始学,基本都快学完,也没太明白其中的原理,但对jQuery的元素操作确实有了一定的掌握。

5月7日,发布了 要记住:完成比完美更重要 文章,深受启发,于是开始着手动起来,就按照在B站学习到的知识、夹杂百度搜来的源码一点点从搭建框架开始实现功能。从开始敲代码到数据处理流程跑通至少用了6个小时,在不返回代码的那一刻,我知道我很快就要成功了!果不其然,今天工作时忙里偷闲,实现了数据库的操作,在不辍试验了5-6个小时后,我终于暂时实现了评论点赞操作的全部想法。

评论改造
1.数据字段与 威言威语 使用的字段相同,均为WordPress评论表wp_comments里面的comment_karma字段。
2.每条评论下均设置点赞按钮(私密评论除外——即私密评论不参与评论排名),所有人可以参与点赞。
3.根据点赞数量,判断是否列入走心评论

点赞规则
1.管理员每次点赞/取消,点赞数变化10,其余人员每次点击变化1。
2.每条评论每个浏览器下仅可累计点赞1次(删除浏览器COOKIE后可重新点赞)。点赞后再次点击,将取消原点赞。

点赞操作
未点击时,显示空心爱心图标标记评论点赞,鼠标指向后,变成实心爱心图标并自动跳动(鼠标移走仍为空心),点击点赞图标变为实心爱心图标(点赞后,红心爱心图标不再跳动),如果觉得点错了,可以再次点击实心爱心图标,则取消标记评论点赞。图标切换及点赞数量更新均通过Ajax来实现。

动图没保存出来,大家自己去操作试验吧!测试地址:https://wenku.qian.lu/2341.html

走心评论
标记了走心评论的,刷新页面之后可以在此评论右上角显示“走心”按钮,点击按钮可以进入走心评论独立页面(独立页面内容暂未写代码,初步拟定通过增加参数的方式,与评论中心页面相结合)。

鸣谢
威言威语Jdeal 提供创意,BILIBILI提供 jQuery基础知识政务库岳泽以 提供框架思路(实现过程中并没有完全采用),SF提供了执行成功返回数据的处理方式,系统原生JS文件、一聚教程网 提供了click事件的处理方式,编程网 提供了wordpress数据库处理相关代码,0511 CSDN 提供心跳的CSS代码。可能还有其他提供帮助的帖子,一并感谢!有时间再重新整理一下。

添加你的广告代码

过往今朝

内容分页:1 2 3 4

http://manman.qian.lu:2080/
姊妹站:格子老师

您还可能喜欢...

2 条评论

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注