Создание кнопки “Загрузить больше” на странице постов с помощью Ajax

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

    function my_load_more_posts() {
        $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
        $args = array(
            'post_type' => 'post',
            'posts_per_page' => 6,
            'paged' => $paged,
        );
    
        $query = new WP_Query($args);
    
        if ($query->have_posts()) :
            while ($query->have_posts()) : $query->the_post();
                get_template_part('template-parts/content', get_post_format()); 
    
            endwhile;
        endif;
    
        wp_reset_postdata();
        die();
    }
    add_action('wp_ajax_my_load_more', 'my_load_more_posts');
    add_action('wp_ajax_nopriv_my_load_more', 'my_load_more_posts');


function enqueue_load_more_script() {
    wp_enqueue_script(
        'load-more',
        get_template_directory_uri() . '/js/load-more.js',
        array('jquery'),
        null,
        true
    );

    wp_localize_script('load-more', 'load_more_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'current_page' => 1,
        'max_page' => $GLOBALS['wp_query']->max_num_pages,
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_script');


function enqueue_load_more_script() {
    wp_enqueue_script(
        'load-more',
        get_template_directory_uri() . '/js/load-more.js',
        array('jquery'),
        null,
        true
    );

    wp_localize_script('load-more', 'load_more_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'current_page' => 1,
        'max_page' => $GLOBALS['wp_query']->max_num_pages,
    ));
}
add_action('wp_enqueue_scripts', 'enqueue_load_more_script');

jQuery(function($) {
    var canLoadMore = true;
    var currentPage = load_more_params.current_page;
    var maxPage = load_more_params.max_page;

    $('#load-more-button').on('click', function() {
        if (currentPage < maxPage && canLoadMore) { canLoadMore = false; currentPage++; $.ajax({ url: load_more_params.ajax_url, type: 'POST', data: { action: 'my_load_more', page: currentPage }, success: function(response) { if (response) { $('.post-list').append(response);  = true; if (currentPage >= maxPage) {
                            $('#load-more-button').hide(); 
                        }
                    }
                },
                error: function() {
                    console.log('Failed to load more posts.');
                }
            });
        }
    });
});

<?php
echo '<div class="post-list">';
?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <?php get_template_part('template-parts/content', get_post_format()); ?>
    <?php endwhile; endif; ?>
<?php
echo '</div>';
?>


<button id="load-more-button">Load More</button>

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

Для успешной реализации функционала кнопки "Загрузить еще" на странице постов с использованием Ajax в WordPress, необходимо учитывать несколько ключевых моментов, которые могут быть потенциальными источниками возникновения проблем. Давайте разберемся, как правильно настроить загрузку постов с помощью Ajax и устраним возможные ошибки в коде.

Теоретическая часть

Задача заключается в динамической подгрузке постов при нажатии на кнопку без перезагрузки всей страницы. Это достигается с помощью Ajax – технологии, которая позволяет асинхронно обновлять содержимое страницы без ее перезагрузки. В случае WordPress мы используем admin-ajax.php, чтобы обрабатывать Ajax-запросы. Основные шаги включают:

1. Определение Ajax обработчика на стороне сервера в functions.php.
2. Правильная настройка и подключение Ajax скриптов с использованием wp_enqueue_script и wp_localize_script.
3. Реализация jQuery скрипта для выполнения запроса, обработки ответа и обновления DOM.

Примеры реализации

1. Обработчик Ajax в файле functions.php:

   Как видно из предложенного кода, большинство частей уже настроены. Однако, обратите внимание, что возможно дважды объявлена функция enqueue_load_more_script, это может вызвать проблемы. Убедитесь, что она объявлена только один раз. Пример исправленного кода:

   function my_load_more_posts() {
      $paged = $_POST['page'] ? intval($_POST['page']) : 1;
      $args = [
          'post_type' => 'post',
          'posts_per_page' => 6,
          'paged' => $paged,
      ];
   
      $query = new WP_Query($args);
   
      if ($query->have_posts()) :
          while ($query->have_posts()) : $query->the_post();
              get_template_part('template-parts/content', get_post_format()); 
          endwhile;
      endif;
   
      wp_reset_postdata();
      die();
   }
   add_action('wp_ajax_my_load_more', 'my_load_more_posts');
   add_action('wp_ajax_nopriv_my_load_more', 'my_load_more_posts');
   
   function enqueue_load_more_script() {
      wp_enqueue_script(
          'load-more',
          get_template_directory_uri() . '/js/load-more.js',
          ['jquery'],
          null,
          true
      );
   
      global $wp_query;
      wp_localize_script('load-more', 'load_more_params', [
          'ajax_url' => admin_url('admin-ajax.php'),
          'current_page' => get_query_var('paged') ? get_query_var('paged') : 1,
          'max_page' => $wp_query->max_num_pages,
      ]);
   }
   add_action('wp_enqueue_scripts', 'enqueue_load_more_script');

2. Создание JavaScript файла load-more.js:

   Код скрипта, вероятно, имеет проблемы с форматированием, что может привести к неожиданному поведению. Исправленный скрипт:

   jQuery(function($) {
      var canLoadMore = true;
      var currentPage = load_more_params.current_page;
      var maxPage = load_more_params.max_page;
   
      $('#load-more-button').on('click', function() {
          if (currentPage < maxPage && canLoadMore) {
              canLoadMore = false;
              currentPage++;
   
              $.ajax({
                  url: load_more_params.ajax_url,
                  type: 'POST',
                  data: {
                      action: 'my_load_more',
                      page: currentPage
                  },
                  success: function(response) {
                      if (response) {
                          $('.post-list').append(response);
                          canLoadMore = true;
                          if (currentPage >= maxPage) {
                              $('#load-more-button').hide();
                          }
                      }
                  },
                  error: function() {
                      console.log('Failed to load more posts.');
                  }
              });
          }
      });
   });

Применение в контексте

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

• Все пути к файлам, которые вы указали в functions.php, корректные.
• Файлы из каталога template-parts возвращают корректно отформатированные части постов, которые могут быть добавлены в DOM.
• Параметры, собираемые в wp_localize_script, правильно используются в скрипте. Если текущая страница не определена корректно, это может привести к неправильной пагинации.

Проверьте консоль разработчика в браузере на предмет ошибок JavaScript и убедитесь, что Ajax запросы выполняются корректно. Вы также можете протестировать функциональность вручную, вводя запросы через отладчик браузера, чтобы понять, где может крыться проблема.

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