Почему стоит использовать AJAX для подгрузки связанных записей в YARPP
Плагин YARPP (Yet Another Related Posts Plugin) — один из самых популярных инструментов для вывода связанных записей в WordPress. Однако при большом количестве записей или на медленных серверах стандартный вывод связанных записей может замедлять загрузку страницы. Использование AJAX для подгрузки связанных записей позволяет значительно улучшить пользовательский опыт за счёт асинхронной загрузки контента без перезагрузки страницы.
AJAX позволяет загружать список связанных записей только тогда, когда это необходимо — например, при клике на кнопку «Показать ещё» или при прокрутке страницы. Это разгружает сервер и сокращает время первичной загрузки.
Кроме того, динамическая подгрузка связанных записей улучшает работу на мобильных устройствах и помогает более гибко управлять контентом.
Основные задачи при реализации подгрузки YARPP через AJAX
Для реализации динамической загрузки связанных записей с помощью YARPP и AJAX необходимо решить следующие задачи:
- Создать обработчик AJAX-запроса в WordPress, который будет возвращать HTML со связанными записями на основе текущей записи.
- Настроить JavaScript на фронтенде для отправки AJAX-запросов и вывода полученного HTML на страницу.
- Обеспечить безопасность и производительность: правильно использовать nonce, кэшировать результаты, избегать избыточных запросов.
Рассмотрим эти шаги подробно и приведём практические примеры.
Добавление AJAX-обработчика в functions.php
В файле functions.php вашей темы или в собственном плагине добавьте следующий код. Он регистрирует AJAX-обработчик, который возвращает HTML с результатами YARPP для заданного поста.
add_action('wp_ajax_yarpp_load_related', 'yarpp_load_related_ajax_handler');
add_action('wp_ajax_nopriv_yarpp_load_related', 'yarpp_load_related_ajax_handler');
function yarpp_load_related_ajax_handler() {
// Проверяем nonce для безопасности
if (!isset($_POST['nonce']) || !wp_verify_nonce($_POST['nonce'], 'yarpp_ajax_nonce')) {
wp_send_json_error('Ошибка безопасности');
wp_die();
}
$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
if (!$post_id) {
wp_send_json_error('Не указан ID записи');
wp_die();
}
// Получаем связанные записи через YARPP
$related = yarpp_get_related(['post_id' => $post_id, 'limit' => 5]);
if (!$related) {
echo '<p>Связанные записи не найдены.</p>';
wp_die();
}
echo '<ul class="yarpp-related-list">';
foreach ($related as $post) {
setup_postdata($post);
echo '<li><a href="' . get_permalink($post) . '">' . esc_html(get_the_title($post)) . '</a></li>';
}
wp_reset_postdata();
echo '</ul>';
wp_die();
}Здесь мы используем функцию yarpp_get_related() с передачей параметра post_id и лимита вывода. Обратите внимание, что функция возвращает массив записей, который мы затем обрабатываем в цикле.
JavaScript для отправки AJAX-запроса и вывода результатов
Чтобы отправлять AJAX-запрос и динамически выводить связанные записи, добавьте следующий скрипт в шаблон страницы или подключите его отдельным файлом. Важно локализовать скрипт для передачи URL AJAX и nonce.
jQuery(document).ready(function($) {
var postID = $('#post-id').val(); // Например, скрытое поле с ID записи
var nonce = $('#yarpp-nonce').val();
function loadYarppRelated() {
$.ajax({
url: yarpp_ajax_obj.ajax_url,
type: 'POST',
data: {
action: 'yarpp_load_related',
post_id: postID,
nonce: nonce
},
beforeSend: function() {
$('#yarpp-related-container').html('<p>Загрузка связанных записей...</p>');
},
success: function(response) {
$('#yarpp-related-container').html(response);
},
error: function() {
$('#yarpp-related-container').html('<p>Ошибка при загрузке.</p>');
}
});
}
// Запускаем загрузку при готовности страницы
loadYarppRelated();
});Не забудьте локализовать скрипт в PHP, например:
function yarpp_enqueue_scripts() {
wp_enqueue_script('yarpp-ajax-script', get_template_directory_uri() . '/js/yarpp-ajax.js', ['jquery'], null, true);
wp_localize_script('yarpp-ajax-script', 'yarpp_ajax_obj', [
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('yarpp_ajax_nonce')
]);
}
add_action('wp_enqueue_scripts', 'yarpp_enqueue_scripts');Вывод HTML-разметки в шаблоне
В шаблоне записи добавьте контейнер, где будут отображаться связанные записи, а также поле с ID записи и nonce для JS:
<div id="yarpp-related-container"></div>
<input type="hidden" id="post-id" value="<?php the_ID(); ?>" />
<input type="hidden" id="yarpp-nonce" value="<?php echo wp_create_nonce('yarpp_ajax_nonce'); ?>" />Это обеспечит доступ JavaScript к необходимым данным для отправки AJAX-запроса.
Оптимизация и кэширование результатов YARPP
При частых запросах связанных записей целесообразно закэшировать результат, чтобы не нагружать базу данных и API YARPP. В AJAX-обработчике можно использовать стандартный объект транзиентов WordPress:
$cache_key = 'yarpp_related_' . $post_id;
$related = get_transient($cache_key);
if (false === $related) {
$related = yarpp_get_related(['post_id' => $post_id, 'limit' => 5]);
set_transient($cache_key, $related, HOUR_IN_SECONDS);
}Такой подход позволит хранить связанные записи в кэше на час, существенно снижая нагрузку.
Пример использования с плагином Clearfy Pro для дополнительной оптимизации
Если на сайте установлен плагин Clearfy Pro, можно дополнительно оптимизировать работу AJAX и YARPP, отключив ненужные функции и улучшив кеширование. Например, Clearfy Pro позволяет настроить исключения для скриптов и стилей, что снижает время загрузки.
Заключение
Интеграция YARPP с AJAX — отличный способ сделать вывод связанных записей более гибким и быстрым, особенно на крупных сайтах. Используя описанный подход, вы сможете подгружать связанные записи динамически, улучшая UX и снижая нагрузку на сервер.
Обязательно тестируйте производительность и корректность работы на разных устройствах и браузерах. При необходимости расширяйте функционал, например, добавляя пагинацию или фильтрацию связанных записей.