Бесконечная прокрутка постов WordPress без плагина

Віталий

9 років ago

Бесконечная прокрутка постов WordPress без плагина

Доброго времени суток. 🙂

Мои дорогие посетители сайта, сегодня мы коснемся интересной темы, которая потребует не мало усилий, но результат стоит того чтобы потрудится над ним. Кому уже понравилось, продолжаем.

Как Вы уже, наверное, догадались, сегодня речь пойдет о беспрерывной подгрузке новых записей при прокрутке на WordPress. То есть, вместо постраничной навигации, записи появятся автоматически при прокрутке. Достигается подгрузка новых записей без перезагрузки, с помощью AJAX. сделаем все это, без использования плагинов.

Сейчас я покажу два способа такой подгрузки. По сути это один и тот же способ, но немножко с разными свойствами. Подгрузка будет совершатся или автоматически при прокрутке или же при нажатии на кнопку, например - Показать еще. Что именно подходит для Вашего сайта, решать тоже Вам.

Автоматическая подгрузка записей при прокрутке

Шаг 1

Для начала нужно найти, где у Вы хотите вывести автоподгрузку. Чаще всего ее нужно установить везде, где есть вывод цикла с постраничной навигацией. Например, у меня это файл content.php. Так же это может быть - index.php, archive.php, loop.php, category.php, search.php и тд. В этих файлах может быть стандартная навигация WordPress, или уже самодельная функция. Примеры есть в статье - Постраничная навигация в WordPress без плагина.

Так вот, если у вас есть что-то на подобии такого, оно располагается в самом конце цикла. Вместо него надо вставить следующий код.

<?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="load_more_gs">
<div class="cssload-container"><div class="cssload-whirlpool"></div></div>
</div>
<?php endif; ?>

Верхнюю часть кода трогать не нужно, а вот нижняя отвечает за анимацию во время загрузки. Если Вам она не надо просто удалите все, что внутри блока - load_more_gs, или замените все что внутри него, не сам load_more_gs, а именно его содержимое на свой код и у Вас будет своя анимация.

UPD.Если после внедрения подгрузки она будет отлично работать на странице категорий, но не на странице поиска, можете попробовать заменить 4 строку в коде выше на новые две:

// Заменить это
var true_posts = '<?php echo serialize($wp_query->query_vars); ?>';
// На это
$str =  '<?php serialize($wp_query->query_vars)?>';
var true_posts = '<?php echo addslashes($str); ?>';

Шаг 2

Теперь добавим стили для нашей анимации. Если Вы ее удалили, этот пункт можно пропустить.

#load_more_gs{
width: 53px;
padding:50px 0;
margin:0 auto;
}

.cssload-container{
	position:relative;
}
	
.cssload-whirlpool,
.cssload-whirlpool::before,
.cssload-whirlpool::after {
	position: absolute;
	top: 50%;
	left: 50%;
	border: 1px solid rgb(255,255,255);
	border-left-color: rgb(0,225,255);
	border-radius: 974px;
		-o-border-radius: 974px;
		-ms-border-radius: 974px;
		-webkit-border-radius: 974px;
		-moz-border-radius: 974px;
}

.cssload-whirlpool {
	margin: -24px 0 0 -24px;
	height: 49px;
	width: 49px;
	animation: cssload-rotate 1150ms linear infinite;
		-o-animation: cssload-rotate 1150ms linear infinite;
		-ms-animation: cssload-rotate 1150ms linear infinite;
		-webkit-animation: cssload-rotate 1150ms linear infinite;
		-moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::before {
	content: "";
	margin: -22px 0 0 -22px;
	height: 43px;
	width: 43px;
	animation: cssload-rotate 1150ms linear infinite;
		-o-animation: cssload-rotate 1150ms linear infinite;
		-ms-animation: cssload-rotate 1150ms linear infinite;
		-webkit-animation: cssload-rotate 1150ms linear infinite;
		-moz-animation: cssload-rotate 1150ms linear infinite;
}

.cssload-whirlpool::after {
	content: "";
	margin: -28px 0 0 -28px;
	height: 55px;
	width: 55px;
	animation: cssload-rotate 2300ms linear infinite;
		-o-animation: cssload-rotate 2300ms linear infinite;
		-ms-animation: cssload-rotate 2300ms linear infinite;
		-webkit-animation: cssload-rotate 2300ms linear infinite;
		-moz-animation: cssload-rotate 2300ms linear infinite;
}



@keyframes cssload-rotate {
	100% {
		transform: rotate(360deg);
	}
}

@-o-keyframes cssload-rotate {
	100% {
		-o-transform: rotate(360deg);
	}
}

@-ms-keyframes cssload-rotate {
	100% {
		-ms-transform: rotate(360deg);
	}
}

@-webkit-keyframes cssload-rotate {
	100% {
		-webkit-transform: rotate(360deg);
	}
}

@-moz-keyframes cssload-rotate {
	100% {
		-moz-transform: rotate(360deg);
	}
}

Шаг 3

Теперь нам нужен скрипт асинхронной загрузки. Тут 2 пути решения. Или вставить скрипт в подвал Вашей темы зажав его в теги:

<script type="text/javascript">
//тут скрипт
</script>

Или создать файл, например - moreload.js, добавить в него скрипт, а потом его подключить в подвале, указав правильный путь, так:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/moreload.js"></script>

Или так, добавив код в functions.php:

function loadmore_scripts_gs() {
 	wp_enqueue_script( 'moreload', get_template_directory_uri() . '/js/moreload.js', array('jquery'), null, true  );
}
add_action( 'wp_enqueue_scripts', 'loadmore_scripts_gs' );

Шаг 4

Теперь сам скрипт. Копируем и вставляем в зависимости от выбранного Вами способа.

jQuery(function($){
	$(window).scroll(function(){
		var bottomOffset = 2000; 
		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 ) { 
						$('#load_more_gs').before(data);
						$('body').removeClass('loading');
						current_page++;
					}
					else {
					$('#load_more_gs').remove();
				}
				}
			});
		}
	});
});

