实现原理大体是通过自定义字段保存赞数量,通过Cookie记录并禁止重复赞。

function.php

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

JavaStcrpt

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

  19.         return false;   
  20.     }   
  21. };   
  22. $(".dotGood").click(function () {   
  23.     $(this).postLike();   
  24. });  

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

HTML

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