Постраничная навигация с асинхронной подгрузкой

Установка кнопки  Загрузить ещё, нажатие на которую, позволяет подгрузить следующие посты без обновления страницы.

Работает как в стандартном цикле, так и в цикле WP_query{}

Что мы попробуем сделать в этом посту?

  • Загрузку постов при нажатии на кнопку Загрузить ещё.
  • Бесконечную загрузку, т е посты и комментарии будут подгружаться автоматически при прокрутке страницы (да, как во вконтакте).
  • Сделаем так, чтобы подгрузка постов работала для любых архивов таксономий.

Шаг 1. Добавление кнопки «Загрузить ещё» 

Для начала нам надо найти соответствующее место в шаблоне за пределами цикла while, то есть после того, как заканчивается вывод постов (в TwentySeventeen это место практически сразу после endwhile), в нашем случае это произвольное место на странице вывода постов,  и вставляем туда код:

<?php $category_names = 'Название категории'; ?>
<?php $query = new WP_Query('category_name='. $category_names . '&posts_per_page=6&paged=1'); ?>

<?php while ( $query->have_posts() ) : $query->the_post(); ?>
	Цикл вывода постов
<?php endwhile; ?>

<?php if (  $query->max_num_pages > 1 ) : ?>
	<script>
		var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
		var true_posts = '<?php echo serialize($query->query_vars); ?>';
		var category_name = '<?php echo $category_names; ?>';
		var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
		var max_pages = '<?php echo $query->max_num_pages; ?>';
	</script>
	<div id="true_loadmore" class="text-center"><span class='else'>Показать еще</span></div>
<?php endif;?>
ajaxurl
Это обработчик AJAX-запросов в WordPress.
true_posts
Сериализованный массив, содержащий все необходимые параметры запроса, является свойством класса WP_Query.
current_page
Номер текущей страницы.
$category_names
Название нужной категории (за пределами стандартного цикла)

 

Шаг 2. Подключение скриптов jQuery 

Подключаем .js файлы правильно (то есть в файле функций темы functions.php) там где у нас объявлены основные стили:

 

Шаг 3. Скрипт асинхронной загрузки 

Ну, и, собственно, сам  файл loadmore.js в указанной при подключении папке:

jQuery(function($){
	$('#true_loadmore').click(function(){
		var block_text = '<span class="else">' + 'Показать еще' + '</span>';
		$(this).text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl, // обработчик
			data:data, // данные
			type:'POST', // тип запроса
			success:function(data){
				if( data ) { 
					$('#true_loadmore').html(block_text).before(data); // вставляем новые посты
					current_page++; // увеличиваем номер страницы на единицу
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

Шаг 4. Обработчик PHP, вывод постов 

Этот код также отправляется в файл functions.php.

*
* Обработчик PHP, вывод постов
 */
function true_load_posts(){
 
	$args = unserialize( stripslashes( $_POST['query'] ) );

	$args['paged'] = $_POST['page'] + 1; // следующая страница
	$args['post_status'] = 'publish';
 
	// обычно лучше использовать WP_Query, но не здесь
	query_posts( $args );
	// если посты есть
	if( have_posts() ) :
 
		// запускаем цикл
		while( have_posts() ): the_post();
 
			get_template_part( 'template-parts/content', 'col' );
 
		endwhile;
 
	endif;
	die();
}
 
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

Бесконечная загрузка постов при прокрутке страницы. 

Суть в том, что вы просто скроллите страницу вниз, а новые посты подгружаются по мере её прокрутки. Насколько я помню, впервые такая штука появилась у твиттера (могу ошибаться, поправьте, если я не прав), а потом уже все стянули её оттуда.

Скажу честно — заразная вещь. Те, кто сидят на сайте вконтакте, понимают это прекрасно. Так что, если у вас новостной сайт, тогда этот способ загрузки постов просто «must have».

Если вы сделали все предыдущие шаги из поста и дошли до этого момента — тогда отлично, добавим некоторые изменения для шагов 1 и 3.

Во-первых, кнопка Загрузить ещё нам больше не понадобится, поэтому немного изменим HTML-код:

<?php if (  $wp_query->max_num_pages > 1 ) : ?>
	<script id="true_loadmore">
	var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
	var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
	var current_page = <?php echo (get_query_var('paged')) ? get_query_var('paged') : 1; ?>;
	</script>
<?php endif; ?>

Во-вторых, содержимое файла loadmore.js изменится и будет следующим:

jQuery(function($){
	$(window).scroll(function(){
		var bottomOffset = 2000; // отступ от нижней границы сайта, до которого должен доскроллить пользователь, чтобы подгрузились новые посты
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		if( $(document).scrollTop() > ($(document).height() - bottomOffset) && !$('body').hasClass('loading')){
			$.ajax({
				url:ajaxurl,
				data:data,
				type:'POST',
				beforeSend: function( xhr){
					$('body').addClass('loading');
				},
				success:function(data){
					if( data ) { 
						$('#true_loadmore').before(data);
						$('body').removeClass('loading');
						current_page++;
					}
				}
			});
		}
	});
});
Файл functions.php (это шаги 2 и 

Файл functions.php (это шаги 2 и 4) мы оставляем без изменений.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *