Блог

Делимся с Вами своими знаниями и новостями

26.04.2016

Загрузка статей по 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; ?>

1

2

3

4

5

6

7

8

9

10

<?php while ( have_posts() ) : the_post(); ?>

<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="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>

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

1

2

3

4

5

6

7

8

9

<?php if ( $wp_query->max_num_pages > 1 ) : ?>

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('jquery'); // скорее всего он уже будет подключен, это на всякий случай
 	wp_enqueue_script( 'true_loadmore', get_stylesheet_directory_uri() . '/loadmore.js', array('jquery') );
}
 
add_action( 'wp_enqueue_scripts', 'true_loadmore_scripts' );

1

2

3

4

5

6

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' );

Скрипт асинхронной загрузки постов 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(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

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, остался последний штрих, добавить скрипт в funcions.php.

<?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.
			 */
			?>
			<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(); ?> </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');
?>

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

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

*/

?>

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

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

</div>

<span class="entry-utility-prep entry-utility-prep-cat-links">Рубрика:</span> <?php the_category(', '); ?></span>

<span class="comments-link"><a href="<?php the_permalink() ?>#comments">Комментарии (<?php echo $q->post->comment_count ?>)</a></span>

</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');

?>

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

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(); // если мы дошли до последней страницы постов, скроем кнопку
				}
			}
		});
	});
});

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

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(); // если мы дошли до последней страницы постов, скроем кнопку

}

});

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

Метки: Ajax, WordPress

Свяжитесь с нами уже сейчас

+7 (906) 272-38-19
Tel./ WhatsApp/ Viber
info@cruelten.ru
Cruelten
Cruelten

Последнее в блоге

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

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

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

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

Комментарии:

Рубрики

Мы на Facebook

Творческая студия #Cruelten

Свяжитесь с нами уже сейчас