Кнопка “Загрузить еще” 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');

<?php

get_header();
?>

    <section id="primary" class="content-area">
        <main id="main" class="site-main">

        <?php
        if ( have_posts() ) {

            // Загрузка цикла постов.
            while ( have_posts() ) {
                the_post();
                get_template_part( 'template-parts/content/content', 'excerpt' );
            }

            // Навигация предыдущая/следующая страница.
            newspack_the_posts_navigation();

        } else {

            // Если нет контента, включите шаблон "Посты не найдены".
            get_template_part( 'template-parts/content/content', 'none' );

        }
        ?>

        </main><!-- .site-main -->
        <?php get_sidebar(); ?>
    </section><!-- .content-area -->

    <?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">Загрузить еще</button>

<?php
get_footer();

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('Не удалось загрузить больше постов.');
                }
            });
        }
    });
});

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

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

Теория

AJAX (Asynchronous JavaScript and XML) позволяет обновлять части веб-страницы, не перезагружая её полностью. Это достигается отправкой асинхронных запросов на сервер для получения данных. В WordPress AJAX-запросы обычно обрабатываются через файл admin-ajax.php. AJAX-запросы должны содержать необходимую информацию, такую как тип действия (action) и параметры, в вашем случае номер страницы для загрузки.

Пример

Ваш код в functions.php и index.php выглядит следующим образом:

1. Функция PHP для обработки AJAX-запроса: Эта функция определена правильно, но стоит убедиться, что она не только возвращает контент, но и передает его обратно в JavaScript-код.

2. JavaScript-файл для управления клиентскими взаимодействиями: Код AJAX в этом файле должен корректно отправлять запросы и обрабатывать возвращенные данные для их отображения на странице.

Применение

Теперь рассмотрим возможные причины неисправности кнопки и предложим пути решения.

1. Проверка AJAX-запроса:

   • Убедитесь, что ваш AJAX-запрос фактически отправляется. Откройте панель разработчика в вашем браузере (обычно клавиша F12), перейдите на вкладку "Network" и нажмите кнопку "Load More". Вы должны увидеть, отправляется ли запрос, и какие данные возвращаются.
   • Проверьте, совпадает ли URL в запросе (load_more_params.ajax_url) с ожидаемым. Ошибка может быть связана, если он не указывает на admin-ajax.php.

2. Серверная часть (PHP):

   • Убедитесь, что функция my_load_more_posts() возвращает контент. Вам может потребоваться использовать функцию wp_send_json_success() или wp_send_json_error(), чтобы передать данные клиенту.

     if ($query->have_posts()) {
     ob_start();
     while ($query->have_posts()) : $query->the_post();
        get_template_part('template-parts/content', get_post_format()); 
     endwhile;
     $data = ob_get_clean();
     wp_send_json_success($data);
     }

3. Клиентская часть (JavaScript):

   • Убедитесь, что переменная canLoadMore и логика изменения текущей страницы (инкрементирование currentPage) работают правильно.
   • Проверьте, что элемент с классом .post-list является корректным контейнером для добавления нового контента. В вашем HTML убедитесь, что у него нет синтаксических ошибок или несоответствий.

4. Локализация скриптов:

   • Убедитесь, что данные о текущей странице и максимальном количестве страниц передаются правильно с помощью wp_localize_script. Возможно, переменная $GLOBALS['wp_query'] не содержит нужных данных, если она определена в другом контексте. Можно определить количество страниц использованием отдельного запроса:

     global $wp_query;
     if (is_home() && !is_admin()) {
     wp_localize_script('load-more', 'load_more_params', array(
        'ajax_url' => admin_url('admin-ajax.php'),
        'current_page' => 1,
        'max_page' => $wp_query->max_num_pages,
     ));
     }

5. HTML-разметка:

   • Проверьте, чтобы HTML-разметка в вашем файле index.php соответствовала ожидаемой структуре и не содержала синтаксических ошибок.

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