Как сделать динамические отзывы с оценкой в WordPress

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

Почему динамические отзывы с рейтингом важны для сайта на WordPress

Отзывы с рейтингом позволяют не просто читать мнения пользователей, но и видеть количественную оценку качества товара, услуги или контента. Это существенно влияет на конверсию и поведенческие факторы. При этом важно, чтобы отзывы обновлялись динамически — без перезагрузки страницы, с возможностью сортировки, фильтрации и модерации.

Использование динамики даёт следующие преимущества:

• Улучшенный UX: отзыв можно оставить и увидеть сразу, без перезагрузки.
• Администратор получает удобную систему управления, фильтрации и анализа.
• Повышается вовлечённость пользователей.

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

Первый шаг — создать отдельный тип записи для отзывов, чтобы отделить их от обычных постов и страниц. Используем функцию register_post_type с префиксом hueman для уникальности.

function hueman_register_reviews_cpt() {
    $labels = array(
        'name' => 'Отзывы',
        'singular_name' => 'Отзыв',
        'add_new' => 'Добавить отзыв',
        'add_new_item' => 'Добавить новый отзыв',
        'edit_item' => 'Редактировать отзыв',
        'all_items' => 'Все отзывы',
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => true,
        'supports' => array('title', 'editor', 'author'),
        'show_in_rest' => true, // для поддержки Gutenberg и REST API
    );
    register_post_type('hueman_review', $args);
}
add_action('init', 'hueman_register_reviews_cpt');

Так мы создадим удобный отдельный раздел в админке для отзывов.

Добавление рейтинга через метаполя и кастомные поля

Для оценки добавим метаполе с числовым значением от 1 до 5. Используем API метаполей WordPress. Пример добавления метабокса:

function hueman_add_review_rating_metabox() {
    add_meta_box(
        'hueman_review_rating',
        'Рейтинг отзыва',
        'hueman_review_rating_metabox_callback',
        'hueman_review',
        'side'
    );
}
add_action('add_meta_boxes', 'hueman_add_review_rating_metabox');

function hueman_review_rating_metabox_callback($post) {
    $value = get_post_meta($post->ID, '_hueman_review_rating', true);
    if (!$value) $value = 5;
    echo '<label for="hueman_review_rating_field">Оценка (1-5): </label>';
    echo '<select id="hueman_review_rating_field" name="hueman_review_rating_field">';
    for ($i = 1; $i <= 5; $i++) {
        $selected = selected($value, $i, false);
        echo '<option value="' . $i . '" ' . $selected . '>' . $i . '</option>';
    }
    echo '</select>';
}

function hueman_save_review_rating($post_id) {
    if (array_key_exists('hueman_review_rating_field', $_POST)) {
        update_post_meta(
            $post_id,
            '_hueman_review_rating',
            intval($_POST['hueman_review_rating_field'])
        );
    }
}
add_action('save_post', 'hueman_save_review_rating');

Теперь у каждого отзыва есть рейтинг, который можно использовать в шаблонах.

Вывод отзывов с динамической загрузкой через AJAX

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

Шаг 1. JS код для запроса отзывов

jQuery(document).ready(function($) {
    let page = 1;
    $('#load-more-reviews').on('click', function() {
        page++;
        $.ajax({
            url: hueman_ajax_obj.ajax_url,
            type: 'POST',
            data: {
                action: 'hueman_load_reviews',
                page: page
            },
            success: function(response) {
                if (response) {
                    $('#reviews-container').append(response);
                } else {
                    $('#load-more-reviews').hide();
                }
            }
        });
    });
});

Шаг 2. PHP обработчик AJAX

function hueman_load_reviews_ajax() {
    $paged = isset($_POST['page']) ? intval($_POST['page']) : 1;
    $args = array(
        'post_type' => 'hueman_review',
        'posts_per_page' => 5,
        'paged' => $paged,
        'orderby' => 'date',
        'order' => 'DESC',
    );
    $query = new WP_Query($args);
    if ($query->have_posts()) {
        while ($query->have_posts()) {
            $query->the_post();
            $rating = get_post_meta(get_the_ID(), '_hueman_review_rating', true);
            echo '<div class="review-item">';
            echo '<h3>' . get_the_title() . '</h3>';
            echo '<div class="rating">' . hueman_render_stars($rating) . '</div>';
            echo '<div class="content">' . get_the_content() . '</div>';
            echo '</div>';
        }
    }
    wp_reset_postdata();
    wp_die();
}
add_action('wp_ajax_hueman_load_reviews', 'hueman_load_reviews_ajax');
add_action('wp_ajax_nopriv_hueman_load_reviews', 'hueman_load_reviews_ajax');

function hueman_render_stars($rating) {
    $output = '';
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $rating) {
            $output .= '⭐';
        } else {
            $output .= '☆';
        }
    }
    return $output;
}

Использование плагинов для расширения функционала отзывов

Если хочется готового решения с расширенными возможностями, рекомендую обратить внимание на следующие плагины:

• Clearfy Pro — оптимизация и расширение возможностей WordPress, в том числе улучшенное управление комментариями и отзывами.
• Expert Review — специализированный плагин для отзывов с рейтингами, поддержкой различных критериев, визуализаций и интеграций.

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

Интеграция отзывов с темой Hueman

Тема Hueman славится своей гибкостью и удобством кастомизации. Для интеграции отзывов с ней стоит создать шаблон архива для кастомного типа hueman_review и добавить стили под рейтинг.

Пример базового файла template-parts/content-hueman_review.php:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <header class="entry-header">
        <h2 class="entry-title"><?php the_title(); ?></h2>
        <div class="review-rating"><?php echo hueman_render_stars(get_post_meta(get_the_ID(), '_hueman_review_rating', true)); ?></div>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
</article>

Добавьте стили в style.css темы для красивого отображения рейтинга и отзывов.

Советы по безопасности и модерации отзывов

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

• Используйте nonce для AJAX запросов.
• Добавьте капчу при отправке отзывов, например с помощью плагина.
• Настройте модерацию комментариев или отзывов, чтобы публикация происходила только после одобрения.
• Регулярно обновляйте WordPress и плагины для защиты от уязвимостей.

Таким образом, динамическая система отзывов с рейтингом на WordPress не только улучшит UX, но и поможет повысить доверие к вашему сайту.