Wordpressのページネーションを、プラグインを使わずにAjaxで実装する

function.php

<?php

function my_wp_enqueue_scripts() {
	$handle = 'get_post';

	# https://developer.wordpress.org/reference/functions/is_home/
	if ( is_home() ) {
		wp_register_script( $handle, get_theme_file_uri( '/assets/js/get_post.js' ), array( 'jquery' ), false, true);
	}
	
	$action_name = 'ajax-pagination';

	# https://developer.wordpress.org/reference/functions/wp_localize_script/
	wp_localize_script(
		$handle,
		'A_P', array(
			'api'    => admin_url( 'admin-ajax.php' ),
			'action' => $action_name,
			'nonce'  => wp_create_nonce( $action_name ),
		)
	);

	wp_localize_script(
		$handle,
		'QUERY',
		array(
			'cat' => get_query_var( 'cat' ),
			'category_name' => get_query_var( 'category_name' ),
			'paged' => get_query_var( 'paged' ),
			's' => get_query_var( 's' ),
			'author' => get_query_var( 'author' ),
			'year' => get_query_var( 'year' ),
			'monthnum' => get_query_var( 'monthnum' ),
			'day' => get_query_var( 'day' )
		)
	);

	// https://developer.wordpress.org/reference/functions/wp_enqueue_script/
	wp_enqueue_script( $handle);
}

add_action( 'wp_enqueue_scripts', 'my_wp_enqueue_scripts' );


function my_ajax_event() {
	$action_name = 'ajax-pagination';

	# https://developer.wordpress.org/reference/functions/check_ajax_referer/
	if( check_ajax_referer( $action_name, 'nonce', false) ) {
		$data = array(
			'query' => array(),
			'post' => array()
		);


		$paged = (int)$_POST['paged'];
		$category_name = esc_attr($_POST['category_name']);
		$year = (int)$_POST['year'];
		$monthnum = (int)$_POST['monthnum'];
		$day = (int)$_POST['day'];
		$s = esc_attr($_POST['s']);
		$author = (int)$_POST['author'];


		$the_query = new WP_Query(
			array(
				'posts_per_page' => get_option( 'posts_per_page' ),
				'paged' => $paged,
				'orderby' => 'post_date',
				'order' => 'DESC',
				'post_type' => 'post',
				'post_status' => 'publish',
				'category_name' => $category_name,
				'year' => $year,
				'monthnum' => $monthnum,
				'day' => $day,
				's' => $s,
				'author' => $author
			)
		);


		// Query
		$data['query'] = array(
			'category_name' => $category_name,
			'paged' =>  $paged,
			'year' => $year,
			'monthnum' => $monthnum,
			'day' => $day,
			's' => $s,
			'author' => $author
		);


		if ( $the_query->have_posts() ) {
			while ( $the_query->have_posts() ) {
				$the_query->the_post();

				// Category
				$categories = get_the_category();
				$category_list = array();
				if ( $categories ) {
					foreach( $categories as $category ) {
						$category_list[] = array(
							'name' => $category->name,
							'slug' => $category->slug,
							'link' => esc_url(get_category_link( $category->term_id ))
						);
					}
				}

				// Thumbnail
				if ( has_post_thumbnail() ) :
					$thumbnail = esc_url( wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'full' )[0] );
				else :
					$thumbnail = '';
				endif;


				$data['post'][] = array(
					'author' => array(
						'name' => get_the_author_meta( 'nickname' ),
						'link' => get_author_posts_url( get_the_author_meta( 'ID' ) ),
					),
					'category' => $category_list,
					'date' => array(
						'year' => get_the_date( 'Y' ),
						'month' => get_the_date( 'n' ),
						'day' => get_the_date( 'j' ),
					),
					'permalink' => esc_url( get_the_permalink() ),
					'thumbnail' => $thumbnail,
					'title' => get_the_title(),
				);
			}
		}


		// Output
		$data = json_encode( $data );
		header( 'Content-Type: application/json; charset=UTF-8' );
		echo $data;

	} else {
		status_header( '403' );
	}

	die();
}

