Что я обычно делаю, чтобы загружать больше сообщений с помощью ajax в Wordpress, это отображать список сообщений с помощью кнопки следующая страница , которую я создаю какэто:
<?php global $wp_query;?>
<?php $next_link = get_next_posts_link( 'Load more' , $wp_query->max_num_pages); ?>
<?php if($next_link) : ?>
<a href="<?php echo $next_link; ?>" id="#loadMore">
<?php endif; ?>
Итак, моя html страница после рендеринга php выглядит следующим образом:
<html>
<head>
<!-- Head stuff -->
</head>
<body>
<h1>List of posts</h1>
<ul id="postsList">
<li>Post 1</li>
....
</li>Post 10</li>
</ul>
<a href="http://example.com/posts-list/page/2" id="#loadMore">
</body>
</html>
Если я нажму на загрузку, я, конечно, перезагрузите страницу , и тогда ссылка «загрузить больше поста» будет http://example.com/posts-list/page/3
Теперь, если я хочу, чтобы посты загружались с помощью ajax, а кнопка загрузки еще обновлялась со следующей страницы, если там естьэто следующая страница, я делаю это в javascript:
$('#loadMore').on('click', function(e){
// Prevent the link reload the page
e.preventDefault();
$.ajax({
url: $(this).attr('href'),
success: function(response){
// Get the next page html and convert it to jquery elemnt
let nextPageHTML = $(response);
// Get the next page posts list
let nextPagePostsList = nextPageHTML.find('#postsList').html();
// Get the next page load more button
let nextPageLoadMore = nextPageHTML.find('#loadMore');
// Append the next page posts
$('#postsList').append(nextPagePostsList);
// If there is a load more link on the next page update the current load more href
if(nextPageLoadMore.length) {
$('#loadMore').attr('href', nextPageLoadMore.attr('href'));
}
}
});
Надеюсь, это было ясно.Я не проверял код, поэтому скажите мне, если что-то не работает.
Резюме:
Вам необходимо иметь:
- Идентификатор насписки ваших сообщений
- Идентификатор вашей дополнительной ссылки
- Кнопка следующей страницы, созданная с помощью функции wordpress
- Чтобы добавить логику ajax для получения сообщений на следующей странице