文章点赞(顶一个)功能的实现,三步走:
步骤一
在functions.php内自定义点赞功能,代码如下:
//点赞功能 add_action('wp_ajax_nopriv_inlo_like', 'inlo_like'); add_action('wp_ajax_inlo_like', 'inlo_like'); function inlo_like(){ global $wpdb,$post; $id = $_POST["um_id"]; $action = $_POST["um_action"]; if ( $action == 'ding'){ $inlo_raters = get_post_meta($id,'inlo_ding',true); $expire = time() + 99999999; $domain = ($_SERVER['HTTP_HOST'] != 'localhost') ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost setcookie('inlo_ding_'.$id,$id,$expire,'/',$domain,false); if (!$inlo_raters || !is_numeric($inlo_raters)) { update_post_meta($id, 'inlo_ding', 1); } else { update_post_meta($id, 'inlo_ding', ($inlo_raters + 1)); } echo get_post_meta($id,'inlo_ding',true); } die; }
步骤二
html代码,将下面的div添加到需要点赞的位置:
<span class="zan"><a href="javascript:;" data-action="ding" data-id="<?php the_ID(); ?>" id="Addlike" class="action<?php if(isset($_COOKIE['inlo_ding_'.$post->ID])) echo ' actived';?> <?php $category = get_the_category(); echo $category[0]->category_nicename;?>"><i class="fa fa-thumbs-o-up"></i><span class="count"><?php if( get_post_meta($post->ID,'inlo_ding',true) ){ echo get_post_meta($post->ID,'inlo_ding',true); } else {echo '0';}?></span></a></span>
步骤三
点赞数值增加以及点赞后的提示,用js实现:
//点赞功能 $(document).on("click", "#Addlike", function() { if ($(this).hasClass("actived")) { return alert("您已经赞过啦!"); } else { $(this).addClass("actived"); var z = $(this).data("id"), y = $(this).data("action"), x = $(this).children(".count"); var w = { action: "inlo_like", um_id: z, um_action: y }; $.post("/wp-admin/admin-ajax.php", w, function(A) { $(x).html(A); }); $.tipsBox({ obj: $(this), str: "+1", callback: function() {} }); return false; } });
最后是css,看着办吧,以上。
本站文章除注明转载/出处外,均为本站原创或翻译。若要转载但请务必注明出处,尊重他人劳动成果。
转载请注明出处链接 : https://www.inlojv.com/4320.html