WordPress模板如何使用纯代码实现点赞功能?

WordPress网站为了增加访客互动、展示文章热度,会添加一些阅读数、评论数等元素,其实还有一个比较好的元素,那就是点赞功能,跟QQ空间及朋友圈点赞一样。其实网上已经提供了很多点赞插件,但是更多的人会喜欢使用纯代码,那么WordPress模板如何使用纯代码实现点赞功能?我们一起探讨一下。

WordPress网站为了增加访客互动、展示文章热度,会添加一些阅读数、评论数等元素,其实还有一个比较好的元素,那就是点赞功能,跟QQ空间及朋友圈点赞一样。其实网上已经提供了很多点赞插件,但是更多的人会喜欢使用纯代码,那么WordPress模板如何使用纯代码实现点赞功能?我们一起探讨一下。

WordPress主题下载,WordPress免费主题下载,网站源码模板下载

将下面的代码加入到你的functions.php中就是wordpress主题的函数文件:

add_action(‘wp_ajax_nopriv_bigfa_like’,’bigfa_like’);

add_action(‘wp_ajax_bigfa_like’,’bigfa_like’);

functionbigfa_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;//makecookiesworkwithlocalhost

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));

}

echoget_post_meta($id,’bigfa_ding’,true);

}

die;

}

JS代码

$.fn.postLike=function(){

if($(this).hasClass(‘done’)){

returnfalse;

}else{

$(this).addClass(‘done’);

varid=$(this).data(“id”),

action=$(this).data(‘action’),

rateHolder=$(this).children(‘.count’);

varajax_data={

action:”bigfa_like”,

um_id:id,

um_action:action

};

$.post(“/wp-admin/admin-ajax.php”,ajax_data,

function(data){

$(rateHolder).html(data);

});

returnfalse;

}

};

$(document).on(“click”,”.favorite”,

function(){

$(this).postLike();

});

 在你想显示的地方加入如下代码,推荐加到文章内容尾部

<divclass=”post-like”><aclass=”favorite&lt;?phpif(isset($_COOKIE[‘bigfa_ding_’.$post-&gt;ID]))echo’done’;?&gt;”data-action=”ding”data-id=”<?phpthe_ID();?>”>喜欢<spanclass=”count”>

<!–?phpif(get_post_meta($post—>ID,’bigfa_ding’,true)){

echoget_post_meta($post-&gt;ID,’bigfa_ding’,true);

}else{

echo’0′;

}?></span>

</a></div>

 参考css样式

.post-like{text-align:center;padding:10px}

.post-likea{background-color:#21759B;border-radius:3px;color:#FFFFFF;font-size:12px;padding:5px10px;text-decoration:none;outline:none}

.post-likea.done,.post-likea:hover{background-color:#eee;color:#21759B;}

.post-likea.done{cursor:not-allowed}


下载说明:
1. 本站所有资源来源于网络和用户上传,如有侵权请联系站长
2. 本站分享目的仅供大家学习和交流,您必须在下载后24小时内删除!
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

本站的资源均来自于互联网,仅为资源共享、学习参考之目的,其版权均归原作者及其网站所有,如有侵权请留言联系:admin,转转请注明出处:http://zhanmr.com/6258.htm

发表评论

电子邮件地址不会被公开。 必填项已用*标注