AJAX подгрузка WordPress постов

В этой статье я попытаюсь объяснить как работает AJAX подгрузка WordPress  постов (ajax load more), то есть без перезагрузки страницы , а также приведу работающий пример, который установлен на некоторых сайтах.

Для осуществления задуманного нам придётся создать кнопку “Загрузить ещё” по клику на которую будут подгружаться посты, а также написать код в js файле нашей темы(шаблона) и код в php. Начнём пожалуй с простого – а именно с кнопки “Загрузить ещё”. Сейчас покажу вам код кнопки и опишу некоторые параметры которые там установлены дата атрибутами.

Код кнопки “Загрузить ещё”

<?php
global $wp_query;
if ( $wp_query->max_num_pages > 1 ): ?>
	<p class="text-center">
		<button class="load-more btn btn-red"
		data-action="loadmore"
		data-ajaxurl="<?php echo esc_url( admin_url( 'admin-ajax.php' ) ) ?>"
		data-query='<?php echo esc_attr( serialize( $wp_query->query_vars ) ) ?>'
		data-container=".products__list"
		data-nonce="<?php echo wp_create_nonce() ?>"
		data-paged="<?php echo esc_attr( get_query_var( 'paged' ) ? get_query_var( 'paged' ) : 1 ) ?>"
		data-max="<?php echo esc_attr( $wp_query->max_num_pages ) ?>"
		data-template="template-part/content-product">Загрузить ещё
	</button>
</p>
<?php endif ?>

• параметр “data-container”  – нужно указать класс или id html контейнера куда будут подгружаться посты, данном случае класс  “.portfolioContainer”
• параметр “data-query” – параметры текущего запроса
• параметры “data-ajaxurl, data-query, data-action, data-paged” являются служебными, их изменять не рекомендуется, только если понимаете, на свой страх и риск
• параметр “data-paged” – указывает страницу пагинации на которой мы находимся, его не нужно менять
• параметр “data-template” – путь к шаблону php внутри текущей темы, используется в функции

  get_template_part()

И самое главное это дата атрибут кнопки data-action=”loadmore”, который обязательно нужно указать, чтобы кнопка работала!

Код Javascript

Этот небольшой кусок кода поможет отправить параметры на сервер и оттуда получить код подгружаемых постов.

 // ajax загрузка постов
 $(document).on('click', '[data-action="loadmore"]', function (event) {
 	event.preventDefault();
 	var el = $(this);
 	var container = $(el.data("container"));
 	var paged = Number(el.attr('data-paged'));
 	paged++;
 	var data = {
 		action: el.data("action"),
 		query: el.data('query'),
 		template: el.data('template'),
 		nonce: el.data('nonce'),
 		max: el.data('max'),
 		paged: paged
 	}
 	el.attr('data-paged', paged);
 	$.ajax({
 		type: 'POST',
 		url: el.data("ajaxurl"),
 		data: data,
 		cache: false,
 		beforeSend: function () {
 			container.animate({"opacity": "0.5"}, 400);
 		},
 		success: function (result) {
 			var json = JSON.parse(result);
 			container.animate({"opacity": "1"}, 100)
 			if (json.content) {
 				container.append(json.content);
 			}
 			if (!json.button) el.remove();
 		}
 	});
 });

PHP код

Обычно, самый рекомендуемый способ вставлять php код в файл под названием “functions.php” который находится в корне вашей темы. Вот эти функции и хуки помогают получить посты и вывести нужный нам контент.

<?php
add_action( 'wp_ajax_loadmore', 'load_more_callback' );
add_action( 'wp_ajax_nopriv_loadmore', 'load_more_callback' );
function load_more_callback() {
	if ( ! wp_verify_nonce( $_POST['nonce'] ) ) {
		echo json_encode( array(
			'status'  => 0,
			'content' => 'Ошибка!',
			'button'  => 0
		) );
		wp_die();
	}
	$query_string                = unserialize( stripslashes( $_POST['query'] ) );
	$template                    = $_POST['template'];
	$query_string['paged']       = max( intval( $_POST['paged'] ), 1 );
	$query_string['post_status'] = 'publish';
	query_posts( $query_string );
	ob_start();
	if ( have_posts() ) {
		while ( have_posts() ) {
			the_post();
			get_template_part( $template );
		}
	}

	$content = ob_get_clean();
	echo json_encode( array(
		'status'  => 1,
		'content' => $content,
		'button'  => $_POST['max'] - $query_string['paged']
	) );
	wp_die();
} ?>

В этом коде есть два параметра которые нужно изменить под себя:

1. Внутри вызова класса “WP_Query” параметр ‘post_type’  необходимо заменить на название типа записи, который нужно вывести. У WordPress стандартный тип записи носит название “post’
2. Указать путь к шаблону так называемого лупа внутри цикла “while”  –  get_template_part( ‘loop’, get_post_type() ) или написать код как альтернатива.

Вот и всё. Я постарался просто показать AJAX подгрузку WordPress постов. Могу напоследок пожелать только хорошей работы вашему коду!

Пример работы   Пример работы

Обновления кода:

• 20.07.2018 – сделал возможность указывать настройки в самой кнопке “Загрузить ещё” в виде дата атрибутов.
• 30.08.2018 – модификация с целью улучшения работы