YARPP и AJAX: динамическая подгрузка связанных записей в WordPress

Что такое динамическая подгрузка связанных записей и зачем она нужна

В стандартной реализации YARPP (Yet Another Related Posts Plugin) связанные записи выводятся статично при загрузке страницы. Это удобно, но при большом количестве связанных материалов или высокой посещаемости сайта такой подход может привести к замедлению загрузки страницы и ухудшению пользовательского опыта.

Динамическая подгрузка с помощью AJAX позволяет загружать связанные записи по запросу, когда пользователь прокручивает страницу или нажимает кнопку «Показать ещё». Это снижает нагрузку на сервер и ускоряет первичную загрузку страницы, делая интерфейс более интерактивным.

В этой статье мы рассмотрим, как интегрировать YARPP с AJAX, чтобы реализовать подгрузку связанных записей на лету, без перезагрузки страницы.

Подготовка: проверяем базовую настройку YARPP

Для начала убедитесь, что плагин YARPP установлен и настроен, и на странице вывода записей уже отображаются связанные записи. Если вывод связанностей работает, можно переходить к реализации AJAX-загрузки.

Рекомендуется использовать кастомный шаблон вывода YARPP, чтобы легко контролировать HTML-разметку и интеграцию с AJAX. Для этого создайте файл yarpp-template-custom.php в папке темы и настройте вывод по своему усмотрению.

Создание AJAX-обработчика на стороне сервера

Для динамической загрузки необходимо создать PHP-функцию, которая будет возвращать связанные записи при AJAX-запросе.

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

add_action('wp_ajax_yarpp_load_more', 'yarpp_ru_ajax_load_more_related_posts');
add_action('wp_ajax_nopriv_yarpp_load_more', 'yarpp_ru_ajax_load_more_related_posts');

function yarpp_ru_ajax_load_more_related_posts() {
    // Проверяем nonce для безопасности
    check_ajax_referer('yarpp_ajax_nonce', 'nonce');

    $post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
    $offset = isset($_POST['offset']) ? intval($_POST['offset']) : 0;
    $posts_per_page = 5; // Количество постов на подгрузку

    if (!$post_id) {
        wp_send_json_error('Неверный ID записи');
        wp_die();
    }

    // Параметры для YARPP
    $args = [
        'post_type' => 'post',
        'limit' => $posts_per_page,
        'offset' => $offset,
        'post_type__in' => ['post'],
        'show_pass_post' => false,
        'sort' => 'score DESC',
        'post_id' => $post_id
    ];

    // Получаем связанные записи через функцию YARPP
    if (function_exists('yarpp_get_related')) {
        $related = yarpp_get_related($args);
    } else {
        wp_send_json_error('YARPP не активен');
        wp_die();
    }

    if (!$related) {
        wp_send_json_error('Связанные записи не найдены');
        wp_die();
    }

    // Формируем HTML
    ob_start();
    foreach ($related as $post) {
        setup_postdata($post);
        ?>
        <div class="yarpp-item">
            <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
        </div>
        <?php
    }
    wp_reset_postdata();
    $html = ob_get_clean();

    wp_send_json_success(['html' => $html]);
    wp_die();
}

Объяснение:

• Используем хуки wp_ajax_ и wp_ajax_nopriv_ для обработки запросов авторизованных и гостей.
• Получаем ID текущей записи и смещение (offset) для пагинации.
• Вызываем функцию yarpp_get_related() для получения связанных постов с параметрами ограничения и смещения.
• Формируем HTML блок с ссылками на связанные записи и возвращаем его в формате JSON.

Добавление JavaScript для отправки AJAX-запросов

Теперь нужно написать скрипт, который будет отправлять AJAX-запросы и подгружать новые связанные записи на страницу.

Добавьте в вашу тему или плагин следующий JavaScript (например, в файл js/yarpp-ajax.js):

jQuery(document).ready(function($) {
    var postId = $('#yarpp-related').data('post-id');
    var offset = $('#yarpp-related .yarpp-item').length;
    var loading = false;
    var loadMoreBtn = $('#yarpp-load-more');

    loadMoreBtn.on('click', function(e) {
        e.preventDefault();
        if (loading) return;
        loading = true;
        loadMoreBtn.text('Загрузка...');

        $.ajax({
            url: yarpp_ajax_object.ajax_url,
            type: 'POST',
            data: {
                action: 'yarpp_load_more',
                post_id: postId,
                offset: offset,
                nonce: yarpp_ajax_object.nonce
            },
            success: function(response) {
                if (response.success) {
                    $('#yarpp-related').append(response.data.html);
                    offset += $(response.data.html).filter('.yarpp-item').length;
                    loadMoreBtn.text('Показать ещё');
                    if ($(response.data.html).filter('.yarpp-item').length === 0) {
                        loadMoreBtn.hide();
                    }
                } else {
                    loadMoreBtn.text('Показать ещё');
                    alert('Ошибка: ' + response.data);
                }
                loading = false;
            },
            error: function() {
                alert('Ошибка запроса к серверу.');
                loading = false;
                loadMoreBtn.text('Показать ещё');
            }
        });
    });
});

Чтобы этот скрипт работал, нужно:

• В HTML контейнер с связанными записями добавить ID yarpp-related и data-атрибут data-post-id с текущим ID записи.
• Добавить кнопку с ID yarpp-load-more для вызова подгрузки.
• Подключить скрипт и локализовать переменные AJAX в functions.php:

function yarpp_ru_enqueue_scripts() {
    wp_enqueue_script('yarpp-ajax', get_template_directory_uri() . '/js/yarpp-ajax.js', ['jquery'], null, true);
    wp_localize_script('yarpp-ajax', 'yarpp_ajax_object', [
        'ajax_url' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('yarpp_ajax_nonce'),
    ]);
}
add_action('wp_enqueue_scripts', 'yarpp_ru_enqueue_scripts');

Как добавить HTML и интегрировать кнопку подгрузки

В шаблоне вывода связанных записей (например, yarpp-template-custom.php) реализуйте примерно такую разметку:

<div id="yarpp-related" data-post-id="<?php the_ID(); ?>">
    <?php if (have_posts()) : ?>
        <?php while (have_posts()) : the_post(); ?>
            <div class="yarpp-item">
                <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
            </div>
        <?php endwhile; ?>
    <?php endif; ?>
</div>
<button id="yarpp-load-more">Показать ещё</button>

Так мы создаём область с текущими связанными записями и кнопку для подгрузки новых.

Оптимизация и дополнительные советы

1. Кэширование результатов. Чтобы снизить нагрузку на базу, можно кэшировать результаты AJAX-запроса с помощью Transients API или объекта кэша WordPress.

2. Обработка ошибок. Добавьте в JavaScript более тщательную обработку ошибок и информирование пользователя.

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

4. Поддержка разных типов записей. При необходимости расширьте фильтр post_type__in в AJAX-обработчике для поддержки кастомных типов записей.

5. Интеграция с WPCommunity или JournalX. Если вы используете темы от WPSHOP (например, JournalX), стилизуйте блоки связанных записей под дизайн темы для лучшей визуальной интеграции.

Заключение по теме динамической подгрузки YARPP и AJAX

Динамическая подгрузка связанных записей в WordPress с помощью YARPP и AJAX — отличный способ повысить интерактивность сайта и снизить время загрузки страниц. Реализация несложная и позволяет точно контролировать, сколько и когда показывать связанных материалов.

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

Для дополнительной автоматизации и улучшения функционала рекомендуем ознакомиться с плагинами от WPSHOP.