Как создать динамические отзывы с подсчетом рейтинга в Elementor для WordPress

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

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

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

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

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

Для начала зарегистрируем кастомный тип записей «Отзывы» и добавим пользовательское поле рейтинга. Это можно сделать с помощью плагина Advanced Custom Fields (ACF) или вручную через functions.php.

Регистрация кастомного типа записей

function wpelementor_register_reviews_cpt() {
    $labels = array(
        'name' => 'Отзывы',
        'singular_name' => 'Отзыв',
        'menu_name' => 'Отзывы',
        'add_new' => 'Добавить отзыв',
        'add_new_item' => 'Добавить новый отзыв',
        'edit_item' => 'Редактировать отзыв'
    );
    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => false,
        'supports' => array('title', 'editor', 'author'),
        'show_in_rest' => true
    );
    register_post_type('wpelementor_review', $args);
}
add_action('init', 'wpelementor_register_reviews_cpt');

Далее добавим поле рейтинга. Если вы используете ACF, создайте поле типа «Число» с именем rating. Если без плагина, можно использовать метаполя.

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

function wpelementor_add_rating_meta_box() {
    add_meta_box('wpelementor_rating_meta', 'Рейтинг отзыва', 'wpelementor_rating_meta_box_callback', 'wpelementor_review', 'side');
}
add_action('add_meta_boxes', 'wpelementor_add_rating_meta_box');

function wpelementor_rating_meta_box_callback($post) {
    wp_nonce_field('wpelementor_save_rating_data', 'wpelementor_rating_meta_box_nonce');
    $value = get_post_meta($post->ID, '_wpelementor_rating', true);
    echo '<label for="wpelementor_rating_field">Рейтинг (1-5): </label>';
    echo '<input type="number" id="wpelementor_rating_field" name="wpelementor_rating_field" min="1" max="5" value="' . esc_attr($value) . '" size="4" />';
}

function wpelementor_save_rating_data($post_id) {
    if (!isset($_POST['wpelementor_rating_meta_box_nonce']) || !wp_verify_nonce($_POST['wpelementor_rating_meta_box_nonce'], 'wpelementor_save_rating_data')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['wpelementor_rating_field'])) {
        $rating = intval($_POST['wpelementor_rating_field']);
        if ($rating < 1) $rating = 1;
        if ($rating > 5) $rating = 5;
        update_post_meta($post_id, '_wpelementor_rating', $rating);
    }
}
add_action('save_post', 'wpelementor_save_rating_data');

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

Для вывода отзывов в Elementor создадим кастомный виджет или используем виджет «Шорткод» с нашим шорткодом. Ниже пример шорткода, который выводит список отзывов и средний рейтинг.

function wpelementor_reviews_shortcode() {
    $args = array(
        'post_type' => 'wpelementor_review',
        'posts_per_page' => -1
    );
    $query = new WP_Query($args);
    $total_rating = 0;
    $count = $query->found_posts;
    $output = '<div class="wpelementor-reviews">';
    if ($count > 0) {
        while ($query->have_posts()) {
            $query->the_post();
            $rating = intval(get_post_meta(get_the_ID(), '_wpelementor_rating', true));
            $total_rating += $rating;
            $output .= '<div class="wpelementor-review-item">';
            $output .= '<h3>' . get_the_title() . '</h3>';
            $output .= '<p>' . get_the_content() . '</p>';
            $output .= '<p>Рейтинг: ' . str_repeat('★', $rating) . str_repeat('☆', 5 - $rating) . '</p>';
            $output .= '</div>';
        }
        wp_reset_postdata();
        $average = round($total_rating / $count, 1);
        $output = '<h2>Средний рейтинг: ' . $average . ' из 5</h2>' . $output;
    } else {
        $output = '<p>Отзывов пока нет.</p>';
    }
    $output .= '</div>';
    return $output;
}
add_shortcode('wpelementor_reviews', 'wpelementor_reviews_shortcode');

Добавьте шорткод [wpelementor_reviews] в любой блок Elementor через виджет «Шорткод» для вывода отзывов и среднего рейтинга.

Реализация AJAX-подгрузки и обновления рейтинга

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

Добавление формы отзыва

function wpelementor_review_form_shortcode() {
    ob_start();
    ?>
    <form id="wpelementor-review-form">
        <label>Имя:<br><input type="text" name="reviewer_name" required></label><br>
        <label>Отзыв:<br><textarea name="review_content" required></textarea></label><br>
        <label>Рейтинг:<br>
            <select name="review_rating" required>
                <option value="5">5</option>
                <option value="4">4</option>
                <option value="3">3</option>
                <option value="2">2</option>
                <option value="1">1</option>
            </select>
        </label><br>
        <input type="submit" value="Отправить отзыв">
    </form>
    <div id="wpelementor-review-message"></div>
    <script>
    jQuery(document).ready(function($) {
        $('#wpelementor-review-form').on('submit', function(e) {
            e.preventDefault();
            var data = {
                action: 'wpelementor_submit_review',
                reviewer_name: $(this).find('input[name="reviewer_name"]').val(),
                review_content: $(this).find('textarea[name="review_content"]').val(),
                review_rating: $(this).find('select[name="review_rating"]').val(),
                security: '<?php echo wp_create_nonce('wpelementor_review_nonce'); ?>'
            };
            $.post('<?php echo admin_url('admin-ajax.php'); ?>', data, function(response) {
                $('#wpelementor-review-message').html(response.data.message);
                if (response.success) {
                    // Обновляем отзывы
                    $.post('<?php echo admin_url('admin-ajax.php'); ?>', {action: 'wpelementor_get_reviews'}, function(list) {
                        $('.wpelementor-reviews').html(list);
                    });
                    $('#wpelementor-review-form')[0].reset();
                }
            });
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpelementor_review_form', 'wpelementor_review_form_shortcode');

Обработка AJAX-запросов в functions.php

function wpelementor_handle_submit_review() {
    check_ajax_referer('wpelementor_review_nonce', 'security');

    $name = sanitize_text_field($_POST['reviewer_name']);
    $content = sanitize_textarea_field($_POST['review_content']);
    $rating = intval($_POST['review_rating']);
    if ($rating < 1) $rating = 1;
    if ($rating > 5) $rating = 5;

    $new_review = array(
        'post_title' => $name,
        'post_content' => $content,
        'post_status' => 'pending', // можно 'publish' для мгновенного вывода
        'post_type' => 'wpelementor_review'
    );

    $post_id = wp_insert_post($new_review);
    if ($post_id) {
        update_post_meta($post_id, '_wpelementor_rating', $rating);
        wp_send_json_success(array('message' => 'Спасибо за отзыв! Он появится после модерации.'));
    } else {
        wp_send_json_error(array('message' => 'Ошибка при добавлении отзыва. Попробуйте позже.'));
    }
}
add_action('wp_ajax_wpelementor_submit_review', 'wpelementor_handle_submit_review');
add_action('wp_ajax_nopriv_wpelementor_submit_review', 'wpelementor_handle_submit_review');

function wpelementor_get_reviews_ajax() {
    // Используем тот же код, что и в шорткоде, чтобы вернуть обновленный список
    echo wpelementor_reviews_shortcode();
    wp_die();
}
add_action('wp_ajax_wpelementor_get_reviews', 'wpelementor_get_reviews_ajax');
add_action('wp_ajax_nopriv_wpelementor_get_reviews', 'wpelementor_get_reviews_ajax');

Оптимизация и безопасность

Обязательно добавляйте nonce для защиты AJAX-запросов от CSRF-атак. Используйте функции санитизации данных и проверяйте права пользователей, если необходимо.

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

Заключение

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

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