Загрузка статей по Ajax в WordPress — полное руководство

Загрузка статей по Ajax — можно сказать уже полностью стандартный функционал для многих блогов. Сегодня в этой статье мы рассмотрим данный способ, который прекрасно реализован на нашем сайте — Как Вы прекрасно видите, на нашем сайте отлично работает этот способ, и после нажатия на кнопку «Читать далее» подгружаются следующие статьи. Удобно? Безусловно. Итак приступим.

Для примера я рассмотрю вариант, если нам необходимо сделать данную подгрузку на странице блога, это index.php или category.php (все файлы располагаются в папке Вашей темы), обычно эти файлы есть всегда. Ищем вывод из базы наших статей, обычно это что-то в таком вот виде.

<?php while ( have_posts() ) : the_post(); ?>
<div class="adv_block">
 <div class="img_block"><a href="<?php the_permalink(); ?>"><?php if ( has_post_thumbnail()) {the_post_thumbnail(array(300, 300),array("class"=>"alignleft post_thumbnail"));} else { ?><img src="<?php echo get_template_directory_uri() ?>/img/scul.gif"/><?php } ?></a></div>
 <div class="post_block">
 <div class="title"><a title="<?php printf( esc_attr__( 'Permalink to %s', 'striped' ), the_title_attribute( 'echo=0' ) ); ?>" href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a></div>
 <div class="price"><?php the_time('j.m.y'); ?> <?php if ( get_post_meta($post->ID, 'patch', true) ) : ?>| Патч: <?php echo get_post_meta($post->ID, 'patch', true) ?><?php endif; ?></div>
 <div class="text"><a href="<?php the_permalink(); ?>"><?php the_excerpt(); ?></a></div>
 </div>
</div> 
 <?php endwhile; ?>

Как Вы заметили данный код выводит в цикле все записи. Сразу же после этого кода вставляем нашу кнопку «Загрузить еще».

<?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 class="more_block"><div class="btn_more_blocks" id="true_loadmore">Показать больше материалов</div></div>
<?php endif; ?>

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

ajaxurl — Это обработчик AJAX-запросов в WordPress.

true_posts — Сериализованный массив, содержащий все необходимые параметры запроса, является свойством класса WP_Query.

current_page — Номер текущей страницы.

Но думаю тут все понятно, по оформлению кнопки думаю сами разберетесь, как хотите, так ее и оформляйте. Итак, кнопку мы имеем, правда ничего не происходит если ее нажать, не работает ничего — но не переживайте — переходим к следующему этапу.

Подключение скриптов

Чтобы у нас все красиво работало нам необходимо подключить jQuery. Если Вы этого еще не сделали, в чем лично я сомневаюсь, то подключайте. А нижний код добавляем в файл нашей темы functions.php — если у Вас нету такого файла, такое может быть, если Вы сами создавали тему, то создайте этот файл прямо у себя в директории Вашей темы и туда добавьте следующий код.

function true_loadmore_scripts() {
   wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery') );
 }
 add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );

Скрипт асинхронной загрузки постов WordPress

Итак, теперь мы дошли до самого интересного, чтобы наша кнопка отлично работала ей нужно показать, как работать и что загружать. Для этого в папке темы создаем файл скрипта, давайте назовем его 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(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

Сразу спешу наперед. Данный код я позаимствовал их открытых источников в интернете. Но все работает очень круто, поэтому пусть автор не сердится на меня, но код просто потрясный. Все работает как часики.

Загрузка статей по Ajax — финальный штрих

Ну и последнее, скрипт асинхронно достает данные из 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();
      /*
       * Со строчки 13 по 27 идет HTML шаблон поста, максимально приближенный к теме TwentyTen.
       * Для своей темы вы конечно же можете использовать другой код HTML.
       */
      ?>

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

P.S. Если нужно удалять записи и вместо удаленных вставлять новые. В этом случае Вам необходимо изменить код в loadmore.js. А именно удалять блоки, которые уже есть. Для этого воспользуйтесь вот таким кодом, просто замените им свой код в loadmore.js.

jQuery(function($){
	$('#true_loadmore').click(function(){
$('сюда вставляем класс элементов которые надо удалять').hide();		
$(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(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

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