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

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

Почему стоит использовать AJAX для подгрузки связанных записей YARPP

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

AJAX (Asynchronous JavaScript and XML) позволяет загружать контент асинхронно без перезагрузки страницы. Таким образом, связанные записи можно подгружать только по запросу пользователя — например, по нажатию кнопки «Показать ещё» или при прокрутке страницы.

Это снижает нагрузку на сервер и улучшает UX, особенно на мобильных устройствах и при медленном соединении.

Основные шаги реализации AJAX подгрузки связанных записей с YARPP

Для реализации нам потребуется:

• Создать AJAX обработчик в functions.php;
• Написать JavaScript код для отправки AJAX запроса и обработки ответа;
• Модифицировать шаблон вывода связанных записей, чтобы выводить их динамически;
• Опционально добавить пагинацию или кнопку «Показать ещё».

Шаг 1: AJAX обработчик в functions.php

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

add_action('wp_ajax_yarpp_load_related', 'yarpp_ajax_load_related');
add_action('wp_ajax_nopriv_yarpp_load_related', 'yarpp_ajax_load_related');

function yarpp_ajax_load_related() {
    // Проверяем 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;
    $limit = 5; // Кол-во записей за один запрос

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

    // Получаем связанные записи с помощью YARPP
    global $wpdb;

    // Формируем параметры YARPP
    $args = [
        'post_id' => $post_id,
        'limit' => $limit,
        'offset' => $offset,
        'template' => 'yarpp-template-ajax' // кастомный шаблон
    ];

    // Подключаем шаблон для вывода
    ob_start();
    yarpp_ajax_render_related($args);
    $output = ob_get_clean();

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

function yarpp_ajax_render_related($args) {
    // Используем стандартный API YARPP для получения связанных записей
    if (function_exists('yarpp_related')) {
        yarpp_related($args);
    } else {
        echo '<p>Плагин YARPP не активен.</p>';
    }
}

Обратите внимание, что здесь мы используем параметр offset для пагинации – это позволит подгружать новые записи порциями.

Шаг 2: Создаём кастомный шаблон для вывода связанных записей

Для более гибкого управления выводом создадим файл шаблона YARPP, например yarpp-template-ajax.php в папке вашей темы:

<ul class="yarpp-related-list ajax-loaded">
<?php foreach (yarpp_get_related(['post_id' => get_the_ID(), 'limit' => 5, 'offset' => 0]) as $related) : ?>
    <li><a href="<?php echo get_permalink($related); ?>"><?php echo get_the_title($related); ?></a></li>
<?php endforeach; ?>
</ul>

Этот шаблон можно затем использовать внутри AJAX обработчика.

Шаг 3: JavaScript для отправки AJAX запроса

Добавьте следующий скрипт в footer.php или через enqueue_script в functions.php:

jQuery(document).ready(function($) {
    var offset = 0;
    var limit = 5;
    var postID = $('#yarpp-related').data('post-id');

    function yarppAjaxLoad() {
        $.ajax({
            url: ajaxurl,
            type: 'POST',
            data: {
                action: 'yarpp_load_related',
                post_id: postID,
                offset: offset,
                nonce: yarpp_ajax_object.nonce
            },
            success: function(response) {
                if(response.success) {
                    if(offset === 0) {
                        $('#yarpp-related-list').html(response.data.html);
                    } else {
                        $('#yarpp-related-list').append(response.data.html);
                    }
                    offset += limit;
                } else {
                    console.log('Ошибка загрузки связанных записей');
                }
            },
            error: function() {
                console.log('AJAX запрос не выполнен');
            }
        });
    }

    // Первая загрузка при загрузке страницы
    yarppAjaxLoad();

    // Обработчик кнопки "Показать ещё"
    $('#yarpp-load-more').on('click', function() {
        yarppAjaxLoad();
    });
});

Не забудьте локализовать скрипт для передачи nonce и ajaxurl в functions.php:

function yarpp_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', [
        'ajaxurl' => admin_url('admin-ajax.php'),
        'nonce' => wp_create_nonce('yarpp_ajax_nonce')
    ]);
}
add_action('wp_enqueue_scripts', 'yarpp_enqueue_scripts');

Шаг 4: Модификация шаблона для вывода контейнера

В шаблоне single.php или там, где выводятся связанные записи, замените статический вызов YARPP на динамический контейнер с кнопкой загрузки:

<div id="yarpp-related" data-post-id="<?php the_ID(); ?>">
    <ul id="yarpp-related-list"></ul>
    <button id="yarpp-load-more">Показать ещё</button>
</div>

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

Дополнительные советы и улучшения

Кэширование AJAX ответов

Чтобы снизить нагрузку на сервер, можно добавить кэширование результатов в transient API WordPress. Например, сохранять сгенерированный HTML для конкретного поста и offset на 10–15 минут.

Использование пагинации вместо кнопки

Вместо кнопки «Показать ещё» можно реализовать бесконечную прокрутку (infinite scroll), чтобы записи подгружались при достижении конца списка.

Интеграция с плагином Clearfy Pro

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

Итог

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

Подробнее о плагинах и инструментах для оптимизации WordPress можно узнать на WPSHOP.ru.