• 欢迎访问乐趣公园网站,WordPress信息,WordPress教程,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站,欢迎加入乐趣公园 QQ群
  • Git主题现已支持PHP7版本,速度应该会提高不少,不过云落的网站本来就很快了,所以感觉不是太明显
  • 最新版Git主题已支持说说碎语功能,可像添加文章一样直接添加说说,新建说说页面即可,最后重新保存固定连接,演示地址
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏乐趣公园吧
  • 云落的淘宝店铺已经开张了哦,传送门:https://kimipet.taobao.com

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

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

使用 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 添加文章点赞功能
喜欢 (1294)
关于作者:
无折腾,不生活,我是一个WordPress菜鸟,一个玩淘宝的卖家,欢迎你认识我,我是云落!
发表我的评论
取消评论
表情 加粗 删除线 居中 斜体 签到

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

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(28)个小伙伴在吐槽
  1. gitcafe.net这么好的玉米,做个谷歌镜像多好。
    木先森2018-04-20 11:19 回复 Windows 7 | Chrome 65.0.3325.181
  2. 挺实用的功能
    趣知识2018-02-24 21:28 回复 Windows 7 | Firefox浏览器 58.0
  3. 没到贝长
    L2018-01-28 18:30 回复 Windows 8.1 | Chrome 63.0.3239.26
  4. 已经调试好了,但是需要刷新页面才能看到
    自由屋博客2018-01-26 13:40 回复 Windows 10 | Chrome 53.0.2785.104
  5. 你好博主,我下载装好之后,点赞以后没有增加,点赞数依旧是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
  6. 正是我要找的答案
    优选汇2017-10-07 15:12 回复 Windows 10 | Chrome 55.0.2883.75
  7. 为什么用了上面的代码,点赞后的数字不增加?博主遇到过这种情况吗?
    小勇2017-09-27 12:51 回复 Windows 7 | Chrome 56.0.2924.10
    • 我是主题自带,所以和你不一样
      云落2017-09-29 15:27 回复 Windows 10 | Firefox浏览器 53.0
  8. :???: :mrgreen: :razz: :mrgreen: 很棒哟
    edsion2017-08-23 13:52 回复 Windows 10 | Chrome 60.0.3112.101
  9. 是不错哦,
    亦之博客2017-07-23 16:47 回复 Windows XP | Maxthon 浏览器4.9.4.3000
  10. 不错,谢。
    韭菜韭菜2017-07-11 14:27 回复 Windows 10 | Chrome 59.0.3071.115
  11. 签到成功!签到时间:2017-03-25 00:31:48,每日打卡,生活更精彩哦~
    水果店的瓶子2017-03-25 00:32 回复 Windows 10 | Chrome 45.0.2454.101
  12. 签到成功!签到时间:2017-03-25 00:30:52,每日打卡,生活更精彩哦~
    水果店的瓶子2017-03-25 00:31 回复 Windows 10 | Chrome 45.0.2454.101
  13. 不错啊
    甲骨文2017-03-25 00:30 回复 Windows 10 | Chrome 51.0.2704.79
  14. 老哥稳
    清秋2017-03-02 20:04 回复 Windows XP | 搜狗浏览器 2.X
  15. 博主大人,请问你文章底部的这个喜欢和分享是怎么做的?特别好看,能说说具体方法吗? :neutral:
    穿衣打扮网2015-04-24 13:45 回复 Windows 7 | Chrome 30.0.1599.101
  16. 无处不在的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
  17. 点赞,主要作用还是把,文章被点赞最多的评论置顶优先显示。
    Qa2015-03-07 17:32 回复 Windows 7 | Chrome 38.0.2125.104
  18. 这个不错 :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
  19. :smile: 酷酷酷酷酷酷酷酷酷酷酷酷酷酷
    幻杀博客2015-02-26 18:47 回复 Windows 10 | Firefox浏览器 35.0
    • :oops: 赞赞赞
      云落2015-02-26 20:52 回复 Windows 8.1 | Firefox浏览器 31.0
  20. 你这篇文章被转的好快……
    幻杀博客2015-02-20 17:31 回复 Windows 10 | Firefox浏览器 35.0
    • 纳尼??? :?: :?:
      云落2015-02-20 18:56 回复 Windows 8.1 | Firefox浏览器 31.0