2020-05-07 11素材网 1261
WordPress网站为了增加访客互动、展示文章热度,会添加一些阅读数、评论数等元素,其实还有一个比较好的元素,那就是点赞功能,跟QQ空间及朋友圈点赞一样。其实网上已经提供了很多点赞插件,但是更多的人会喜欢使用纯代码,那么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<?phpif(isset($_COOKIE['bigfa_ding_'.$post->ID]))echo'done';?>"data-action="ding"data-id="<?phpthe_ID();?>">喜欢<spanclass="count"> <!--?phpif(get_post_meta($post--->ID,'bigfa_ding',true)){ echoget_post_meta($post->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}