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’)); ?>

 

Related Article
WordPress uses jquery.lazyload.js image lazy loading plugin to improve website opening speed

Too many pictures on the website will greatly affect the opening speed. If there are too many pictures, the user Read more

What all junior WordPress developers should know

Anyone calling themselves a junior WordPress developer should know HTML and CSS, some basic PHP, and how WordPress works. That’s Read more

Get HD cover images of youtube videos in various sizes

How to get the url of Youtube video cover image: Just copy the cover image address below, and then replace Read more

Can’t connect to local MySQL server through socket ‘/tmp/mysql.sock’

Cannot connect to Mysql through /tmp/mysql.sock. The reason is that this socket does not exist. Two versions of mysql are 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