add_action( 'wp_ajax_ajax-pagination', 'my_ajax_event' );
add_action( 'wp_ajax_nopriv_ajax-pagination', 'my_ajax_event' );

get_post.js

'use strict';

(function () {

    var next_page = 1;

    getPost();

    $('#js-get-next-post').on('click', function () {
        if ($(this).hasClass('loading')) {
            return false;
        }

        getPost();

        $(this).addClass('loading');
    });


    function getPost() {
        $.ajax({
            url: A_P.api,
            type: 'post',
            data: {
                action: A_P.action,
                nonce: A_P.nonce,
                paged: next_page,
                cat: QUERY.cat,
                category_name: QUERY.category_name,
                year: QUERY.year,
                monthnum: QUERY.monthnum,
                day: QUERY.day,
                s: QUERY.s,
                author: QUERY.author
            }

        }).done(function (data) {
            next_page = data['query']['paged'] + 1;

            if (0 < data['post'].length) {
                var html = '';

                for (var i in data['post']) {

                    var category_html = '';
                    var category_length = data['post'][i].category.length;
                    for (var j = 0; j < category_length; j++) {
                        category_html += '<a href="' + data['post'][i].category[j].link + '">' + data['post'][i].category[j].name + '</a>' + (j + 1 < category_length ? '、' : '');
                    }

                    var thumbnail = data['post'][i].thumbnail !== '' ? '<div class="post__list__item__thumb"><img src="' + data['post'][i].thumbnail + '" alt="' + data['post'][i].title + '"></div>' : '';

                    html +=
                        '<div class="post__list__item">' +
                            thumbnail +
                            '<div class="post__list__item__date">' + data['post'][i].date.year + '/' + data['post'][i].date.month + '/' + data['post'][i].date.day + '</div>' +
                            '<a class="post__list__item__title" href="' + data['post'][i].permalink + '">' + data['post'][i].title + '<a>' +
                            '<div class="post__list__item__category">' + category_html + '</div>' +
                            '<a class="post__list__item__author" href="' + data['post'][i].author.link + '">' + data['post'][i].author.name + '</a>' +
                        '</div>'
                    ;
                }

                $('#js-post-list').append(html);
                $('#js-get-next-post').removeClass('loading');
            } else {
                $('#js-get-next-post').text('Complete').delay(500).fadeOut(500, function () {
                    $('#js-get-next-post').hide();
                });
            }
        }).fail(function (jqXHR, textStatus, errorThrown) {
            //
        });
    }
})();

home.php

<?php
get_header();
?>

<style>
	.post {
		margin: auto;
		max-width: 1210px;
	}

	.post__list {
		align-items: stretch;
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
	}

	.post__list__item {
		display: block;
		padding: 15px;
		width: 25%;
	}

	.post__list__item__thumb {
		margin: 0 0 5px;
	}

	.post__list__item__title {
		font-size: 2.0rem;
		font-weight: 700;
	}

	.post__list__item__date {
		font-size: 1.2rem;
	}

	.post__list__item__category {
		font-size: 1.4rem;
		margin: 0 0 5px;
	}

	.post__list__item__author {
		font-size: 1.4rem;
		margin: 0 0 5px;
	}

	.post__action {
		text-align: center;
	}

	.post__action__button {
		border: 1px solid #000;
		border-radius: 30px;
		display: inline-block;
		padding: 3px 30px;
	}

	.post__action__button.loading {
		pointer-events: none;
	}
}
</style>

<div class="post">

	<?php if ( have_posts() ) { ?>
		<div class="post__list" id="js-post-list">

		<?php
		while ( have_posts() ) {
			the_post();
		} ?>

		</div>
	<?php } ?>

	<div class="post__action">
		<a class="post__action__button" id="js-get-next-post" href="javascript:void(0);">Next</a>
	</div>
</div>

<?php 
get_footer();