/ Сайтостроение / Scripts & jquery / Подгрузка постов «налету» I: Скроллинг

Подгрузка постов «налету» I: Скроллинг

HIT

23.06.2015

1425

Добавляем на сайт функционал подгрузки постов «налету». Данная технология применяется в соц. сетях, а также крупных интернет-магазинах.

В funсtion.php

// Добавляем подгрузку постов

function true_loadmore_scripts() {
	wp_enqueue_script('jquery'); // скорее всего он уже будет подключен, это на всякий случай
 	wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery') );
}
 
add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );



function true_load_posts(){
	$args = unserialize(stripslashes($_POST['query']));
	$args['paged'] = $_POST['page'] + 1; // следующая страница
	$args['post_status'] = 'publish';
	$q = new WP_Query($args);
	if( $q->have_posts() ):
		while($q->have_posts()): $q->the_post();
			/*
			 * Со строчки 13 по 27 идет HTML шаблон поста.
			 */
			?>
			
			
				<div <?php post_class() ?> id="post-<?php the_ID(); ?>"><div class="post-line">
				
				<a href="<?php the_permalink(); ?>">
				  
				 <?php if(has_post_thumbnail()) {
    the_post_thumbnail('produkt');
} else {
    echo '<img src="'.get_bloginfo("template_url").'/images/img-default.jpg" />';
}  ?> 
				  
				  
				  
				  <h2><?php the_title(); ?></h2></a>
				  <div align="center" class="proizvoditel"><?php the_tags( '<small>Продукция:</small> ', ', ', '<br />' ); ?></div>
				
				</div></div>
			
			
			
			<?php
		endwhile; ?>  <!--<hr>-->
	<?php endif;
	wp_reset_postdata();
	die();
}
 
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

Добавить по вышеуказанному в funсtions пути скрипт loadmore.js

jQuery(function($){
	$(window).scroll(function(){
		var bottomOffset = 1500; // отступ от нижней границы сайта, до которого должен доскроллить пользователь, чтобы подгрузились новые посты
		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++;
					}
				}
			});
		}
	});
});

 

В шаблон вывода постов после endwhile

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

Есть альтернативный способ погрузки при нажатии на кнопку.

Одним из недостатков метода является нестыковка с функционалом Сортировка по меткам, но данный недостаток скорее изначально исходит от функционала сортировки.

Скрипт не работает в шаблоне Результат поиска


Попытаться это исправить

Тэги:

Поделится информацией с друзьями

  • Похожие записи
  • Комментарии
  • Вложения
Массовое редактирование свойств товаров

Массовое редактирование свойств товаров

Быстрое изменение товаров Для того чтобы массово отредактировать товары woocommerce нужно установить плагин Woocommerce advanced bulk edit. В репозитории плагинов WordPress его нет, он платный. Если поискать на просторах интернета Читать далее »

/ /
Опросы на сайте без плагина

Опросы на сайте без плагина

Создадим функционал сбора информации (опросов) от посетителей без использования плагинов, дорабатывая нужные аспекты так как нам нужно. Как создать функционал опросов с помощью плагинов описано здесь. Создадим форму опроса для Читать далее »

Открывать запись во всплывающем окне

Открывать запись во всплывающем окне

Задача: открывать запись во всплывающем окне используя загрузку «налету» (ajax). При этом работает сколько угодно раз, т.е. при нажатии на каждую ссылку — загружается соответствующая запись по ID из ссылки. Читать далее »

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

Пока нет комментариев. Будь первым!

Подгрузка постов «налету» I: Скроллинг
Подгрузка отдельных блоков на странице
Рекомендации для васПодгрузка отдельных блоков на страницеOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.