Как правильно вывести ajax подгрузку по клике на показать еще?

Для реализации ajax подгрузки по клику на "Показать еще" в WordPress вам потребуется выполнить следующие шаги:

1. Создайте функцию, которая будет обрабатывать ajax-запрос и возвращать необходимые данные. Для этого вы можете использовать хук wp_ajax_{action} (для зарегистрированных пользователей) или wp_ajax_nopriv_{action} (для неавторизованных пользователей), где {action} - это идентификатор действия, к которому будет привязана функция. Внутри функции вы можете выполнить любые необходимые действия, например, запросить посты с помощью WP_Query и вернуть список постов в виде HTML-кода.

Пример кода для функции show_more_posts_ajax:

add_action('wp_ajax_show_more_posts', 'show_more_posts_ajax');
add_action('wp_ajax_nopriv_show_more_posts', 'show_more_posts_ajax');

function show_more_posts_ajax() {
    // Обработка ajax-запроса
    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 5,
        'paged' => $_POST['page'],
    );

    $query = new WP_Query($args);

    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            // Вывод постов
            // Например, можно использовать функцию the_title() для вывода заголовка поста
            echo '<h2>' . get_the_title() . '</h2>';
        }
    } else {
        echo 'No more posts';
    }

    wp_reset_postdata();
    wp_die();
}

2. Добавьте JavaScript-код для обработки клика на кнопку "Показать еще" и выполнения ajax-запроса. Для этого вам потребуется использовать функцию jQuery.ajax, которая отправит запрос на URL, указанный в атрибуте admin-ajax.php, с необходимыми параметрами.

Пример кода для JavaScript:

jQuery(document).ready(function($) {
    var page = 1; // Начальная страница

    // Обработчик клика на кнопку "Показать еще"
    $('.show-more-button').click(function() {
        var button = $(this);

        $.ajax({
            url: ajaxurl, // URL для ajax-запросов, доступный в WordPress
            type: 'post',
            data: {
                action: 'show_more_posts', // Идентификатор действия
                page: page, // Номер страницы
            },
            beforeSend: function() {
                // Добавьте код для показа спиннера или другого индикатора загрузки
                button.text('Загрузка...');
            },
            success: function(response) {
                // Добавьте код для обновления контента на странице
                $('#posts-container').append(response);

                // Увеличьте номер страницы
                page++;
            },
            complete: function() {
                // Добавьте код для скрытия спиннера или другого индикатора загрузки
                button.text('Показать еще');
            }
        });
    });
});

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

<div id="posts-container">
    <!-- Вывод первой порции постов -->
</div>

<button class="show-more-button">Показать еще</button>

Примечание: Убедитесь, что ваш код находится внутри тега <?php ?>.

Таким образом, при клике на кнопку "Показать еще" будет выполнен ajax-запрос, который вызовет функцию show_more_posts_ajax и вернет новые посты для добавления на страницу.