看看这个粗略的例子。这需要一点调整，但总的来说，它做的是你想要的——如果用户单击一个按钮，它会加载X个数量的下一篇文章，而这个按钮应该在已经加载的文章下面。
如果您想在用户向下滚动时自动加载更多帖子，只需将click事件替换为其他一些关注滚动的代码即可。网上有很多例子。
密切关注jQuery(\'some-html-element\')-s, 确保重命名这些元素名称或更改自己的名称HTML 要使其适合总帖子数：如果希望用户查看总帖子数或使用CSS opacity 隐藏它。它仍然需要在某个地方，以便有一个存储值的地方This goes to your main .js:
此函数处理所有DOM操作和ajax。你想怎么叫都行。
//ajaxLock is just a flag to prevent double clicks and spamming
var ajaxLock = false;
if( ! ajaxLock ) {
function ajax_next_posts() {
ajaxLock = true;
//How many posts there\'s total
var totalPosts = parseInt( jQuery( \'#total-posts-count\' ).text() );
//How many have been loaded
var postOffset = jQuery( \'.single-post\' ).length;
//How many do you want to load in single patch
var postsPerPage = 24;
//Hide button if all posts are loaded
if( totalPosts < postOffset + ( 1 * postsPerPage ) ) {
jQuery( \'#more-posts-button\' ).fadeOut();
}
//Change that to your right site url unless you\'ve already set global ajaxURL
var ajaxURL = \'http://www.my-site.com/wp-admin/admin-ajax.php\';
//Parameters you want to pass to query
var ajaxData = \'&post_offset=\' + postOffset + \'&action=ajax_next_posts\';
//Ajax call itself
jQuery.ajax({
type: \'get\',
url: ajaxURL,
data: ajaxData,
dataType: \'json\',
//Ajax call is successful
success: function ( response ) {
//Add new posts
jQuery( \'#posts-container\' ).append( response[0] );
//Update the count of total posts
jQuery( \'#total-posts-count\' ).text( response[1] );
ajaxLock = false;
},
//Ajax call is not successful, still remove lock in order to try again
error: function () {
ajaxLock = false;
}
});
}
}
<小时>
This goes to your main .js: 这是一个如何使用按钮调用上述函数的示例，我认为这更好，用户可以选择是否希望看到更多。。
//Load more posts button
jQuery( \'#more-posts-button\' ).click( function( e ) {
e.preventDefault();
ajax_next_posts();
});
<小时>
This goes to functions.php or create a mu-plugin: 这是在您的服务器中“运行”的函数，ajax调用它，它完成任务并返回结果。
//More posts - first for logged in users, other for not logged in
add_action(\'wp_ajax_ajax_next_posts\', \'ajax_next_posts\');
add_action(\'wp_ajax_nopriv_ajax_next_posts\', \'ajax_next_posts\');
function ajax_next_posts() {
//Build query
$args = array(
//All your query arguments
);
//Get offset
if( ! empty( $_GET[\'post_offset\'] ) ) {
$offset = $_GET[\'post_offset\'];
$args[\'offset\'] = $offset;
//Also have to set posts_per_page, otherwise offset is ignored
$args[\'posts_per_page\'] = 24;
}
$count_results = \'0\';
$query_results = new WP_Query( $args );
//Results found
if ( $query_results->have_posts() ) {
$count_results = $query_results->found_posts;
//Start "saving" results\' HTML
$results_html = \'\';
ob_start();
while ( $query_results->have_posts() ) {
$query_results->the_post();
//Your single post HTML here
}
//"Save" results\' HTML as variable
$results_html = ob_get_clean();
}
//Build ajax response
$response = array();
//1. value is HTML of new posts and 2. is total count of posts
array_push ( $response, $results_html, $count_results );
echo json_encode( $response );
//Always use die() in the end of ajax functions
die();
}
