Add “click to load more articles” function implementation method for WordPress theme

We should often see that many websites do not use the paging function, but “click to load more articles” to achieve the page turning effect. The theme currently used by Lao Jiang also has this function, but I personally don’t particularly like this function, so I still use the paging effect. However, for some projects, especially mobile websites, the experience of using load paging will be better.

For the effect of loading paging, it should be possible to use plug-ins. I haven’t looked for it. Here are the methods for implementing loading and paging without plug-ins, and record them later when you need to use them.

First, the code part

jQuery(document).ready(function($) {
$(‘#pagination a’).click(function() {
$this = $(this);
$this.addClass(‘loading’).text(“Loading, please wait”);
var href = $this.attr(“href”);
if (href != undefined) {
$.ajax({
url: href,
type: “get”,
error: function(request) {
},
success: function(data) {
$this.removeClass(‘loading’).text(“Click to view more articles”);
var $res = $(data).find(“.blockGroup .post-list”);
$(‘.blockGroup’).append($res.fadeIn(500));
var newhref = $(data).find(“#pagination a”).attr(“href”);
if (newhref != undefined) {
$(“#pagination a”).attr(“href”, newhref);
} else {
$(“#pagination a”).remove();
}
}
});
}
return false;
});
});

This is the part of the JS code where we define the loading effect.

Second, the style part

#pagination{display:inline-block;position:relative;height:30px;margin-bottom:20px;padding:2px 16px;color:rgba(0,0,0,.44);background:rgba(0,0,0,0);font-size:15px;text-align:center;text-decoration:none;cursor:pointer;border:1px solid rgba(0,0,0,.05);vertical-align:bottom;white-space:nowrap;text-rendering:auto;box-sizing:border-box;border-radius:999em}

The style can be modified according to actual needs.

Third, call up the function

<?php next_posts_link(__(‘Click to load more articles’)); ?>