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

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

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

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

Тэги: ajax