为wordpress文章页面添加点赞功能纯代码

代码为wordpress添加点赞功能;大挖亲测可用,并且已经应用到wp主题开发中;

wordpress的文章点赞方法很多,而且大多数都是依赖插件和第三方的附属功能。说起来也是挺麻烦的,原本只是想添加一个点赞最后还附带过来无用的第三方广; $ _ x w告功能;所以挖主o u p ; q _ ^ W题分享出来一款非常简洁的纯代码实现wp主题点赞的功能。而且操作起来非常简单,有T r - N V ^ g点基本的小伙伴都可以直接上手。而且运用cookies有效的C U解决了重复点赞bug;下面就是方法喽。为wordpress文章页面添加点赞功能纯代码

添加函数前注意要引E z T o用版本为1.10版以上的jQuery哦

首先需要在Functions.phpV X P f %文件中添加一个注册函:

add_action('wp_ajax_noprivL Q R_bigfa_like', 'bigfa_like');
add_action('wp_ajax_bb H _ Higfa_like', 'bigfa_like');
function bigfa_like(){
global $wpdb,8 _ O 4$post;
$id = $_POST["um_id"];
$action = $_POST["um_action"];
if ( $action == 'ding'){
$bigfa_raters = get_A D l jpost_meta($id,'bigfa_ding',true);
$expire = time() + 99999999;
$domain = ($_SERVER['HTP T X $TP_0 , S a s HHOST'] != 'loc! D n R Kalhost') ? $_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'm g g s, 1);
}
else {
update_post_meta($id, 'bigfa_ding', ($bigfa_raters + 1));
}
echo get_post_meta($id,'bigfa_ding',true);
}
die;
}
然后在页头或是页角位置添加一段JS代码:
$(document).rQ . s _ 5 . | Yeady(funcE S ction(h ; 1 c Q 3 ~) {
$.fnq e  4 Q K ; n K.postLike = function() {
if ($(this).hasClZ S 8ass('done')) {
return false;r J a u f 6
} else {
$(this5  u c &).addClass('done');
vart , e + D id = $(this).data("id"),
action = $(this).data('action'),
rateHol) S L 6der = $(this).children('.count'0 { G ))$ k # : i 3 n =;
var ajax_data = {
action: "bigfa_lik, b j ; } K =e",
um_id: id,
um_action: action
};
$.post("./wp-ay o N r Qdmin/admin-a3 : d . T Mjax.php", ajax_data,
function(data) {
$(rateHol; Q 4 + # Tder).html(data);
});
returi & o H 8 * 1 3 jn falseC l F g q q;
}
};
$(document).on("click", ".+ u . % 4 6 sf1 x l w Q -avorite",
function() {
$(this).postLike();
});
});
最后在文章页面添加下前台点赞的调用代码:
1
2
3
4
5
6
7
8
9
<div classR k r ~="post-like">
<a href="https://zouaw{ W 3 W.com/javascript:;", c 6 c t X l data-action="ding" data-id="<?php the_ID(); ?>" class="favorite<?php if(isset($_R 3 G ) y lCOOKIE['bigfa_ding_'.$post->ID])) echo ' done';?>"y = Q O & S ^>大挖好帅 <n & u ; 5span class="| 4 1 = j L U v vcount/ | I"&M M X = N f hgt;
<?php if( get_post_meta($postq p ^ S M T->ID,'bigfa_ding',true) ){
echo ged 3 Nt$ B C j u ) M_post_meta($post->ID,'bigf7 B U N U C W J 5a_ding',true);
} else {
echo '0';
}?></span>
</a>
</div&z B x v 7gt;
提供一小段的参考CSS样式方便大家操作
1
2
3
4
.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;oc o P E $ J  i |utline:none}
.post-liP i ; B ` 1 { *ke a.done, .post-like a:hover{backgroE k } ! % A F Qund-color:#eee;color:#21759B;}
.post-like a.done{cursor:not-allowed}