Как загрузить сообщения WordPress с помощью AJAX
У меня есть канал на YouTube, где я размещаю видео, связанные с программированием и программным обеспечением. Недавно один из подписчиков спросил меня, как загрузить пост WordPress с помощью AJAX. В ответ на его вопрос я решил написать пост. Итак, в этой статье мы изучаем, как загрузить сообщение WordPress с помощью AJAX, используя кнопку «Загрузить еще» и прокрутку страницы.
Разница между загрузкой еще и прокруткой страницы довольно проста. При использовании кнопки «Загрузить еще» вам нужно нажать на кнопку, чтобы увидеть следующий набор сообщений. А при прокрутке страницы, когда вы прокручиваете до конца области просмотра, автоматически должен загружаться следующий набор сообщений.
Предположим, у вас есть пара сообщений, и вам нужно отобразить 2 сообщения при загрузке страницы, а затем, нажав «Загрузить больше» или «Прокрутка страницы», должны отобразиться следующие 2 сообщения. Этот процесс будет продолжаться до тех пор, пока не будут отображаться все ваши сообщения.
Создайте новую страницу под названием «Блог». Для отображения ваших сообщений на странице блога создайте собственный шаблон page-blog.phpв каталоге активной темы.
Теперь, когда пользователи посещают страницу вашего блога, они должны видеть 2 сообщения. Итак, добавьте приведенный ниже код в свой файл настраиваемого шаблона.
<div class="entry-content">
<?php
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => 1,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<div class="blog-posts">
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
</div>
<div class="loadmore">Load More...</div>
<?php endif; ?>
</div>Здесь я использовал «страничный» ключ и передал ему значение «1». “paged” – это ключ, который используется в WordPress, когда дело доходит до разбивки на страницы. ‘paged’ => 1 означает первую страницу.
Вы могли бы заметить элемент div с классом loadmore. При нажатии на «Загрузить еще» мы вызовем Ajax и получим следующий набор сообщений.
Загрузить сообщения WordPress с помощью Ajax при нажатии кнопки «Загрузить еще»
Чтобы выполнить вызов Ajax, вам необходимо включить файл JS в среду WordPress. Создайте custom.jsфайл внутри jsкаталога, а затем добавьте в него код ниже functions.php.
function blog_scripts() {
// Register the script
wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
// Localize the script with new data
$script_data_array = array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'security' => wp_create_nonce( 'load_more_posts' ),
);
wp_localize_script( 'custom-script', 'blog', $script_data_array );
// Enqueued script with localized data.
wp_enqueue_script( 'custom-script' );
}
add_action( 'wp_enqueue_scripts', 'blog_scripts' );Затем давайте напишем немного jQuery и вызовем Ajax, который, в свою очередь, даст следующие сообщения.
custom.js
var page = 2;
jQuery(function($) {
$('body').on('click', '.loadmore', function() {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
});
});Что мы делаем здесь, я взял переменную javascript ‘page’ с начальным значением 2, поскольку мы собираемся начать с разбивки на страницы второй страницы. Я увеличиваю эту переменную страницы после получения ответа Ajax. Получив ответ, я добавляю его в список существующих сообщений.
Я также использовал параметр действия как load_posts_by_ajax для вызова Ajax, который необходимо сопоставить с действиями WordPress. Откройте свой functions.phpфайл и добавьте в него приведенный ниже код.
add_action('wp_ajax_load_posts_by_ajax', 'load_posts_by_ajax_callback');
add_action('wp_ajax_nopriv_load_posts_by_ajax', 'load_posts_by_ajax_callback');В приведенных выше действиях WordPress мы вызываем функцию обратного вызова, load_posts_by_ajax_callbackкоторую я собираюсь определить на следующем шаге. Вы можете определить эту функцию в своем functions.php.
function load_posts_by_ajax_callback() {
check_ajax_referer('load_more_posts', 'security');
$paged = $_POST['page'];
$args = array(
'post_type' => 'post',
'post_status' => 'publish',
'posts_per_page' => '2',
'paged' => $paged,
);
$blog_posts = new WP_Query( $args );
?>
<?php if ($blog_posts->have_posts() ): ?>
<?php while ($blog_posts->have_posts() ): $blog_posts->the_post(); ?>
<h2><?php the_title(); ?></h2>
<?php the_excerpt(); ?>
<?php endwhile; ?>
<?php
endif;
wp_die();
}Теперь, когда вы нажимаете кнопку «Загрузить еще», он загружает следующие сообщения через Ajax и возвращает их в ответ. Написанный выше код JavaScript обработает все остальное.
Загрузка сообщений WordPress с помощью Ajax при прокрутке страницы
Некоторым пользователям может не понадобиться кнопка «Загрузить больше» для отображения сообщений с помощью Ajax. Вместо этого они предпочитают, чтобы сообщения отображались, когда пользователь достигает конца области просмотра.
Для этого вам нужно написать логику, которая фиксирует событие в конце области просмотра, остальной код такой же, как кнопка «Загрузить еще». Ниже приведен код jQuery для прокрутки страницы.
jQuery(window).scroll(function($) {
if (jQuery(window).scrollTop() + jQuery(window).height() > jQuery(document).height()) {
var data = {
'action': 'load_posts_by_ajax',
'page': page,
'security': blog.security
};
$.post(blog.ajaxurl, data, function(response) {
if($.trim(response) != '') {
$('.blog-posts').append(response);
page++;
} else {
$('.loadmore').hide();
}
});
}
});Это оно! Вы можете пойти дальше и попробовать. Хотелось бы узнать ваши мысли и предложения в комментариях ниже.