Подгрузка постов «налету» II: Кнопка

Данный вариант подгрузки постов «налету» является альтернативой подгрузке постов при скроллинге. Только в данном методе посты будут подгружаться по нажатию на кнопку. Также учтены некоторые особенности шаблона данного сайта высота блоков постов и оформление построения постов.

В файл funсtions.php. В коде ниже жирным выделен шаблон вывода постов при Ajax подгрузке

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

function true_loadmore_scripts() {
 wp_enqueue_script('jquery'); // скорее всего он уже будет подключен, это на всякий случай
 wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/js/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();

 ?>
 
 
<?php get_template_part( 'solus' ); ?>
 
 
 
 <?php endwhile; ?>
 <?php endif;
 wp_reset_postdata();
 die();
}
 
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

Добавляем в шаблон после закрытия if(have_posts()) (после endif;)

<!-- Скрипт подгрузки постов «на лету» -->

<?php if ( $wp_query->max_num_pages > 1 ) : ?>
<script>
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; ?>;
var max_pages = '<?php echo $wp_query->max_num_pages; ?>';
</script>
<div id="true_loadmore">Загрузить ещё</div>
<?php endif; ?>

Стиль кнопки

/* Кнопка подгрузки постов на лету */

#true_loadmore {
    background: #003A73;
    color: #FFF;
    padding: 5px;
    text-align: center;
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px;
    margin: 20px 0;
    cursor: pointer;
    float: left;
    width: 100%;
}

Скрипт подгрузки Ajax (loadmore.js). Жирным выделен блок адаптации новых подгруженных блоков под единую общую высоту + шаблон построения постов.

jQuery(function($){
	$('#true_loadmore').click(function(){
		$(this).html(' Загружаю...');
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl, // обработчик
			data:data, // данные
			type:'POST', // тип запроса
			success:function(data){
				if( data ) { 
					$('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
							
					
// Блок для сайта opttour			
		  
// Шаблон построения блоков
			
	if(localStorage.getItem('construct') == 'lines') {
		$(".hentry-empty").removeClass("hentry-box hentry-photo");
                $(".hentry-empty").addClass("hentry-line");
    }
	
	if(localStorage.getItem('construct') == 'blocks') {
		$(".hentry-empty").removeClass("hentry-line hentry-photo");
		$(".hentry-empty").addClass("hentry-box");
    }
	
	if(localStorage.getItem('construct') == 'photo') {
		$(".hentry-empty").removeClass("hentry-line hentry-box");
		$(".hentry-empty").addClass("hentry-photo");
    }
	
// Перезагрузка высоты блоков

	$(".hentry-empty").css("height", "auto");
        $(".hentry-empty").setEqualHeight();	
		
// конец блока для opttour  					
					
					
					current_page++; // увеличиваем номер страницы на единицу
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
				
			}
			
		});		

			
	});
});