Плагин YARPP (Yet Another Related Posts Plugin) — один из лучших инструментов для вывода связанных записей в WordPress. Однако стандартная реализация выводит все связанные записи сразу, что может замедлять загрузку страницы и ухудшать пользовательский опыт. В этой статье разберём, как реализовать выборочную подгрузку связанных записей через AJAX с помощью YARPP, чтобы повысить скорость загрузки и гибко управлять выводом контента.
Почему стоит использовать AJAX для загрузки связанных записей
По умолчанию YARPP выводит список связанных записей сразу при загрузке страницы. Если у вас много связанных материалов, это увеличивает время загрузки и повышает нагрузку на сервер. Кроме того, иногда пользователю не нужно видеть все связанные записи сразу — достаточно, например, первых трёх, а остальные подгружать по запросу.
Использование AJAX позволяет:
- Улучшить скорость первичной загрузки страницы.
- Динамически подгружать дополнительные связанные записи по кнопке или прокрутке.
- Повысить интерактивность и удобство для пользователя.
Далее рассмотрим, как реализовать такой функционал с помощью кастомного кода и хуков YARPP.
Подготовка: ограничение количества связанных записей YARPP
Первым шагом ограничим количество связанных записей, которые выводятся на страницу изначально. Для этого используем фильтр yarpp_related и параметр limit в аргументах вызова YARPP.
function yarppru_limit_related_posts($args) {
$args['limit'] = 3; // Выводим только 3 записи
return $args;
}
add_filter('yarpp_related_args', 'yarppru_limit_related_posts');Это позволит на странице выводить только первые 3 связанных записи, остальные будут подгружаться динамически.
Создание AJAX-обработчика для подгрузки дополнительных связанных записей
Теперь реализуем AJAX-обработчик, который будет возвращать дополнительные связанные записи по запросу клиента.
add_action('wp_ajax_yarppru_load_more', 'yarppru_load_more_ajax_handler');
add_action('wp_ajax_nopriv_yarppru_load_more', 'yarppru_load_more_ajax_handler');
function yarppru_load_more_ajax_handler() {
// Проверка nonce для безопасности
check_ajax_referer('yarppru_load_more_nonce', 'security');
$post_id = intval($_POST['post_id']);
$offset = intval($_POST['offset']);
$limit = 5; // Кол-во записей для подгрузки
// Получаем связанные записи с учетом offset
$args = array(
'post_id' => $post_id,
'limit' => $limit,
'offset' => $offset,
'template' => 'yarpp-template-ajax', // кастомный шаблон
'echo' => false
);
$related = yarpp_get_related($args);
if (!$related) {
wp_send_json_error('Нет дополнительных записей');
} else {
wp_send_json_success($related);
}
wp_die();
}Обратите внимание, что мы используем параметр offset, чтобы подгружать записи пачками, начиная с нужного смещения. Для вывода HTML-разметки связаных записей рекомендуем создать кастомный шаблон yarpp-template-ajax.php в папке темы.
Создание кастомного шаблона YARPP для AJAX
Создайте файл yarpp-template-ajax.php в корне активной темы и добавьте туда минимальный код для вывода связанных записей в удобном виде. Например:
<ul class="yarpp-ajax-list">
<?php foreach ($related_posts as $related) : ?>
<li><a href="<?php echo esc_url(get_permalink($related->ID)); ?>"><?php echo esc_html(get_the_title($related->ID)); ?></a></li>
<?php endforeach; ?>
</ul>Такой шаблон будет возвращать только список ссылок, что удобно для динамической подгрузки через AJAX.
Добавление JavaScript для вызова AJAX и динамического вывода
Теперь добавим скрипт, который при нажатии на кнопку подгрузит дополнительные связанные записи и добавит их в список.
function yarppru_enqueue_scripts() {
wp_enqueue_script('yarppru-ajax', get_template_directory_uri() . '/js/yarppru-ajax.js', array('jquery'), '1.0', true);
wp_localize_script('yarppru-ajax', 'yarppru_ajax_obj', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('yarppru_load_more_nonce'),
));
}
add_action('wp_enqueue_scripts', 'yarppru_enqueue_scripts');В файле yarppru-ajax.js разместите следующий код:
jQuery(document).ready(function($) {
var offset = 3; // стартовое смещение
var postId = $('#yarpp-related-posts').data('post-id');
$('#yarpp-load-more').on('click', function(e) {
e.preventDefault();
$.ajax({
url: yarppru_ajax_obj.ajax_url,
type: 'POST',
data: {
action: 'yarppru_load_more',
security: yarppru_ajax_obj.nonce,
post_id: postId,
offset: offset
},
success: function(response) {
if(response.success) {
$('#yarpp-related-posts ul').append(response.data);
offset += 5;
} else {
$('#yarpp-load-more').hide();
}
},
error: function() {
alert('Ошибка загрузки связанных записей');
}
});
});
});Этот скрипт привязывается к кнопке с ID yarpp-load-more, по клику отправляет AJAX-запрос и добавляет новые записи в список.
Вывод кнопки и контейнера для YARPP в шаблоне
В шаблоне single.php или другом месте вывода связанных записей добавьте следующий код:
<div id="yarpp-related-posts" data-post-id="<?php the_ID(); ?>">
<?php yarpp(); ?>
<button id="yarpp-load-more">Показать больше</button>
</div>Это контейнер, где изначально выводятся первые 3 записи YARPP, а кнопка подгружает остальные.
Дополнительные советы по оптимизации
Такой подход позволяет значительно разгрузить страницу и улучшить UX. Чтобы избежать повторной подгрузки, можно добавить блокировку кнопки при загрузке и проверку окончания списка. Для кеширования результатов AJAX рекомендуется использовать transient API или сторонние кеширующие плагины.
Также можно комбинировать этот подход с плагинами оптимизации, например, Clearfy Pro, который улучшает производительность WordPress и уменьшает количество запросов к базе.
Заключение
Использование AJAX-подгрузки связанных записей с помощью YARPP — отличный способ оптимизировать вывод контента на сайте и повысить скорость загрузки страниц. С помощью простых хуков, кастомного шаблона и небольшого JavaScript-кода можно реализовать удобный и эффективный функционал, улучшая взаимодействие с пользователем.