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 we 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 plugins. I haven’t looked for it. Here are the methods for implementing loading and paging without plugins, 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’)); ?>

 

Related Article
WordPress automatically intercepts part of the content of the article as a summary

In the daily release of articles, not every article may have an article summary, so the summary function of WordPress Read more

How to add user defined upload avatar function in WordPress

Friends who use WordPress to build a website should know that WordPress itself does not have the function of uploading Read more

How to get the number of articles and comments of the current logined user in WordPress

When developing WordPress Theme user center, I want to get the number of articles and comments of current logged in Read more

WordPress tips: get statistics of the number of pictures in the article

As far as I know, WordPress has no function to count the number of pictures in the article, so to Read more

3 comments.

Leave a Reply

Your email address will not be published. Required fields are marked *

*
To prove you're a person (not a spam script), type the security word shown in the picture.
Anti-spam image