WordPress 使用 Fetch Api实现加载更多文章按钮

Lerm主题实现了用 Fetch APi 点赞功能后，又使用 Fetch api 实现了 载入更多文章功能，这个功能完全可以使用JQuery Ajax 实现。

实现功能

• 在文章列表页点击加载按钮后载入更多文章；
• 在任何分类页面点击加载按钮后载入当前分类中的文章；

实现步骤

第一步 加载更多按钮

在文章列表页中，添加按钮代码，必须要注意，文章列表和按钮不能在同一个父标签下；如：

<div class="post-wrap">
	<article>……</article>
	<article>……</article>
	……
</div>
<button class='btn btn-custom btn-block more-posts' data-page="1">加载更多</button>

代码 $wp_query->max_num_pages 判断当前页面的最大页数，若页数大于1，则添加按钮，否则不添加；

/**
 * 如果当前页面最大页数大于1，则显示“加载更多”按钮
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
<?php global $wp_query;
if (  $wp_query->max_num_pages > 1): ?>
	<button class='btn btn-custom btn-block more-posts' data-page="1">
        <?php esc_html_e( 'Load More', 'lerm' ); ?>
    </button>
<?php endif;?>

第二步 使用 wp_localize_script() 载入js文件，并向js文件传递参数

在functions.php 中添加代码，使用 wp_localize_script() 可以将 PHP 参数 传递到JS文件，比如翻译，admin-ajax.php 的路径等；

/**
 * 加载 admin-ajax.php，传递参数
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
function lerm_enqueue_scripts() {
       // 加载我们我们的js文件，在此文件中处理载入更多按钮的fetch请求
	wp_enqueue_script( 'lerm_js', get_stylesheet_directory_uri() . '/assets/js/lerm.js', array(), '2.0', true );//在页脚加载js文件（推荐）；
       // 使用 wp_localize_script() 创建参数
	wp_localize_script(
		'lerm_js',
		'adminajax',//在js中应用 Ajax 路径标识
		array(
		    'ajaxurl'  => admin_url( 'admin-ajax.php' ),
                    'nonce'    => wp_create_nonce( 'ajax_nonce' ),
		    'noposts'  => __( 'No older posts found', 'lerm' ),
		    'loadmore' => __( 'Load more', 'lerm' ),
		    'loading'  => __( 'Loading...', 'lerm' ),
		    'posts'    => json_encode( $wp_query->query_vars ),//当前页面的所有信息
                    'current'  => get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1,
		)
	);
}
add_action( 'wp_enqueue_scripts', 'lerm_enqueue_scripts' );

第三步 在lerm.js 中 新建 Fetch Api 请求

使用 fetch api 处理 Ajax，向后台发送数据；然后将后台处理后发送过来的数据进行判断，若数据正确，则在前端输出数据，若不数据，则按钮变为不可点击状态；

/**
 * 新建 Fetch 请求，发送数据，输出数据
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
let loadMorePosts = document.querySelector(".more-posts");
if (loadMorePosts) {
	loadMorePosts.addEventListener("click", e => {
		e.preventDefault();
		loadMorePosts.innerHTML = adminajax.loading;
                // 使用 FormData 创建参数对象
		let params = new FormData();
		params.append("query", adminajax.posts);
		params.append("page", adminajax.current);
		params.append("security", adminajax.nonce);
		params.append("action", "lerm_load_more");
                // 新建 fetch 请求
		fetch(adminajax.url, {
			method: "POST",
			body: params
		})
			.then(response => response.text())
			.then(data => {
                                // 处理返回的数据
				if (data.length) {
					adminajax.current++
					let newData = parseToDOM(data);
					newData.forEach(e => {
document.querySelector(".ajax-posts").appendChild(e);
						if (e.childNodes.length) {
	e.classList.add("ajax-loading");
						}
					});
					return document.querySelectorAll(".ajax-loading");
				}
				loadMorePosts.innerHTML = adminajax.noposts
				throw data;
			})
			.then(e => {
				Array.prototype.slice.call(e).forEach(f => {
					fadeIn(f);
					f.classList.remove("ajax-loading");
				});
				loadMorePosts.innerHTML = adminajax.loadmore;
			})
			.catch(err => {
				// 返回数据错误或无数据返回时处理
				loadMorePosts.setAttribute('disabled', 'true')
				loadMorePosts.setAttribute('aria-disabled', "true")
			});
	});
}

第四步 使用wp_ajax_ 和wp_ajax_nopriv_处理Ajax

在functions.php中添加 Ajax 处理函数，此函数接受从js传递的参数，经过此函数处理后将数据返回js文件。

/**
 * 处理传递的参数，返回数据
 *
 * @author 智慧宫
 * @link   https://lerm.net
 */
add_action( 'wp_ajax_lerm_load_more', 'lerm_load_more' );
add_action( 'wp_ajax_nopriv_lerm_load_more', 'lerm_load_more' );

function lerm_load_more() {

	// 检查传递的 nonce 值
	check_ajax_referer( 'ajax_nonce', 'security' );
        //当前页面所有信息转换成 $args 数组
	$args = json_decode( stripslashes( $_POST['query'] ), true );
        //修改 $args 数组的 paged
	$args['paged'] = $_POST['page'] + 1;
        //修改 $args 数组的 post_status
	$args['post_status'] = 'publish';
	query_posts( $args );//可以使用 WP_Query
        // 处理主循环
	if ( have_posts() ) :
		while (have_posts() ) :
			the_post();
                        // 文章列表页的 article
			get_template_part( '/template/content/content',  get_post_format() );
		endwhile;
	endif;
	wp_reset_postdata();
	wp_die();
}