无插件使用ajax建立点赞喜欢按钮

老Q本站上专门建立了一个分类用来收集比较好的工具，主要是服务于外贸，视频/音频制作和文案创作用的工具清单，为了追踪哪些工具比较好用，故而增加一个简单的点赞喜欢按钮；此功能比较简单，网络上也有很多的源码，但根据自己的需要，简单修改了一下，并记录于此。

1，引用ajax文件

WordPress本身已经自带了ajax功能，但需要引用使用:

wp_localize_script( 'script', 'cq_ajax', array( 'ajax_url' => admin_url( 'admin-ajax.php' )));

具体细节可以到WordPress官网ajax上查看具体的说明。值得注意一点是，在命名上“script”，要与调用的js文件名要一致，比如script.min.js

2, 建立模板文件

在你的网站模板文件中，找到你想要放的位置，并写入以下代码

<?php
$like_count = get_post_meta($post->ID, "likes", true);
$like_count = ($like_count == "") ? 0 : $like_count;
$nonce = wp_create_nonce("liker_counter_");
?> 
<div class="like favorite" data-nonce="<?php echo $nonce; ?>" data-post_id="<?php the_ID(); ?>"> 
<span class="count <?php the_ID(); ?>"><?php echo $like_count; ?></span>
<span class="likeHeart" rel="like">Likes</span>
</div>

同时写好CSS样式文件

.post-list .list-link .favorite {
	display: inline;
	margin: 0 auto;
	padding: 5px;	
	color: #00b8cd;
	cursor: pointer;
	touch-action: manipulation;	
}
.post-list .list-link .favorite:hover {
	color: #fc6423;
}
.post-list .list-link .like:hover .likeHeart:before,
.post-list .list-link .like:hover .likeHeart:after {
	content: "\2661";
	background-position: right;
	position: absolute;
	-webkit-animation: ilike 2s infinite;
	-moz-animation: ilike 2s infinite;
	-ms-animation: ilike 2s infinite;
	animation: ilike 2s infinite;
	z-index: 0
}
.post-list .list-link .like:hover .likeHeart:after {
	content: "\2661";
	background-position: right;
	position: absolute;
	-webkit-animation: ilike 3.14s infinite;
	-moz-animation: ilike 3.14s infinite;
	-ms-animation: ilike 3.14s infinite;
	animation: ilike 3.14s infinite
}
@-webkit-keyframes ilike {
	0% {
		-webkit-transform: translateY(1.8em);
		transform: translateY(1.8em);
		margin-left: 1.5em
	}
	20% {
		margin-left: 2.17em
	}
	40% {
		margin-left: -0.38em
	}
	60% {
		margin-left: .22em
	}
	80% {
		margin-left: -0.12em
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-4em) rotate(180deg) scale(.5);
		transform: translateY(-4em) rotate(180deg) scale(.5)
	}
}
@keyframes ilike {
	0% {
		-webkit-transform: translateY(1.8em);
		transform: translateY(1.8em);
		margin-left: 1.5em
	}
	20% {
		margin-left: 2.17em
	}
	40% {
		margin-left: -0.38em
	}
	60% {
		margin-left: .22em
	}
	80% {
		margin-left: -0.12em
	}
	100% {
		opacity: 0;
		-webkit-transform: translateY(-4em) rotate(180deg) scale(.5);
		transform: translateY(-4em) rotate(180deg) scale(.5)
	}
}
.post-list .list-link .liked {
	display: inline-block;
	-webkit-animation-name: heartBlast;
	-moz-animation-name: heartBlast;
	-ms-animation-name: heartBlast;
	animation-name: heartBlast;
	-webkit-animation-duration: .8s;
	-moz-animation-duration: .8s;
	-ms-animation-duration: .8s;
	animation-duration: .8s;
	-webkit-animation-iteration-count: 1;
	-moz-animation-iteration-count: 1;
	-ms-animation-iteration-count: 1;
	animation-iteration-count: 1;
	-webkit-animation-timing-function: steps(28);
	-moz-animation-timing-function: steps(28);
	-ms-animation-timing-function: steps(28);
	animation-timing-function: steps(28);
	background-position: right
}
@-webkit-keyframes heartBlast {
	0% {
		background-position: left
	}
	100% {
		background-position: right
	}
}
@keyframes heartBlast {
	0% {
		background-position: left
	}
	100% {
		background-position: right
	}
}

3，写入JS代码

通常使用javascript来读取PHP文件中的参数再传递到ajax后台进行处理，是最快的方法

jQuery(document).ready(function($) {
	$(".favorite").on('click', function(e) {
		e.preventDefault();
		if ($(this).children(".likeHeart").hasClass("liked")) {
			$(this).children(".count").html("∞");
            return false;
		} else {
			$(this).children(".likeHeart").addClass("liked");
			var d = $(this).attr("data-post_id");
				n = $(this).attr("data-nonce");	
				c = $(this).children(".count");		
				b = {
					action: "cq_user_like",
					post_id: d,
					nonce: n,
				};
			$(c).html(parseInt($(c).html()) + 1);
			jQuery.ajax({
				type : "post",
				dataType : "json",
				url : cq_ajax.ajax_url,
				data : b,
				success: function(response) {
					if(response.type == "success") {
					   jQuery(d).html(response.like_count);			   
					}
					else {
					   alert("Like Failed");
					}
				}
			});	
			return false;
		}		
	});
}

值得强调的是此JS文件名必须要与wp_localize_script定位的命名一致，不然可能会出现undifined的错误。

4，写入ajax处理代码

以下代码是用来处理js传递过来的参数，处理完成后，js会自动读取结果，并由js异地局部更新网页文件。

function cq_user_like() {	
	global $wpdb, $post;
	$id = $_POST["post_id"];
	
	$like_count = intval(get_post_meta($id, "likes", true));
	$like_count = ($like_count == "") ? 0 : $like_count;
	$new_like_count = $like_count + 1;	
	$like = update_post_meta($id, "likes", $new_like_count);
	
	if($like === false) {
		$result['type'] = "error";
		$result['like_count'] = $like_count;
	}
	else {
		$result['type'] = "success";
		$result['like_count'] = $new_like_count;		
	}	
	// Check if action was fired via Ajax call. If yes, JS code will be triggered, else the user is redirected to the post page
	if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
		$result = json_encode($result);
		echo $result;
	}
	else {
		header("Location: ".$_SERVER["HTTP_REFERER"]);
	}
	die();
}
add_action("wp_ajax_cq_user_like", "cq_user_like");
add_action("wp_ajax_nopriv_cq_user_like", "cq_user_like");

记录完成！