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

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

HIT

23.06.2015

2958

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

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

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

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

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

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

[site-socialshare]
  • Похожие записи
  • Комментарии
  • Вложения
Подгрузка отдельных блоков на странице

Подгрузка отдельных блоков на странице

Прочитал в одной из статей — как подгружать методом ajax целые куски кода, в том числе и php. Сам метод действительно оказался прост. В данной статье опишем ситуации где этот Читать далее »

/
Новинка (товар NEW полем)

Новинка (товар NEW полем)

Ранее были рассмотрены варианты добавления лэйбла New полуавтоматическим способом (последние созданные товары, либо по времени от текущего), либо назначением метки NEW. Здесь разберем как сделать данный функционал полем и какие Читать далее »

/
Фильтр Ajax

Фильтр Ajax

Очередная попытка сделать фильтр wordpress, в этот раз применяя технологию ajax. По сути программирование фильтра — это изобретение велосипеда, но есть 2 момента: во-первых в процессе я начинаю лучше понимать Читать далее »

/

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

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

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