Динамические отзывы с подгрузкой — отличный способ повысить удобство и скорость работы сайта, особенно если отзывов много. В этой статье разберём, как реализовать такую функциональность на сайте с темой GeneratePress, используя минимальный код и доступные инструменты WordPress.
Почему динамические отзывы с подгрузкой важны для сайта
Если на сайте много отзывов, их загрузка всех сразу замедляет страницу, ухудшает пользовательский опыт и повышает нагрузку на сервер. Подгрузка отзывов по мере прокрутки или по клику позволяет:
- Уменьшить время первоначальной загрузки страницы;
- Снизить нагрузку на базу данных;
- Сделать интерфейс более отзывчивым и современным;
- Улучшить SEO за счёт оптимальной загрузки контента.
Для темы GeneratePress, которая славится своей лёгкостью и производительностью, такая оптимизация особенно актуальна.
Выбор подхода: AJAX или пагинация
Для реализации динамических отзывов есть два популярных способа:
1. AJAX-подгрузка отзывов
Отзывы загружаются по мере запроса без перезагрузки страницы. Это современный и удобный способ, позволяющий автоматически подгружать новые отзывы при прокрутке или по кнопке «Показать ещё».
2. Классическая пагинация
Отзывы разбиваются на страницы, и пользователь переходит между ними. Менее удобный способ, но проще в реализации.
Для GeneratePress рекомендуем AJAX-подгрузку, так как тема хорошо совместима с таким подходом.
Создание пользовательского типа записи «Отзыв»
Чтобы хранить отзывы отдельно и удобно ими управлять, создадим собственный тип записи. Добавьте следующий код в functions.php вашей дочерней темы или в плагин для кастомных функций:
function generatepress_register_post_type_reviews() {
$labels = array(
'name' => 'Отзывы',
'singular_name' => 'Отзыв',
'add_new' => 'Добавить отзыв',
'add_new_item' => 'Добавить новый отзыв',
'edit_item' => 'Редактировать отзыв',
'new_item' => 'Новый отзыв',
'view_item' => 'Просмотреть отзыв',
'search_items' => 'Поиск отзывов',
'not_found' => 'Отзывы не найдены',
'not_found_in_trash' => 'В корзине отзывов не найдено',
'menu_name' => 'Отзывы'
);
$args = array(
'labels' => $labels,
'public' => true,
'has_archive' => true,
'supports' => array('title', 'editor', 'author'),
'menu_position' => 5,
'menu_icon' => 'dashicons-testimonial',
'show_in_rest' => true
);
register_post_type('gp_review', $args);
}
add_action('init', 'generatepress_register_post_type_reviews');Этот код создаёт тип записи gp_review с базовыми полями, поддержкой Gutenberg и меню в админке.
Вывод отзывов с AJAX-подгрузкой
Шаг 1: Создаём шаблон вывода одиночного отзыва
Для красивого отображения каждого отзыва создайте файл content-gp_review.php в папке вашей темы с таким содержимым:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<h3 class="gp-review-title"><?php the_title(); ?></h3>
<div class="gp-review-content"><?php the_content(); ?></div>
<div class="gp-review-author">— <?php the_author(); ?></div>
</article>Это позволит использовать единый стиль для всех отзывов.
Шаг 2: Добавляем AJAX обработчик в functions.php
Ниже пример функции для выборки отзывов по странично с учётом запроса AJAX:
function generatepress_ajax_load_reviews() {
// Проверяем nonce для безопасности
check_ajax_referer('gp_load_reviews_nonce', 'nonce');
$paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
$posts_per_page = 3;
$args = array(
'post_type' => 'gp_review',
'posts_per_page' => $posts_per_page,
'paged' => $paged
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
get_template_part('content', 'gp_review');
}
} else {
echo '<p>Больше отзывов нет.</p>';
}
wp_die();
}
add_action('wp_ajax_generatepress_load_reviews', 'generatepress_ajax_load_reviews');
add_action('wp_ajax_nopriv_generatepress_load_reviews', 'generatepress_ajax_load_reviews');Этот код получает параметр страницы, подгружает нужные отзывы и выводит их через шаблон content-gp_review.php.
Шаг 3: Скрипт для вызова AJAX и вставки отзывов
Добавьте следующий JS-код в footer.php или подключите через wp_enqueue_script (предпочтительный способ):
jQuery(document).ready(function($){
var page = 1;
var loading = false;
$('#load-more-reviews').on('click', function(e){
e.preventDefault();
if(loading) return;
loading = true;
page++;
$.ajax({
url: gp_ajax_object.ajax_url,
method: 'POST',
data: {
action: 'generatepress_load_reviews',
page: page,
nonce: gp_ajax_object.nonce
},
success: function(response){
if(response.indexOf('Больше отзывов нет') !== -1){
$('#load-more-reviews').hide();
}
$('#reviews-container').append(response);
loading = false;
},
error: function(){
alert('Ошибка загрузки отзывов');
loading = false;
}
});
});
});Не забудьте локализовать скрипт в functions.php, чтобы передать URL и nonce:
function generatepress_enqueue_scripts() {
wp_enqueue_script('generatepress-ajax-reviews', get_stylesheet_directory_uri() . '/js/ajax-reviews.js', array('jquery'), null, true);
wp_localize_script('generatepress-ajax-reviews', 'gp_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('gp_load_reviews_nonce')
));
}
add_action('wp_enqueue_scripts', 'generatepress_enqueue_scripts');Разметка HTML для вывода отзывов и кнопки
В нужном месте шаблона (например, в page-reviews.php или через шорткод) вставьте следующий HTML:
<div id="reviews-container">
<?php
// Вывод первых отзывов при загрузке страницы
$args = array(
'post_type' => 'gp_review',
'posts_per_page' => 3,
'paged' => 1
);
$query = new WP_Query($args);
if ($query->have_posts()) {
while ($query->have_posts()) {
$query->the_post();
get_template_part('content', 'gp_review');
}
wp_reset_postdata();
}
?>
</div>
<button id="load-more-reviews">Показать ещё отзывы</button>Оптимизация и рекомендации
1. Кэширование. Чтобы снизить нагрузку, используйте кэширование AJAX-запросов, например, с помощью плагина Clearfy Pro.
2. Используйте кастомные поля. Для расширения отзывов добавьте поля рейтинга, даты и фото, используя Advanced Custom Fields или мета-боксы.
3. Поддержка стилей GeneratePress. Используйте классы темы и минималистичный CSS, чтобы отзывы гармонично вписывались в дизайн.
4. Проверка на мобильных устройствах. Убедитесь, что кнопка и отзывы корректно отображаются на разных экранах.
Альтернативное решение с плагином
Если не хотите писать код, можно использовать плагин WPRemark от WPSHOP, который поддерживает отзывы с AJAX-подгрузкой, рейтингами и кастомизацией под GeneratePress.
Он позволяет быстро и удобно организовать отзывы, включая динамическую подгрузку, без необходимости программирования.
Итоги
Реализация динамических отзывов с подгрузкой в GeneratePress — это не только улучшение производительности, но и повышение удобства для посетителей сайта. Используя собственный тип записи, AJAX-запросы и шаблоны, вы легко создадите современный и быстрый блок с отзывами.
Если хотите сэкономить время, обратите внимание на готовые решения с плагинами от WPSHOP, которые отлично интегрируются с GeneratePress и обеспечивают расширенный функционал.