Добавить AJAX “Загрузить больше” в блок с пользовательским запросом.

Вопрос или проблема

   <h2>Последние статьи <?php bp_site_name(); ?></h2>

   <?php
   $destaque = get_term_by('slug', 'destaque', 'post_tag');
   $video = get_term_by('slug', 'video', 'post_tag');

   $nd_query = new WP_Query (array('tag__not_in' => array($destaque->term_id, $video->term_id), 'posts_per_page' => 5, 'paged' =>$paged));
   while ($nd_query->have_posts()) : $nd_query->the_post(); ?>

   <span class="box-excerpt" id="post-<?php the_ID(); ?>">
   <h3><a href="https://wordpress.stackexchange.com/questions/55996/<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
   </span>

   <?php endwhile; ?>

.

Ответ или решение

Конечно, давайте более подробно разберем, как можно добавить функционал "AJAX Load More" для пользовательского блока с запросом в WordPress. Использование технологии AJAX для загрузки постов на странице позволяет улучшить пользовательский опыт, делая интерфейс более динамичным и отзывчивым. В свете задачи, которую вы описали, мы сфокусируемся на добавлении такого функционала для вашей темы BuddyPress.

Теория

AJAX (Asynchronous JavaScript and XML) — это технология, позволяющая асинхронно передавать данные между клиентом и сервером. Благодаря этому, страница может динамически обновлять свое содержимое без необходимости перезагрузки всей страницы. В вашем случае это означает, что пользователи смогут загружать больше постов, нажимая кнопку "Загрузить еще", и эти посты будут отображаться на странице без полной перезагрузки.

Пример: Структура и реализация

Шаг 1: Подготовка серверного кода

Сначала вам потребуется модифицировать файл functions.php вашей темы, чтобы поддержать AJAX-запросы и обработать их на сервере. Добавим функцию для обработки AJAX-запроса:

function my_ajax_load_more() {
    $paged = $_POST['page'] + 1; 
    $destaque = get_term_by('slug', 'destaque', 'post_tag');
    $video = get_term_by('slug', 'video', 'post_tag');

    $args = array(
        'tag__not_in' => array($destaque->term_id, $video->term_id),
        'posts_per_page' => 5,
        'paged' => $paged,
    );

    $nd_query = new WP_Query($args);

    if ($nd_query->have_posts()) :
        while ($nd_query->have_posts()) : $nd_query->the_post();
            echo '<span class="box-excerpt" id="post-' . get_the_ID() . '">';
            echo '<h3><a href="' . get_permalink() . '" title="' . get_the_title() . '" rel="bookmark">' . get_the_title() . '</a></h3>';
            echo '</span>';
        endwhile;
    endif;

    wp_reset_postdata();

    die();
}
add_action('wp_ajax_nopriv_my_load_more', 'my_ajax_load_more');
add_action('wp_ajax_my_load_more', 'my_ajax_load_more');

Обратите внимание, как мы сделали функцию доступной как для авторизованных, так и для неавторизованных пользователей, используя wp_ajax_ и wp_ajax_nopriv_.

Шаг 2: JavaScript для моторизации AJAX-запросов

Добавьте в вашу тему JavaScript, который будет отправлять AJAX-запросы для загрузки следующих постов. Это можно сделать в том же functions.php:

function my_load_more_scripts() {
    global $wp_query; 

    wp_enqueue_script('jquery');

    wp_register_script('my_loadmore', get_stylesheet_directory_uri() . '/js/loadmore.js', array('jquery'));

    wp_localize_script('my_loadmore', 'my_loadmore_params', array(
        'ajaxurl' => site_url() . '/wp-admin/admin-ajax.php'
    ));

    wp_enqueue_script('my_loadmore');
}
add_action('wp_enqueue_scripts', 'my_load_more_scripts');

Создайте файл loadmore.js в папке /js/, где вы описываете логику AJAX:

jQuery(function($){
    var page = 1;
    var loading = false;

    $('#load-more').click(function(){
        if (!loading) {
          loading = true;
          page++;

          $.ajax({
              type: 'POST',
              url: my_loadmore_params.ajaxurl,
              data: {
                  action: 'my_load_more',
                  page: page,
              },
              success: function(data){
                  if(data) {
                      $('#post-container').append(data);
                      loading = false;
                  } else {
                      $('#load-more').hide();
                  }
              }
          });
        }
    });
});

Шаг 3: Измените HTML-разметку

Наконец, в вашем index.php добавьте контейнер для постов и кнопку "Загрузить еще".

<div id="post-container">
    <?php
    // Ваш WP_Query, уже указанный здесь как есть
    while ($nd_query->have_posts()) : $nd_query->the_post(); ?>
        <span class="box-excerpt" id="post-<?php the_ID(); ?>">
            <h3><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" rel="bookmark"><?php the_title(); ?></a></h3>
        </span>
    <?php endwhile; ?>
</div>
<button id="load-more">Загрузить еще</button>

Применение

Теперь, с выполнением этих шагов, механизм AJAX загрузки будет работать для вашей темы. Когда пользователь нажимает кнопку "Загрузить еще", запускается функция jQuery, отправляющая асинхронный запрос на сервер, который возвращает дополнительные посты. Эти посты добавляются в конец текущего списка без перезагрузки всей страницы.

Помните про стилизацию: по необходимости добавьте стили для новых элементов и убедитесь, что подгруженные данные выглядят так же, как и начальные посты. Это завершает реализацию функционала AJAX загрузки дополнительных сообщений для вашего WordPress сайта.