В этой статье мы рассмотрим, как на базе популярного плагина YARPP (Yet Another Related Posts Plugin) создать собственный блок связанных записей в WordPress, который будет динамически подгружать контент с помощью AJAX. Такой подход значительно улучшит пользовательский опыт и позволит гибко настраивать отображение связанных материалов.
Почему использовать YARPP совместно с AJAX для связанных записей
YARPP — мощный инструмент для подбора связанных записей по различным критериям, таким как таксономии, заголовки, контент и мета-данные. Однако стандартный вывод связанных записей происходит при загрузке страницы, что замедляет отображение и не всегда удобно для пользователей, особенно на крупных сайтах.
Использование AJAX позволяет подгружать связанные записи асинхронно после загрузки основного контента страницы. Это снижает нагрузку на сервер при начальной отдаче страницы и улучшает скорость рендеринга.
Кроме того, AJAX-решение дает возможность реализовать интерактивные элементы, например, переключение критериев подбора связанных записей без перезагрузки.
Основные шаги по созданию кастомного блока связанных записей с YARPP и AJAX
Реализация состоит из нескольких этапов:
- Создание PHP-функции для получения связанных записей через API YARPP.
- Регистрация AJAX-обработчика в WordPress для вызова этой функции.
- Добавление JavaScript-кода на фронтенд для отправки AJAX-запроса и вывода полученных данных.
- Создание кастомного HTML-шаблона для вывода связанных записей.
1. Создаем PHP-функцию для получения связанных записей
Для удобства и избежания конфликтов с другими функциями, добавим префикс yarppru_ к именам функций.
function yarppru_get_related_posts_ajax() {
// Проверяем nonce для безопасности
check_ajax_referer('yarppru_nonce', 'security');
$post_id = isset($_POST['post_id']) ? intval($_POST['post_id']) : 0;
if (!$post_id) {
wp_send_json_error('Invalid post ID');
wp_die();
}
// Получаем связанные записи через YARPP
$related = yarpp_get_related(['post_id' => $post_id, 'limit' => 5]);
if (!$related) {
wp_send_json_success('<p>Связанные записи не найдены.</p>');
wp_die();
}
// Формируем HTML вывода
ob_start();
echo '<ul class="yarppru-related-posts">';
foreach ($related as $post) {
setup_postdata($post);
echo '<li><a href="' . get_permalink($post) . '">' . get_the_title($post) . '</a></li>';
}
echo '</ul>';
wp_reset_postdata();
$html = ob_get_clean();
wp_send_json_success($html);
wp_die();
}Обратите внимание, что мы используем встроенную функцию yarpp_get_related из плагина YARPP для получения массива связанных записей.
2. Регистрируем AJAX-обработчик в WordPress
Для того, чтобы функция была доступна по AJAX, зарегистрируем два хука: для авторизованных и неавторизованных пользователей.
add_action('wp_ajax_yarppru_get_related_posts', 'yarppru_get_related_posts_ajax');
add_action('wp_ajax_nopriv_yarppru_get_related_posts', 'yarppru_get_related_posts_ajax');3. Подключаем JavaScript для отправки AJAX-запроса и вывода результата
Добавим скрипт, который при загрузке страницы или по событию вызовет AJAX и вставит связанные записи в нужный блок.
function yarppru_enqueue_scripts() {
wp_enqueue_script('yarppru-ajax', get_template_directory_uri() . '/js/yarppru-ajax.js', ['jquery'], null, true);
wp_localize_script('yarppru-ajax', 'yarppru_ajax_obj', [
'ajax_url' => admin_url('admin-ajax.php'),
'security' => wp_create_nonce('yarppru_nonce'),
'post_id' => get_the_ID(),
]);
}
add_action('wp_enqueue_scripts', 'yarppru_enqueue_scripts');В файле yarppru-ajax.js разместим следующий код:
jQuery(document).ready(function($) {
function yarppru_load_related() {
$.ajax({
url: yarppru_ajax_obj.ajax_url,
type: 'POST',
data: {
action: 'yarppru_get_related_posts',
security: yarppru_ajax_obj.security,
post_id: yarppru_ajax_obj.post_id
},
success: function(response) {
if (response.success) {
$('#yarppru-related-container').html(response.data);
} else {
$('#yarppru-related-container').html('<p>Не удалось загрузить связанные записи.</p>');
}
},
error: function() {
$('#yarppru-related-container').html('<p>Ошибка при загрузке данных.</p>');
}
});
}
// Загружаем связанные записи по готовности документа
yarppru_load_related();
});4. Добавляем HTML-контейнер для блока связанных записей
В шаблоне темы (например, single.php) вставьте в нужное место следующий контейнер:
<div id="yarppru-related-container"><!-- здесь подгрузятся связанные записи --></div>При загрузке страницы в этот блок будет подгружена HTML-разметка с связанными записями.
Расширенные возможности и рекомендации
Добавление кастомных параметров для выбора связанных записей
Вы можете расширить функцию yarppru_get_related_posts_ajax, передавая дополнительные параметры через AJAX, например, ограничение по таксономиям или типу записей. Это позволит создавать более точные подборки.
Использование шаблонов вывода YARPP
YARPP поддерживает кастомные шаблоны для отображения связанных записей. В функции вывода можно использовать yarpp_get_template_part() для подключения собственного шаблона, что повысит гибкость дизайна.
Совместимость с плагином Clearfy Pro
Если на сайте установлен Clearfy Pro, убедитесь, что функции оптимизации не блокируют AJAX-запросы или работу YARPP.
Советы по оптимизации и безопасности
Использование AJAX требует соблюдения стандартных мер безопасности — обязательно проверяйте nonce и права пользователя. Для крупных сайтов с большим количеством связанных записей рекомендую внедрить кеширование результатов AJAX-запросов, например, через Transients API WordPress.
Также следите за производительностью — при слишком сложных запросах YARPP может существенно нагружать базу данных. В таких случаях стоит рассмотреть вариант предварительного вычисления связанных записей и сохранения их в мета-полях.
Итоги
Создание собственного блока связанных записей с использованием YARPP и AJAX — отличный способ повысить интерактивность сайта и улучшить опыт пользователей без потери производительности. Приведённый пример можно доработать под конкретные задачи и интегрировать с другими плагинами и темами WordPress.