Instantly share code, notes, and snippets.

Embed
What would you like to do?
Wordpressのページネーションを、プラグインを使わずにAjaxで実装する
<?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' );
'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) {
//
});
}
})();
<?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();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment