WordPress教程

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:'+';}

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

已有 145 人购买
查看演示升级 VIP立刻购买

收藏
(0)

发表回复

热销模板

Ashade - 作品展示摄影相册WordPress汉化主题
LensNews

本站承接 WordPress / PbootCMS / DedeCMS 等
系统建站、仿站、开发、定制等业务!