В 3 строке есть значение 2000. Это значение, отступ от нижней границы сайта, доскролив до которого, начнется подгрузка новых записей. Можете уменьшить, но не перестарайтесь, чтобы подгрузка не пропала.

В 19,24 строке указан блок с айди load_more_gs, вдруг вы захотите изменить имя блоку, то это нужно сделать не только в цикле и стилях, но и в скрипте.

Шаг 5

Далее будет добавление обработчика PHP. Добавим мы его в файл функций functions.php. В самый конец, перед ?> нужно вставить следующий код:

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 the_post_thumbnail(); ?>
<h1 class="post_title"><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a></h1>
<?php the_excerpt()?>
<?php
endwhile; endif;
	wp_reset_postdata();
	die();
}
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

Данный код нужно изменить в зависимости от Вашей темы. Вы должны заменить строки - 9, 10, 11, на HTML код, который у Вас внутри цикла в любом из файлов, где мы выполняли ШАГ №1. Если у Вас не HTML, а в PHP написан вывод записей, то нужно заменить 8, 9, 10, 11, 12 строки. То есть это код, который отвечает за вывод миниатюры, названия записи, текст тизера, и тд. Если Вы этого не сделаете, то все будет криво и отличаться от оформления Ваших постов.

После того, как Вы заменили часть кода на свой, можно попробовать проверить работу автоподгрузки. Если у Вас не было нигде ошибки, то Вы увидите первый результат. Теперь переходим ко второму виду подгрузки.

Подгрузка записей при нажатии на кнопку - Показать еще

Шаг 1

Код из первого шага, прошлого метода, который нужно вставить в файл с циклом, будет такой же, кроме нижней части, то есть вместо прелоадера будет кнопка. Так что используйте код из первого шага прошлого метода, только:

//вместо этого
<div id="load_more_gs">
<div class="cssload-container"><div class="cssload-whirlpool"></div></div>
</div>

//вставить это
<div id="loadmore_gs">Показать еще</div>

Показать еще - это текст кнопки, если хотите, можно поменять.

Шаг 2

Теперь добавим новые стили для кнопки. Если вы добавляли стили для первого метода, можете их удалить.

#loadmore_gs{
	background:#63a63e;
	color:#fff;
	padding:5px 0;
	text-align:center;
	-moz-border-radius:4px; 
	-webkit-border-radius:4px;
	border-radius: 4px;
	width:150px;
	margin:0 auto;
	cursor:pointer;
}

Шаг 3

Точно такой же как и в прошлом методе, если уже делали его, пропускайте, если нет, то делайте аналогично первому методу.

Шаг 4

Скрипт асинхронной загрузки будет немного отличаться, так как теперь он будет срабатывать на нажатие кнопки. Выглядеть он будет так:

jQuery(function($){
	$('#loadmore_gs').click(function(){
		$(this).text('Загрузка...');
		var data = {
			'action': 'loadmore',
			'query': true_posts,
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl,
			data:data,
			type:'POST',
			success:function(data){
				if( data ) { 
					$('#loadmore_gs').text('Показать еще').before(data);
					current_page++;
					if (current_page == max_pages) $("#loadmore_gs").remove();
				} else {
					$('#loadmore_gs').remove();
				}
			}
		});
	});
});

Тут можно настраивать текст кнопки или поменять имя айди, если Вы решили его сменить везде. В 3 строке есть слово - Загрузка.... Это выведется, когда Вы нажмете на кнопку и обработчик AJAX начнет свою работу.

В 15 строке текст - Показать еще, этот текст появится после подгрузки. Если Вы изменили текст из первого шага, то измените и здесь.

Шаг 5

Обработчик оставляем тот же без изменений, так что этот шаг тоже можно пропустить, ну или если Вы его не делали, то выполните его из прошлого метода.

По второму методу, тоже все. Как и с первым, если все шаги выполнены правильно, результат не заставит себя ждать.

Я проверил оба метода и оба рабочие, потому как кнопку и прелоадер добавлял я и пробовал все на своем сайте. Возможно у кого-то возникнут проблемы, тут нужно исходить от ситуации и внимательно все смотреть. Каждая тема разная и каждый блог особенный, поэтому перед тем как писать что метод не рабочий, проверьте все еще раз.

На этом все, спасибо за внимание. 🙂

Exit mobile version