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 APIJS文件;
/**
 * 加载 admin-ajax.php
 *
 * @author 智慧宫
 * @link   https://www.hanost.com
 */
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://www.hanost.com
 */
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://www.hanost.com
 */
<?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://www.hanost.com
 */
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 实现文章点赞功能介绍完毕,具体的效果见本文下方的点赞按钮;能力有限,难免出错,请各位留言批评指正;

如果您觉得有用就请点赞和分享
版权声明: 本文由 智慧宫 整理发表,转载请注明出处

发表评论

6 comments on “WordPress 主题使用 Fetch API 实现文章点赞”

    1. 智慧宫 回复

      也不是很复杂,一步一步来就可以的,做完了照着浏览器的console.log 微调就可以了;