Seo-Бизнес блог Progress-project

Все о создании, продвижении сайтов и заработке в интернете

Обновлённый дизайн блога Progress-project
logotip «Progress-project»
logotip «Progress-project»

Бесконечный скроллинг или ajax подгрузка постов в wordpress

Приветствую Вас уважаемые друзья, сегодня на «Progress-project» мы будем говорить о том, как сделать на своём wordpress ресурсе бесконечный скроллинг или ajax подгрузку постов по примеру многих известных социальных сетей.

Если перейти на главную страницу «Прогресс-проект» или же какую либо страничку рубрик, то в самом низу, после вывода анонсов, вместе с постраничной навигацией у меня можно увидеть ещё и специальную кнопку с надписью: «Загрузить ещё», клик по которой позволяет подгружать очередные статьи, без обновления или перезагрузки страницы.

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

Бесконечный скроллинг — wordpress ajax подгрузка постов с помощью кнопки

Итак, чтобы кнопка ajax подгрузки постов появилась на нашем блоге, открываем файл темы отвечающий за вывод главной страницы, у меня например это: «index.php».

Далее здесь находим вставленный в прошлый раз код-функцию вывода постраничной навигации:

<?php if (function_exists('kama_pagenavi')) kama_pagenavi(); ?>

И сразу перед ней вставляем следующее:

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

После этого открываем файл стилей: style.css и в самый низ вставляем стили кнопки:

#true_loadmore {
    background: #101339; /* цвет фона */
    color: #FFF; /* цвет текста */
    padding: 5px; /* отступы от границ */
    text-align: center; /* выравнивание текста по центру */
    -moz-border-radius: 4px;
    -webkit-border-radius: 4px;
    border-radius: 4px; /* скругление углов */
    margin: 20px 0; /* отступы от кнопки */
    cursor: pointer; /* курсор при наведении в виде руки */
}

Далее нам необходимо произвести подключение «jQuery» скриптов в файле: «functions.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' );

Теперь давайте займёмся созданием самого обработчика ajax подгрузки постов, создаём на рабочем столе файл с названием «loadmore» и расширением «js», далее вставляем в него код:

jQuery(function($){
	$('#true_loadmore').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 ) { 
					$('#true_loadmore').text('Загрузить ещё').before(data); // вставляем новые посты
					current_page++; // увеличиваем номер страницы на единицу
					if (current_page == max_pages) $("#true_loadmore").remove(); // если последняя страница, удаляем кнопку
				} else {
					$('#true_loadmore').remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

Загружаем наш файл обработчика: «loadmore.js» на хостинг в папку с темой, снова переходим в «functions.php» и ниже уже вставленного сегодня кода подключений «jQuery» скриптов, вставляем следующее:

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 шаблон поста, максимально приближенный к теме TwentyTen.
			 * Для своей темы вы конечно же можете использовать другой код HTML.
			 */
			?>
			<div id="post-<?php echo $q->post->ID ?>" class="post-<?php echo $q->post->ID ?> hentry">
				<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php echo $q->post->post_title ?></a></h2>
				<div class="entry-meta">
					<span class="meta-prep meta-prep-author">Опубликовано</span> <span class="entry-date"><?php the_time('j M Y') ?></span></a>
					<span class="meta-sep">автором</span>
					<span class="author vcard"><?php the_author_link(); ?> <?php the_post_thumbnail('thumbnail');?> </span>
				</div>
				<div class="entry-content"><p style="text-align: center;"><?php the_content() ?></p></div>
				<div class="entry-utility">
					<span class="cat-links">
					<span class="entry-utility-prep entry-utility-prep-cat-links">Рубрика:</span> <?php the_category(', '); ?></span>
					<span class="meta-sep">|</span>
					<span class="comments-link"><a href="<?php the_permalink() ?>#comments">Комментарии (<?php echo $q->post->comment_count ?>)</a></span>
				</div>
			</div>
			<?php
		endwhile;
	endif;
	wp_reset_postdata();
	die();
}
 
add_action('wp_ajax_loadmore', 'true_load_posts');
add_action('wp_ajax_nopriv_loadmore', 'true_load_posts');

На этом всё, wordpress ajax подгрузка постов при клике по кнопке готова, единственное, что думаю Вам ещё необходимо будет сделать это более точно настроить сам подгружаемый контент. Для этого лучше всего открыть всё тот же «index.php», скопировать код выводящий анонсы и заменить им участок кода вставленный нами на последнем этапе в «functions.php»:

<h2 class="entry-title"><a href="<?php the_permalink() ?>" rel="bookmark"><?php echo $q->post->post_title ?></a></h2>
<div class="entry-meta">
	<span class="meta-prep meta-prep-author">Опубликовано</span> <span class="entry-date"><?php the_time('j M Y') ?></span></a>
	<span class="meta-sep">автором</span>
	<span class="author vcard"><?php the_author_link(); ?> <?php the_post_thumbnail('thumbnail');?> </span>
</div>
<div class="entry-content"><p style="text-align: center;"><?php the_content() ?></p></div>
<div class="entry-utility">
	<span class="cat-links">
	<span class="entry-utility-prep entry-utility-prep-cat-links">Рубрика:</span> <?php the_category(', '); ?></span>
	<span class="meta-sep">|</span>
	<span class="comments-link"><a href="<?php the_permalink() ?>#comments">Комментарии (<?php echo $q->post->comment_count ?>)</a></span>
</div>

Бесконечный скроллинг — автоматическая загрузка анонсов при прокрутке странички

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

Для установки этого варианта на ваш блог, необходимо произвести всё те же действия, но уже с некими поправками.

А именно; css стили кнопки можно убрать за ненадобностью, также незначительно изменим код в «index.php» на следующий:

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

И содержимое файла обработчика у нас уже будет вот такого вида:

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 ) { 
						$('#true_loadmore').before(data);
						$('body').removeClass('loading');
						current_page++;
					}
				}
			});
		}
	});
});

