Как создать уникальный отзывный блок в WordPress с помощью AJAX

Автор: Дарья Егорова | Опубликовано: 21.12.2025

В современных проектах на WordPress часто возникает необходимость добавить на сайт отзывный блок, который будет динамически обновляться без перезагрузки страницы. В этой статье мы подробно рассмотрим, как создать уникальный отзывный блок с использованием AJAX, что улучшит взаимодействие пользователя с сайтом и повысит конверсию.

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

AJAX — технология, позволяющая обмениваться данными с сервером без перезагрузки страницы. В случае отзывов это позволяет:

Добавлять новые отзывы без обновления страницы.
Фильтровать отзывы по рейтингу, дате или другим параметрам мгновенно.
Сохранять отзывы асинхронно, улучшая UX.

Это особенно актуально для сайтов, где отзывы играют важную роль, например, интернет-магазинов или сервисов.

Создание кастомного типа записи для отзывов

Для начала создадим собственный тип записи wpdigest_review. Это позволит удобно управлять отзывами через админку и выводить их на фронтенде.

<?php
function wpdigest_register_review_cpt() {
    $labels = [
        'name' => 'Отзывы',
        'singular_name' => 'Отзыв',
        'add_new_item' => 'Добавить новый отзыв',
        'edit_item' => 'Редактировать отзыв',
        'all_items' => 'Все отзывы',
    ];
    $args = [
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => ['title', 'editor', 'author', 'custom-fields'],
        'show_in_rest' => true,
    ];
    register_post_type('wpdigest_review', $args);
}
add_action('init', 'wpdigest_register_review_cpt');
?>

После добавления этого кода в functions.php или свой плагин вы получите новый раздел "Отзывы" в админке.

Создание формы добавления отзывов с AJAX

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

<form id="wpdigest-review-form">
    <input type="text" name="title" placeholder="Ваше имя" required />
    <textarea name="content" placeholder="Ваш отзыв" required></textarea>
    <input type="number" name="rating" min="1" max="5" placeholder="Рейтинг (1-5)" required />
    <button type="submit">Отправить отзыв</button>
</form>
<div id="wpdigest-review-message"></div>

Добавим JavaScript для обработки формы:

<script>
document.getElementById('wpdigest-review-form').addEventListener('submit', function(e) {
    e.preventDefault();
    var formData = new FormData(this);
    formData.append('action', 'wpdigest_submit_review');
    fetch('https://your-site-url/wp-admin/admin-ajax.php', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        var message = document.getElementById('wpdigest-review-message');
        if(data.success) {
            message.textContent = 'Спасибо за ваш отзыв!';
            this.reset();
            // Здесь можно добавить функцию обновления списка отзывов
        } else {
            message.textContent = 'Ошибка: ' + data.data;
        }
    })
    .catch(() => {
        document.getElementById('wpdigest-review-message').textContent = 'Ошибка при отправке.';
    });
});
</script>

Обработка AJAX-запроса в WordPress

Теперь создадим серверную часть, которая будет принимать и сохранять отзывы.

<?php
function wpdigest_handle_submit_review() {
    // Проверка nonce и прав
    if ( ! isset($_POST['title'], $_POST['content'], $_POST['rating']) ) {
        wp_send_json_error('Недостаточно данных');
    }
    $title = sanitize_text_field($_POST['title']);
    $content = sanitize_textarea_field($_POST['content']);
    $rating = intval($_POST['rating']);
    if($rating < 1 || $rating > 5) {
        wp_send_json_error('Рейтинг должен быть от 1 до 5');
    }
    $post_id = wp_insert_post([
        'post_type' => 'wpdigest_review',
        'post_title' => $title,
        'post_content' => $content,
        'post_status' => 'pending', // Для модерации
    ]);
    if(is_wp_error($post_id)) {
        wp_send_json_error('Ошибка при сохранении отзыва');
    }
    update_post_meta($post_id, 'wpdigest_rating', $rating);
    wp_send_json_success();
}
add_action('wp_ajax_wpdigest_submit_review', 'wpdigest_handle_submit_review');
add_action('wp_ajax_nopriv_wpdigest_submit_review', 'wpdigest_handle_submit_review');
?>

