Главная
Wordpress
Бесконечная прокрутка постов WordPress без плагина
  • 21 Ноя 2015г
  • 1224
  • 15
  • Рубрика: Wordpress

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

Бесконечная прокрутка постов 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, а именно его содержимое на свой код и у Вас будет своя анимация.

Шаг 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

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

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

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

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




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(10 голосов, в среднем: 4.2 из 5)

Опубликовано 15 комментариев

  • Losst
    Комментариев: 1

    У вас в коде вот здесь ошибка. На страницах поиска WordPress возвращает в переменной $wp_query->query_vars MySQL запрос включающий кавычки. А это ломает JavaScript код поэтому нужно использовать экранирующую функцию addslashes:

  • Дмитрий
    Комментариев: 1

    Не работает!

    • Виталий
      Комментариев: 267

      Попробуйте сделать правильно и все заработает 🙂 Иногда неправильно выполненное действие, это еще не признак того, что что-то не работает 🙂

  • Виктор
    Комментариев: 2

    Добрый день, Виталий. я вообще не силен в PHP но мне нужно сделать то что Вы описали выше. Сделал полностью все по инструкции. но при нажатии на кнопку загрузить еще выдает ошибку 500 в консоли.
    Скажите пожалуйста в чем может быть проблема?
    И подходит ли данный метод ко всем шаблонам WordPress?

  • Виктор
    Комментариев: 2

    Спасибо огромное за статью! Очень полезно правда если Ты не очень хорошо знаком с PHP то прийдется разбираться)) у меня получилось!))

  • Михаил
    Комментариев: 7

    Доброго времени суток! Все работает, но столкнулся с такой проблемой, материал подгружается, а дополнительные поля нет. Без них не имеет смысла подгружать посты потому как, и заставка поста и дополнительная важная информации по посту выводится именно через доп поля. Можно ли решить эту проблему и если да, то как ?

    • Виталий
      Комментариев: 267

      В моем коде, для примера просто выводятся три элемента. Это картинка, название и краткое содержание.
      <?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()?>
      Если Вам надо выводить произвольные поля, то Вы должны добавить их вызов. О том как вывести информацию из произвольных полей, можно прочитать в этой статье - http://gnatkovsky.com.ua/proizvolnye-polya-custom-fields-v-wordpress.html

      • Михаил
        Комментариев: 7

        Я отредактировал ваш код на свой, а конкретно участок с оболочкой подгружаемых постов. Оболочка подгружается, стили и все подобное работает верно, но доп. поля подгружаются пустыми или вовсе не подгружаются.

      • Михаил
        Комментариев: 7

        На скриншотах посмотрите пожалуйста, вот что получается:
        ссылки на вк
        https://pp.vk.me/c626520/v626520606/3753a/N1ugHSL9TSI.jpg
        https://pp.vk.me/c626520/v626520606/37543/lwWJeVtQZtQ.jpg

      • Михаил
        Комментариев: 7

        Вот сам код, как я отредактировал:

        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() ): ?>

      • Михаил
        Комментариев: 7

        Также на скринах посмотрите пожалуйста:

        https://pp.vk.me/c626520/v626520606/3754c/EEEL_OcfqKo.jpg
        https://pp.vk.me/c626520/v626520606/37555/U74bvbm9zPg.jpg

        • Виталий
          Комментариев: 267

          Данный код мы добавляем в functions.php, поэтому обычный вызов произвольных полей не работает.
          Сейчас у вас так
          echo get_post_meta($post->ID, 'район', true);
          Нужно все $post->ID заменить на get_the_ID() получится так
          echo get_post_meta(get_the_ID(), 'район', true);
          Проверил у себя произвольные поля начали работать 🙂

  • Артём
    Комментариев: 13

    Добрый вечер Виталий!
    Подскажите пожалуйста можно ли реализовать выше описанное только применительно не к постам а к фото.
    Допустим меня на странице 100 фото , выводятся с помощью ACF, репитером.на сколько сложно это все обьеденить и применить ?)

    • Виталий
      Комментариев: 267

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

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

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий