当前位置: 首页 > wordpress分享 > 正文

无需插件纯代码三步实现wordpress文章点赞功能

纯代码给wordpress文章增加点赞功能,首先说明,本段代码不是原创,原作者好像是bigfa;从代码中就可以看出来!为了方便自己使用,测试时做了一些调整,当然版权归原作者所有,wordpress点赞功能通过自定义字段保存赞数量,通过 cookies 来禁止重复赞。代码中可手动设置cookies过期时间,几次点击一次所增加的次数,本文中的赞大约有300多个是调整时自己点的,现在已经恢复正常!分享wordpress文章点赞代码如下:

首先在主题的function.php文件中添加以下内容:

  1. //赞
  2. add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
  3. add_action('wp_ajax_bigfa_like', 'bigfa_like');
  4. function bigfa_like(){
  5.     $id = $_POST["um_id"];
  6.     $action = $_POST["um_action"];
  7.     if ( $action == 'ding'){
  8.     $bigfa_raters = get_post_meta($id,'bigfa_ding',true);
  9.     $expire = time() + 99999;
  10.     $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
  11.     setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
  12.     if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
  13.         update_post_meta($id, 'bigfa_ding', 1);
  14.     }
  15.     else {
  16.             update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
  17.         }
  18.     echo get_post_meta($id,'bigfa_ding',true);
  19.     }
  20.     die;
  21. }
  22. //赞结束

添加JS代码到需要的页面,为了所有页面都能使用,尽可能添加到header.php或者footer.php,也可以将代码新建js文件,单独引用!

  1. <script type="text/javascript">
  2. $.fn.postLike = function() {
  3.     if ($(this).hasClass('done')) {
  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: "bigfa_like",
  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. $(document).on("click"".favorite",
  23. function() {
  24.     $(this).postLike();
  25. });
  26. </script>

在文章页面single.php添加以下代码,代码放在你想出现点赞的地方,一般是文章内容<?php the_content(); ?>的下边,

  1. <div class="post-like">
  2. <div class="likebox"> <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>"> <img src="./images/like.png" /><div class="count">
  3.     <?php if( get_post_meta($post->ID,'bigfa_ding',true) ){
  4.     echo get_post_meta($post->ID,'bigfa_ding',true);
  5.     } else {
  6.     echo '0';
  7.     }?>
  8.     </div>
  9.   </a>
  10. </div>
  11.  </div>

其实上面的这些已经实现了wordpress文章点赞功能了,下面再美化一下点赞图标,把以下内容复制到主题的style.css中。

  1. /****点赞css***/
  2. .post-like{text-align:center;padding:10px;overflow:hidden}
  3. .likebox img{width:32px;height:32px}
  4. .post-like a.done{cursor:not-allowed}
  5. .likebox{margin:0 auto;width:100px;border-radius:10px;border:solid 1px #9CF;height:65px}
  6. .likebox:hover{background-color:#eee;color:#21759B;width:100px;height:65px;text-decoration:none}
  7. .count{color:red}
  8. .likebox a:hover{text-decoration:none}
  9. /***点赞css结束***/

如果你发现按照全文步骤下来,没有实现点赞的功能,或者点了之后不增加点赞数,那么很有可能是$.post("../wp-admin/admin-ajax.php", ajax_data,代码中引用的admin-ajax.php位置不对,再有可能就是你的wordpress版本低于4.4版本!

本文固定链接: https://www.ziyouwu.com/archives/1662.html | 自由屋博客www.ziyouwu.com|wordpress建站技巧分享

无需插件纯代码三步实现wordpress文章点赞功能:目前有1 条留言

  1. 沙发
    朱绪博客

    就算全世界都否定你,你还可以自己相信自己。

    2018-02-01 下午10:38 江苏省南京市 联通 [回复]

发表评论

2 + 9 = ?


快捷键:Ctrl+Enter