Обратите внимание, что отзывы сохраняются со статусом "ожидает модерации". Это позволит избежать спама.

Вывод отзывов с фильтром по рейтингу с помощью AJAX

Чтобы отзывы обновлялись динамически, создадим фильтр по рейтингу.

HTML для фильтра:

<select id="wpdigest-rating-filter">
    <option value="0">Все рейтинги</option>
    <option value="5">5 звезд</option>
    <option value="4">4 звезды и выше</option>
    <option value="3">3 звезды и выше</option>
</select>
<div id="wpdigest-reviews-list"></div>

JavaScript для загрузки отзывов по фильтру:

<script>
function wpdigest_load_reviews(rating = 0) {
    var data = new FormData();
    data.append('action', 'wpdigest_load_reviews');
    data.append('rating', rating);
    fetch('https://your-site-url/wp-admin/admin-ajax.php', {
        method: 'POST',
        body: data
    })
    .then(response => response.text())
    .then(html => {
        document.getElementById('wpdigest-reviews-list').innerHTML = html;
    });
}
document.getElementById('wpdigest-rating-filter').addEventListener('change', function() {
    wpdigest_load_reviews(this.value);
});
// Загрузка отзывов по умолчанию
wpdigest_load_reviews();
</script>

PHP-функция для выборки отзывов:

<?php
function wpdigest_load_reviews_callback() {
    $rating = isset($_POST['rating']) ? intval($_POST['rating']) : 0;
    $meta_query = [];
    if($rating > 0) {
        $meta_query[] = [
            'key' => 'wpdigest_rating',
            'value' => $rating,
            'compare' => '>=',
            'type' => 'NUMERIC'
        ];
    }
    $args = [
        'post_type' => 'wpdigest_review',
        'post_status' => 'publish',
        'meta_query' => $meta_query,
        'orderby' => 'date',
        'order' => 'DESC',
        'posts_per_page' => 10,
    ];
    $query = new WP_Query($args);
    if($query->have_posts()) {
        while($query->have_posts()) {
            $query->the_post();
            $rating_value = get_post_meta(get_the_ID(), 'wpdigest_rating', true);
            echo '<div class="wpdigest-review-item">';
            echo '<h4>' . esc_html(get_the_title()) . '</h4>';
            echo '<div>' . wp_kses_post(get_the_content()) . '</div>';
            echo '<div>Рейтинг: ' . intval($rating_value) . ' ⭐</div>';
            echo '</div>';
        }
        wp_reset_postdata();
    } else {
        echo '<p>Отзывов не найдено.</p>';
    }
    wp_die();
}
add_action('wp_ajax_wpdigest_load_reviews', 'wpdigest_load_reviews_callback');
add_action('wp_ajax_nopriv_wpdigest_load_reviews', 'wpdigest_load_reviews_callback');
?>

Советы по безопасности и производительности

При работе с AJAX важно учитывать:

Используйте wp_nonce_field и проверяйте nonce для защиты от CSRF.
Фильтруйте и экранируйте все входящие данные.
Используйте кэширование для часто запрашиваемых отзывов, чтобы снизить нагрузку.
Не забывайте про модерацию, чтобы избежать спама.

Для повышения удобства, можно интегрировать плагин Clearfy Pro, который поможет оптимизировать безопасность и ускорить сайт, или использовать WPRemark для расширенного управления отзывами и рейтингами с удобным интерфейсом.

Заключение

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

Рекомендуем для удобства использовать готовые решения от WPSHOP.RU, которые позволят сэкономить время и получить профессиональные инструменты.

Создание уникального отзывного блока в WordPress с AJAX