Остальное, а именно содержимое кода вставленного в «functions.php», оставляем прежним.

WordPress ajax подгрузка постов с использованием нескольких кнопок на одной страничке

В данном случае производим всё те же действия, что и при wordpress ajax подгрузке постов с помощью кнопки, рассмотренном нами в первом случае. Но при этом переменные:

<script>
	var ajaxurl = '<?php echo site_url() ?>/wp-admin/admin-ajax.php';
	var current_page = 1;
</script>

Переносим уже в «header.php», то есть код в «index.php» в данном случае у нас будет выглядеть так:

<?php if (  $wp_query->max_num_pages > 1 ) : ?>
	<div class='true_loadmore' data-true-posts='<?php echo serialize($wp_query->query_vars); ?>' data-max-pages='<?php echo $wp_query->max_num_pages; ?>'>Загрузить ещё</div>
<?php endif; ?>

Его нам необходимо проставить после каждого определённого цикла.
В случае использования дополнительных WP циклов, меняем «$wp_query» на соответствующее название.

Содержимое файла нашего обработчика «loadmore» в данном случае уже будет таким:

jQuery(function($){
	$('.true_loadmore').click(function(){
		var loadmore = $(this);
		loadmore.text('Загружаю...'); // изменяем текст кнопки, вы также можете добавить прелоадер
		var data = {
			'action': 'loadmore',
			'query': loadmore.attr('data-true-posts'),
			'page' : current_page
		};
		$.ajax({
			url:ajaxurl, // обработчик
			data:data, // данные
			type:'POST', // тип запроса
			success:function(data){
				if( data ) { 
					loadmore.text('Загрузить ещё').before(data); // вставляем новые посты
					current_page++; // увеличиваем номер страницы на единицу
					if (current_page == loadmore.attr('data-max-pages') ) loadmore.remove(); // если последняя страница, удаляем кнопку
				} else {
					loadmore.remove(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

Когда необходимо сделать одновременно сразу несколько разных ajax подгрузок, просто копируем весь код и меняем в нём название всех переменных а так же «id» кнопок на своё.

На этом на сегодня у меня всё, подписывайтесь на обновления впереди много важного, желаю всего доброго и до новых встреч!

С уважением, автор блога!
© progress-project
★Обновлено:2016-08-09

Введите свой e-mail:

Вы можете поделиться статьёй в социальных сетях:

Ваш комментарий

Внимание! Перед тем, как вставить в комментарий: html, php либо JavaScript, преобразуйте его в HTML сущность!

» Подписаться на комментарии по RSS
Поиск по блогу

Введите свой e-mail:

ВКонтакте Google+ Facebook RSS-лента сайта abrek-ad-abra.ru

Топ комментаторов

Виктор(6)
seoonly.ru(4)
Иван(3)
Олег(3)
Николай(3)

© 2015-2017

SEO-Бизнес блог «Progress-project».

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

При использовании материалов сайта гиперссылка на обязательна!



seo-блог