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

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

HIT

08.03.2016

1225

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

В файл 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(); // если мы дошли до последней страницы постов, скроем кнопку
				}
				
			}
			
		});		

			
	});
});

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

Тэги:

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

  • Похожие записи
  • Комментарии
  • Вложения
Отложенная загрузка изображений

Отложенная загрузка изображений

Если на странице есть несколько изображений или есть изображения дублирующиеся на всех страницах (header, footer), то чтобы ускорить общую загрузку сайта, можно установить для изображений отложенную загрузку. Изображение будет появляться Читать далее »

Загрузка контента без перезагрузки

Загрузка контента без перезагрузки

Подгрузка контента средствами Ajax Создаем тестовую верстку <p>Какую страницу желаете открыть?</p> <form> <input onclick="showContent('https://opttour.ru/main-rublik/sites/fotofit/')" type="button" value="Страница 1"> <input onclick="showContent('https://opttour.ru/main-rublik/sites/dtex/')" type="button" value="Страница 2"> </form> <div id="contentBody"></div> <div id="loading" style="display: none"> Идет Читать далее »

Имитация Ajax загрузки контента

Имитация Ajax загрузки контента

Создадим эффект перехода внутри сайта имитирующий подгрузку контента ajax’ом, как будто без перезагрузки. Принцип эффекта: при переходе по ссылке плавно скрываем изменяемую часть контента, и при загрузке новой плавно ее Читать далее »

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

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

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