AJAX загрузка постов в WordPress
Рассмотрим, как реализовать кнопку AJAX загрузки постов в WordPress. Т.е. загрузка постов будет осуществляться при нажатии на кнопку "загрузить еще" без перезагрузки страницы.

Примерный код для страницы шаблона вывода постов.
<?php
$mypost_Query = new WP_Query( array(
'post_type' => '{тип_записи}', # post, page, custom_post_type
'post_status' => 'publish', # статус записи
'posts_per_page' => 6 # кол-во постов вывода/загрузки
'category_name' => '{название_рубрики}', # если рубрика
'tax_query' => array( # если элемент (термин) таксономии
array(
'taxonomy' => '{название_таксономии}', # таксономия
'field' => 'slug', # slud/id
'terms' => '{ярлык/id_элемента_таксономии}' # термин (ярлык/id)
)
),
) );
if ( $mypost_Query->have_posts() ) {
while ( $mypost_Query->have_posts() ) { $mypost_Query->the_post();
get_template_part('./inc/loop-{шаблон}');
}
}
else { echo('<p>Извините, нет записей.</p>'); }
wp_reset_postdata();
?>
<?php // AJAX загрузка постов ?>
<?php if ( $mypost_Query->max_num_pages > 1 ) { ?>
<script> var this_page = 1; </script>
<div class="btn-loadmore" title="Загрузить еще"
data-param-posts='<?php echo serialize($mypost_Query->query_vars); ?>'
data-max-pages='<?php echo $mypost_Query->max_num_pages; ?>'
data-tpl='doveryayut'
>
<i class="fas fa-redo"></i> Загрузить ещё
</div>
<?php } ?>
В JavaScript обработчик передаём:
- this_page - номер текущей страницы;
- data-param-posts - параметры поста (post_type, post_status, posts_per_page и другие);
- data-max-pages - сколько всего страниц;
- data-tpl - тип записи (необходим чтобы на сайте использовать множество кнопок подгрузки записей с одним обработчиком, но разными шаблонами вывода).
Файл ajax-load-more.js - далее подключим его в functions.php
jQuery(function($){
// AJAX загрузка страниц/записей WP
$('.btn-loadmore').on('click', function(){
let _this = $(this);
_this.html('<i class="fas fa-redo fa-spin"></i> Загрузка...'); // изменение кнопки
let data = {
'action': 'loadmore',
'query': _this.attr('data-param-posts'),
'page': this_page,
'tpl': _this.attr('data-tpl')
}
$.ajax({
url: '/wp-admin/admin-ajax.php',
data: data,
type: 'POST',
success:function(data){
if (data) {
_this.html('<i class="fas fa-redo"></i> Загрузить ещё');
_this.prev().prev().append(data); // где вставить данные
this_page++; // увелич. номер страницы +1
if (this_page == _this.attr('data-max-pages')) {
_this.remove(); // удаляем кнопку, если последняя стр.
}
} else { // если закончились посты
_this.remove(); // удаляем кнопку
}
}
});
});
});
Здесь необходимо обратить внимание на _this.parent().after(data); // где вставить данные. Здесь указываем место, где вывыдить записи на странице. Используйте перемещение по DOM-дереву (prev(), next(), parent(). children()) и вставляйте в нужном месте (before(), after(), append(), prepend()).
Подключаем файл ajax-load-more.js в functions.php или же код выше можно просто скопировать в главный файл scripts.js / main.js
wp_enqueue_script( '{название_темы}-loadmore', get_template_directory_uri() . '/js/ajax-load-more.js', array('jquery'), '', true );
Напишем функцию для AJAX загрузки постов нужного шаблона в functions.php
// AJAX загрузка постов
function load_posts () {
$args = unserialize( stripslashes( $_POST['query'] ) );
$args['paged'] = $_POST['page'] + 1; // следующая страница
query_posts( $args );
if ( have_posts() ) {
while ( have_posts() ) { the_post();
if ($_POST['tpl'] === 'news') {
get_template_part( '/template-parts/loop-{шаблон}');
}
if ($_POST['tpl'] === 'prices') {
get_template_part( '/template-parts/loop-{шаблон2}');
}
}
die();
}
}
add_action('wp_ajax_loadmore', 'load_posts');
add_action('wp_ajax_nopriv_loadmore', 'load_posts');
Чтобы добавить новый параметр (или изменить его), используйте следующий код. Пример.
$args['posts_per_page'] = 10; // по сколько записей подгружать
Чтобы удалить параметр(ы), используйте код ниже.
$args = remove_query_arg( ['post_parent'] ); // удаление параметра «post_parent»
«Загрузить ещё» со счётчиком оставшихся записей/страниц в WordPress
В шаблоне вывода постов добавим код после тега script.
<?php
//Получить кол-во постов в определенной категории (типе записи)
$count_posts = wp_count_posts('{тип_записи}'); // post, page, custom_post_type
$published_posts_all = $count_posts->publish; // общее кол-во записей
// ИЛИ
// Получить кол-во постов в определённом термине таксономии
$terms = get_terms(array(
'taxonomy' => '{название_таксономии}', // таксономия
'slug' => '{термин_таксономии}' // элемент таксономии
));
foreach ($terms as $terms) {
$count_posts = $terms->count; // получаем сколько всего постов
}
$published_posts_remain = $count_posts - 10; // оставшееся кол-во записей
?>
<div class="btn-loadmore" title="Загрузить еще">
<i class="fas fa-redo"></i> Загрузить ещё
<span class="span1"><?php echo $published_posts_remain; ?></span> из
<span class="span2"><?php echo $published_posts_remain; ?></span>
</div>
<?php } ?>
На этом всё. Если вам понравилась данная статья или же было что-то непонятно, то рекомендую к прочтению: шпаргалка и полезные хуки по работе с WordPress.
Надеюсь, вам понравилась данная информация. Если вам интересна тема web-разработки, то можете следить за выходом новых статей в Telegram.
Статьи из данной категории:
Комментарии
- Комментариев пока нет.