• 记录下对WordPress源代码的修改
  • 厉害
  • 说说可以了吧
  • 现在开始可以更方便的插入无序列表了,使用短代码
  • 你知道吗?在论坛输入233会变成一个表情哦 =.=,就是这个 :mrgreen:
  • 安装了TT-RSS,然后发现暂时不支持PHP7,然后又删除了,继续用inoreader吧,其实这个用着还好的,恩,很好
  • 前几天在黑莓应用市场居然发现了新安装应用,最重要的是几天后我居然收到了更新推送
  • 发个说说表示下存在感
  • 重写CMS,目前在本地做实验,希望能成功
  • 图床小书签,其实也很简单,只是用一个js弹窗伪造的小书签23333

纯代码给WordPress添加文章点赞功能

WordPress 云落 3年前 (2015-02-18) 1056次浏览 已收录 24个评论
文章目录[隐藏]

使用ajax+自定义字段功能给WordPress添加文字点赞功能,点赞!!

纯代码给WordPress添加文章点赞功能

前言

[v_qing]本主题的点击喜欢功能不错,有人问我这个是怎么实现的,代码早就看过,知道这个是大发那里的,也没具体去看,今天把具体的代码整理一下[/v_qing]

实现原理

通过自定义字段保存赞数量,通过cookies来禁止重复赞。

代码部署

将下面代码添加进function.php

add_action('wp_ajax_nopriv_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bigfa_like', 'bigfa_like');
function bigfa_like(){
    global $wpdb,$post;
    $id = $_POST["um_id"];
    $action = $_POST["um_action"];
    if ( $action == 'ding'){
    $bigfa_raters = get_post_meta($id,'bigfa_ding',true);
    $expire = time() + 99999999;
    $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
    setcookie('bigfa_ding_'.$id,$id,$expire,'/',$domain,false);
    if (!$bigfa_raters || !is_numeric($bigfa_raters)) {
        update_post_meta($id, 'bigfa_ding', 1);
    } 
    else {
            update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
        }
   
    echo get_post_meta($id,'bigfa_ding',true);
    
    } 
    
    die;
}

将以下代码扔进footer.php文件

<script type="text/javascript">
$.fn.postLike = function() {
	if ($(this).hasClass('done')) {
		return false;
	} else {
		$(this).addClass('done');
		var id = $(this).data("id"),
		action = $(this).data('action'),
		rateHolder = $(this).children('.count');
		var ajax_data = {
			action: "bigfa_like",
			um_id: id,
			um_action: action
		};
		$.post("/wp-admin/admin-ajax.php", ajax_data,
		function(data) {
			$(rateHolder).html(data);
		});
		return false;
	}
};
$(document).on("click", ".favorite",
function() {
	$(this).postLike();
});
</script>

然后打开你的single.php文件,搜索这段代码<?php the_content(); ?>,在这段代码后面添加以下代码

<div class="post-like">
         <a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_COOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>">喜欢 <span class="count">
            <?php if( get_post_meta($post->ID,'bigfa_ding',true) ){            
                    echo get_post_meta($post->ID,'bigfa_ding',true);
                 } else {
                    echo '0';
                 }?></span>
        </a>
 </div>

现在是不是就已经好了??还没有呢,现在的效果还不好看,添加一段代码就好了,将这段代码扔进style.css文件,最底部就可以了

