!
也想出现在这里? 联系我们
广告位

WordPress如何添加无刷新AJAX点赞功能

此段函数实现了无插件点赞功能,实现原理大体是通过自定义字段保存赞数量,通过 Cookie 记录并禁止重复赞。具体的代码如下:

  1. //AJAX点赞
  2. function dotGood()
  3. {
  4. global $wpdb, $post;
  5. $id = $_POST["um_id"];
  6. if ($_POST["um_action"] == 'topTop') {
  7. $specs_raters = get_post_meta($id, 'dotGood', true);
  8. $expire = time() + 99999999;
  9. $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
  10. setcookie('dotGood_' . $id, $id, $expire, '/', $domain, false);
  11. if (!$specs_raters || !is_numeric($specs_raters)) update_post_meta($id, 'dotGood', 1);
  12. else update_post_meta($id, 'dotGood', ($specs_raters + 1));
  13. echo get_post_meta($id, 'dotGood', true);
  14. }
  15. die;
  16. }
  17. add_action('wp_ajax_nopriv_dotGood', 'dotGood');
  18. add_action('wp_ajax_dotGood', 'dotGood');

js 部分:

  1. //点赞
  2. $.fn.postLike = function () {
  3. if ($(this).hasClass('done')) {
  4. alert('点多了伤身体~');
  5. return false;
  6. } else {
  7. $(this).addClass('done');
  8. var id = $(this).data("id"),
  9. action = $(this).data('action'),
  10. rateHolder = $(this).children('.count');
  11. var ajax_data = {
  12. action: "dotGood",
  13. um_id: id,
  14. um_action: action
  15. };
  16. $.post("/wp-admin/admin-ajax.php", ajax_data,
  17. function (data) {
  18. $(rateHolder).HTML(data);
  19. });
  20. return false;
  21. }
  22. };
  23. $(".dotGood").click(function () {
  24. $(this).postLike();
  25. });

代码引用部分:

  1. <a href="javascript:;" data-action="topTop" data-id="<?php the_ID(); ?>" class="dotGood <?php echo isset($_COOKIE['dotGood_' . $post->ID]) ? 'done' : ''; ?>">
  2. <span class="count"><?php echo ($dot_good=get_post_meta($post->ID, 'dotGood', true)) ? $dot_good : '0'; ?></span>
  3. </a>

对于代码引用部分,还可以加点 CSS

  1. .post-like{margin:10% 0 0;position:relative;}
  2. .post-like a.dotGood{height:30px;line-height:30px;width:30px;font-size:24px;text-align:center;display:inline-block;cursor: pointer;position:relative;}
  3. .post-like a.dotGood.done{color: #e2264d;}
  4. .post-like a.dotGood span{position:absolute;display:inline-block;top:0;left:26px;width:auto;font-size:14px;}
  5. .post-like a.dotGood span:before{content:'+';}

给TA打赏
共{{data.count}}人
人已打赏
WordPress教程

WordPress 读取文章中的所有图片幻灯显示

2022-11-18 16:38:40

WordPress教程

WordPress 主题如何给评论添加自定义字段

2022-11-18 17:39:15

下载说明

  • 1、微码盒所提供的压缩包若无特别说明,解压密码均为weimahe.com
  • 2、下载后文件若为压缩包格式,请安装7Z软件或者其它压缩软件进行解压;
  • 3、文件比较大的时候,建议使用下载工具进行下载,浏览器下载有时候会自动中断,导致下载错误;
  • 4、资源可能会由于内容问题被和谐,导致下载链接不可用,遇到此问题,请到文章页面进行反馈,以便微码盒及时进行更新;
  • 5、其他下载问题请自行搜索教程,这里不一一讲解。

站长声明

本站大部分下载资源收集于网络,只做学习和交流使用,版权归原作者所有;若为付费资源,请在下载后24小时之内自觉删除;若作商业用途,请到原网站购买;由于未及时购买和付费发生的侵权行为,与本站无关。本站发布的内容若侵犯到您的权益,请联系本站删除,我们将及时处理!
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索