AJAX загрузка постов в WordPress: кнопка и бесконечный скролл

 
 
?>
 ?> max_num_pages; $page = get_query_var('paged') ? get_query_var('paged') : 1; ?> $page) < ?>
Загрузить еще 
 ?>
 

Приведенный код иллюстрирует, как вывести кнопку после цикла вывода постов. Строки с 3 по 10 отвечают за отображение постов, а с 16 по 20 – за создание кнопки с дополнительной проверкой. Мы добавили id=»load-more» к кнопке, который потребуется для обработки на стороне JS.

В атрибуте data-page кнопки определяется номер текущей страницы, что необходимо для корректной работы AJAX-загрузки при пагинации.

Создание и подключение JavaScript файла

Создадим новый js файл, содержащий весь необходимый код для AJAX-загрузки постов.

Я создал файл load-posts.js в папке js вашего шаблона. Для корректного подключения используем функцию wp_enqueue_script().

В файл functions.php добавьте следующий фрагмент кода:

add_action('wp_enqueue_scripts', 'enqueue_scripts_load_posts'); function enqueue_scripts_load_posts() < wp_enqueue_script( 'load_posts', get_stylesheet_directory_uri(). '/js/load-posts.js', ['jquery'], null, [ 'in_footer' =>true ] ); >

Если ваш шаблон регулярно обновляется, для внесения таких изменений стоит использовать дочернюю тему.

JavaScript обработчик

Теперь нужно разработать обработчик для клика по кнопке #load-more. Откройте файл load-posts.js и добавьте следующий код:

(function($) < $(document).ready(function() < $('#load-more').on('click', function() < const ajaxurl = '/wp-admin/admin-ajax.php'; let button = $(this); let page = button.data('page'); $.ajax(< url: ajaxurl, type: 'POST', data: < action: 'load_posts', page: page >, beforeSend: function() < button.text('Загрузка.'); >, success: function(response) < if (response.trim() !== '') < $('.articles__list').append(response); button.attr('data-page', page + 1); button.text('Загрузить еще'); >else < button.remove(); >> >); >); >); >)(jQuery)

При нажатии на кнопку выполняется AJAX-запрос для загрузки постов. Если контент загружен, он добавляется в контейнер.articles__list (не забудьте указать свой) и обновляется текущий номер страницы. Если постов для загрузки нет, кнопка исчезает.

В методе beforeSend мы установили промежуточное состояние, при котором текст кнопки изменяется на «Загрузка.».

Настройка AJAX обработки запросов

Чтобы AJAX-запросы работали корректно, необходима обработка на стороне сервера. В файл functions.php добавьте следующий код для регистрации AJAX-действия:

add_action('wp_ajax_load_posts', 'load_more_posts'); add_action('wp_ajax_nopriv_load_posts', 'load_more_posts'); function load_more_posts() { $paged = $_POST['page']; $args = array( 'post_type' => 'post', 'paged' => $paged, 'posts_per_page' => get_option('posts_per_page'), ); $query = new WP_Query($args); if($query->have_posts()) : while($query->have_posts()) : $query->the_post(); get_template_part('template-parts/article'); endwhile; wp_reset_postdata(); else: wp_send_json_error(); endif; wp_die(); } 

Этот код отвечает за обработку AJAX-запросов и загрузку постов на основе текущей страницы. Обратите внимание, что мы используем wp_send_json_error(); для обработки ситуации, когда посты закончились.

Теперь ваша функция загрузки постов через AJAX полностью готова! Итак, на вашем сайте будет удобная возможность загрузки новых записей без перезагрузки страницы.

PHP обработчик

Остался финальный шаг. Нужно создать PHP-обработчик для AJAX-запросов.

Все AJAX-запросы в WordPress, как правило, обрабатываются через файл /wp-admin/admin-ajax.php. Это позволяет легко обрабатывать запросы с использованием специальных хуков wp_ajax_ и wp_ajax_nopriv_.

Откройте файл functions.php и вставьте следующий код:

add_action('wp_ajax_load_posts', 'ajax_load_posts'); add_action('wp_ajax_nopriv_load_posts', 'ajax_load_posts'); function ajax_load_posts() { $paged = isset($_POST['page']) ? intval($_POST['page']) : 1; $query = new WP_Query([ 'post_type' =>'post', 'paged' => $paged, 'post_status' => 'publish' ]); if ($query->have_posts()) { while ($query->have_posts()) : $query->the_post(); get_template_part('template-parts/article'); endwhile; } else { echo ''; } wp_reset_postdata(); wp_die(); }

Поскольку мы работаем с постами, в параметрах WP_Query достаточно указать post_type, post_status и не забудьте указать номер страницы (paged), остальные параметры будут выбраны автоматически.

Важно отметить, что в строке 14 используется функция get_template_part, которая загружает файл для отображения одного поста. Если в вашем шаблоне такой файл отсутствует, и все находится в index.php или archive.php, необходимо будет интегрировать HTML-код прямо в обработчик и использовать буферизацию.

Ещё один способ представить это:

add_action('wp_ajax_load_posts', 'ajax_load_posts'); add_action('wp_ajax_nopriv_load_posts', 'ajax_load_posts'); function ajax_load_posts() { $paged = isset($_POST['page']) ? intval($_POST['page']) : 1; $query = new WP_Query([ 'post_type' =>'post', 'paged' => $paged, 'post_status' => 'publish' ]); ob_start(); // Запуск буфера вывода if ($query->have_posts()) { while ($query->have_posts()) : $query->the_post(); ?> 
 

max_num_pages;
$page = get_query_var('paged') ? get_query_var('paged') : 1;
?>