.post-like{text-align:center;padding:10px}
.post-like a{ background-color:#21759B;border-radius: 3px;color: #FFFFFF;font-size: 12px;padding: 5px 10px;text-decoration: none;outline:none}
.post-like a.done, .post-like a:hover{background-color:#eee;color:#21759B;}	
.post-like a.done{cursor:not-allowed}

具体效果

看我的文章底部,虽然不太一样,但是差不多

乐趣公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:纯代码给WordPress添加文章点赞功能
喜欢 (1071)
云落
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(24)个小伙伴在吐槽
  1. 你好博主,我下载装好之后,点赞以后没有增加,点赞数依旧是0,怎么回事呢?
    子龙2017-12-02 18:17 回复 Windows 7 | Firefox浏览器 57.0
    • 云落
      更新主题
      云落2017-12-02 19:00 回复 Windows 10 | Firefox浏览器 58.0
      • 博主,我已经更新到8.7了,而且,还试着重新安装了,换了3个游览器,文章点赞以后,都是0,不会增加成1,只会提示已经点过赞。我使用的系统是4.9.1–en_US!签到成功!签到时间:2017-12-02 19:50:48,每日打卡,生活更精彩哦~
        子龙2017-12-02 19:56 回复 Windows 7 | 搜狗浏览器 2.X
        • 云落
          试了下,我的点赞毫无问题,你自己的自己调试吧,主题方面没问题
          云落2017-12-02 21:02 回复 Windows 10 | Firefox浏览器 58.0
  2. 正是我要找的答案
    优选汇2017-10-07 15:12 回复 Windows 10 | Chrome 55.0.2883.75
  3. 为什么用了上面的代码,点赞后的数字不增加?博主遇到过这种情况吗?
    小勇2017-09-27 12:51 回复 Windows 7 | Chrome 56.0.2924.10
    • 云落
      我是主题自带,所以和你不一样
      云落2017-09-29 15:27 回复 Windows 10 | Firefox浏览器 53.0
  4. :???: :mrgreen: :razz: :mrgreen: 很棒哟
    edsion2017-08-23 13:52 回复 Windows 10 | Chrome 60.0.3112.101
  5. 是不错哦,
    亦之博客2017-07-23 16:47 回复 Windows XP | Maxthon 浏览器4.9.4.3000
  6. 不错,谢。
    韭菜韭菜2017-07-11 14:27 回复 Windows 10 | Chrome 59.0.3071.115
  7. 签到成功!签到时间:2017-03-25 00:31:48,每日打卡,生活更精彩哦~
    水果店的瓶子2017-03-25 00:32 回复 Windows 10 | Chrome 45.0.2454.101
  8. 签到成功!签到时间:2017-03-25 00:30:52,每日打卡,生活更精彩哦~
    水果店的瓶子2017-03-25 00:31 回复 Windows 10 | Chrome 45.0.2454.101
  9. 不错啊
    甲骨文2017-03-25 00:30 回复 Windows 10 | Chrome 51.0.2704.79
  10. 老哥稳
    清秋2017-03-02 20:04 回复 Windows XP | 搜狗浏览器 2.X
  11. 博主大人,请问你文章底部的这个喜欢和分享是怎么做的?特别好看,能说说具体方法吗? :neutral:
    穿衣打扮网2015-04-24 13:45 回复 Windows 7 | Chrome 30.0.1599.101
  12. 无处不在的bigfa-like, bigfa-ding。。。嘛意思,某人自我崇拜得真可以。。
    雅岚2015-04-01 18:21 回复 Windows 7 | Firefox浏览器 36.0
    • 云落
      我觉得没啥,给自己的代码加入自己名字没什么吧
      云落2015-04-01 18:23 回复 Android 4.4.4 | WordPress客户端 android
  13. 点赞,主要作用还是把,文章被点赞最多的评论置顶优先显示。
    Qa2015-03-07 17:32 回复 Windows 7 | Chrome 38.0.2125.104
  14. 这个不错 :grin:
    World2015-03-02 12:41 回复 Windows 7 | Chrome 39.0.2171.99
    • 云落
      恩恩你 :lol:
      云落2015-03-03 15:37 回复 Windows XP | Chrome 38.0.2125.122
  15. :smile: 酷酷酷酷酷酷酷酷酷酷酷酷酷酷
    幻杀博客2015-02-26 18:47 回复 Windows 10 | Firefox浏览器 35.0
    • 云落
      :oops: 赞赞赞
      云落2015-02-26 20:52 回复 Windows 8.1 | Firefox浏览器 31.0
  16. 你这篇文章被转的好快……
    幻杀博客2015-02-20 17:31 回复 Windows 10 | Firefox浏览器 35.0
    • 云落
      纳尼??? :?: :?:
      云落2015-02-20 18:56 回复 Windows 8.1 | Firefox浏览器 31.0