WordPress 主题使用 Fetch API 实现文章点赞

WordPress 主题文章点赞功能利用WordPress 的Ajax功能实现的，原生 XMLHTTPRequest() 方法笨拙，jQuery AjAx 依赖jQuery库，增加服务器请求压力，利用Fetch API 可以弥补了以上的缺点。

本文将介绍符合使用Fetch API 代替传统 jQuery AjAx 请求，实现了文章点赞功能

特点：

• 使用Fetch API，请查看MDN 关于 Fetch API 的介绍；
• 不依赖任何JS库，减轻服务器请求压力，提高网站加载速度；

步骤方法：

第一步 加载admin-ajax.php

1. 在主题跟目录function.php文件中添加如下代码，加载admin-ajax.php ;
2. 注册使用Fetch API的JS文件;

/**
 * 加载 admin-ajax.php
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
function lerm_enqueue_scripts() {
// enqueue global javascript
	wp_enqueue_script( 'lerm_js', LERM_URI . 'assets/js/lerm.js', array(), '2.0', true );//在页脚加载js文件（推荐）；
	wp_localize_script(
		'lerm_js',//js文件名称
		'adminajax',//在js中应用 Ajax 路径标识
		array(
		    'ajaxurl'  => admin_url( 'admin-ajax.php' ),
		)
	);
}
add_action( 'wp_enqueue_scripts', 'lerm_enqueue_scripts' );

第二步 php 数据处理函数

在functions.php 文件中添加 点赞函数，用来处理 Fetch API 传递的点赞数据，使用自定义字段保存点赞数量，通过获取浏览器Cookies来禁止重复赞。

/**
 * 添加 php 点赞函数
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
add_action( 'wp_ajax_nopriv_lerm_post_like', 'lerm_post_like' );
add_action( 'wp_ajax_lerm_post_like', 'lerm_post_like' );
function lerm_post_like() {
	$id         = $_POST['postID'];
	$like_count = get_post_meta( $id, 'lerm_post_like', true );
	$expire     = time() + 99999999;
	$domain     = ( 'localhost' !== $_SERVER['HTTP_HOST'] ) ? $_SERVER['HTTP_HOST'] : false; // make cookies work with localhost
	setcookie( 'post_like_' . $id, $id, $expire, '/', $domain, false );
	if ( ! $like_count || ! is_numeric( $like_count ) ) {
		update_post_meta( $id, 'lerm_post_like', 1 );
	} else {
		update_post_meta( $id, 'lerm_post_like', ( $like_count + 1 ) );
	}
	echo get_post_meta( $id, 'lerm_post_like', true );
	wp_die();
}

第三步 文章页添加Html

1. 给<button>元素添加 data-id, 即为文章ID；
2. 获取自定义字段 'lerm_post_like'的值，并输出为点赞数量，若没有则输出0；
3. 判断浏览器是否有COOKIE，若有则增加Class属性增加done;
4. 按钮样式请自行添加，在此不再赘述；

/**
 * 文章页添加 Html
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
<?php $like_class = isset( $_COOKIE[ 'post_like_' . $post->ID ] ) ? 'done' : '';?>
<button  id="like-button" data-id="<?php the_ID(); ?>" class="like-button btn <?php echo $like_class; ?>">
	<span>点赞</span>
	<span class="count">
	       <?php
		if ( get_post_meta( $post->ID, 'lerm_post_like', true ) ) {
			echo get_post_meta( $post->ID, 'lerm_post_like', true );
		} else {
			echo '0';
		}
	       ?>
	</span>
</button>

第四步 添加 JS 函数

1. 对应的JS代码， DOMContentLoaded 事件触发时，仅当DOM加载完成，不包括样式，图片，flash等，用法如下： document.addeventListener('DOMContentLoaded',function(){...},false);
2. fetch('admin-ajax.php',{}).then().catch()使用then()链式处理数据，若出现错误则执行catch();
3. 数据格式为： new FormData() 即为表单数据。使用append方法添加数据，参考MDN FormData() 对象的使用 ;

/**
 * 在注册的js文件中添加ajax 请求方法：
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
document.addEventListener("DOMContentLoaded", function (e) {
	let likeButton = document.getElementById("like-button");
	if (likeButton) {
		let id = likeButton.dataset.id;
                // 监听点赞按钮点击事件；
		likeButton.addEventListener("click", e => {
			e.preventDefault();
			let params = new FormData();
			params.append("action", "lerm_post_like");
			params.append("postID", id);
			if (!likeButton.classList.contains("done")) {
				fetch(adminajax.ajaxurl, {
					method: "POST",
					credentials: "include",
					body: params
				})
					.then(response => response.text())
					.then(data => {
						likeButton.classList.add("done");
						likeButton.disabled = true;
						document.querySelector(".count").innerHTML = parseInt(data);
						// console.log(data);
					})
					.catch(err => console.log(err));
			}
		});
	}
});

至此，利用Fetch API 实现文章点赞功能介绍完毕，具体的效果见本文下方的点赞按钮；能力有限，难免出错，请各位留言批评指正；