Функционал для отзывов с оценками в WordPress: создание и настройка

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

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

Первым шагом будет регистрация нового типа записей — review. Это позволит отделить отзывы от стандартных постов и страниц, а также удобно управлять ими в админке.

function wpexperts_register_review_cpt() {
    $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_icon' => 'dashicons-testimonial',
    );
    register_post_type('review', $args);
}
add_action('init', 'wpexperts_register_review_cpt');

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

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

Чтобы хранить оценку, добавим метабокс с числовым полем (например, от 1 до 5). Для этого используем хук add_meta_boxes и сохраняем данные при сохранении поста.

function wpexperts_add_rating_meta_box() {
    add_meta_box(
        'wpexperts_review_rating',
        'Оценка отзыва',
        'wpexperts_render_rating_meta_box',
        'review',
        'side',
        'default'
    );
}
add_action('add_meta_boxes', 'wpexperts_add_rating_meta_box');

function wpexperts_render_rating_meta_box($post) {
    wp_nonce_field('wpexperts_save_rating_meta', 'wpexperts_rating_nonce');
    $value = get_post_meta($post->ID, '_wpexperts_review_rating', true);
    echo '<label for="wpexperts_review_rating_field">Оценка (1-5): </label>';
    echo '<input type="number" id="wpexperts_review_rating_field" name="wpexperts_review_rating_field" min="1" max="5" value="' . esc_attr($value) . '" style="width: 100%;" />';
}

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

Этот код добавляет удобное поле для оценки в редактор отзывов и сохраняет значение в метаданных.

Вывод отзывов с оценками на фронтенде и стилизация

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

function wpexperts_reviews_list_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5
    ), $atts, 'wpexperts_reviews');

    $query = new WP_Query(array(
        'post_type' => 'review',
        'posts_per_page' => intval($atts['count']),
        'orderby' => 'date',
        'order' => 'DESC'
    ));

    if (!$query->have_posts()) {
        return '<p>Отзывов пока нет.</p>';
    }

    $output = '<div class="wpexperts-reviews-list">';
    while ($query->have_posts()) {
        $query->the_post();
        $rating = get_post_meta(get_the_ID(), '_wpexperts_review_rating', true);
        $rating = intval($rating);
        $stars = wpexperts_render_stars($rating);
        $output .= '<div class="wpexperts-review-item">';
        $output .= '<h3 class="wpexperts-review-title">' . get_the_title() . '</h3>';
        $output .= '<div class="wpexperts-review-rating">' . $stars . '</div>';
        $output .= '<div class="wpexperts-review-content">' . get_the_content() . '</div>';
        $output .= '</div>';
    }
    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}
add_shortcode('wpexperts_reviews', 'wpexperts_reviews_list_shortcode');

function wpexperts_render_stars($rating) {
    $stars_html = '';
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $rating) {
            $stars_html .= '⭐';
        } else {
            $stars_html .= '☆';
        }
    }
    return '<span class="wpexperts-stars">' . $stars_html . '</span>';
}

Для стилизации можно добавить CSS в файл темы или через кастомайзер:

.wpexperts-reviews-list { max-width: 600px; margin: 20px auto; font-family: Arial, sans-serif; }
.wpexperts-review-item { border-bottom: 1px solid #ddd; padding: 15px 0; }
.wpexperts-review-title { margin: 0 0 5px; font-size: 18px; color: #222; }
.wpexperts-review-rating { font-size: 20px; color: #f5a623; margin-bottom: 10px; }
.wpexperts-review-content { font-size: 16px; color: #555; }

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

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

HTML и JavaScript формы

Создадим шорткод для формы:

function wpexperts_review_form_shortcode() {
    ob_start();
    ?>
    <form id="wpexperts-review-form" method="post">
        <p><label for="review_title">Заголовок отзыва:</label><br>
        <input type="text" id="review_title" name="review_title" required></p>

        <p><label for="review_content">Текст отзыва:</label><br>
        <textarea id="review_content" name="review_content" rows="5" required></textarea></p>

        <p><label for="review_rating">Оценка (1-5):</label><br>
        <input type="number" id="review_rating" name="review_rating" min="1" max="5" required></p>

        <p><button type="submit">Отправить отзыв</button></p>
    </form>
    <div id="wpexperts-review-message"></div>
    <script>
    document.getElementById('wpexperts-review-form').addEventListener('submit', function(e) {
        e.preventDefault();
        var form = e.target;
        var data = new FormData(form);
        data.append('action', 'wpexperts_submit_review');
        fetch('<?php echo admin_url('admin-ajax.php'); ?>', {
            method: 'POST',
            credentials: 'same-origin',
            body: data
        })
        .then(response => response.json())
        .then(json => {
            var message = document.getElementById('wpexperts-review-message');
            if (json.success) {
                message.innerHTML = '<p style="color:green;">Отзыв успешно отправлен и будет опубликован после проверки.</p>';
                form.reset();
            } else {
                message.innerHTML = '<p style="color:red;">Ошибка: ' + json.data + '</p>';
            }
        })
        .catch(() => {
            document.getElementById('wpexperts-review-message').innerHTML = '<p style="color:red;">Ошибка отправки запроса.</p>';
        });
    });
    </script>
    <?php
    return ob_get_clean();
}
add_shortcode('wpexperts_review_form', 'wpexperts_review_form_shortcode');

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

function wpexperts_handle_review_submission() {
    if (!isset($_POST['review_title'], $_POST['review_content'], $_POST['review_rating'])) {
        wp_send_json_error('Отсутствуют необходимые поля');
    }

    $title = sanitize_text_field($_POST['review_title']);
    $content = sanitize_textarea_field($_POST['review_content']);
    $rating = intval($_POST['review_rating']);
    if ($rating < 1 || $rating > 5) {
        wp_send_json_error('Оценка должна быть от 1 до 5');
    }

    $new_review = array(
        'post_title' => $title,
        'post_content' => $content,
        'post_type' => 'review',
        'post_status' => 'pending', // чтобы админ мог проверить отзыв
    );

    $post_id = wp_insert_post($new_review);
    if (is_wp_error($post_id)) {
        wp_send_json_error('Ошибка при создании отзыва');
    }

    update_post_meta($post_id, '_wpexperts_review_rating', $rating);

    wp_send_json_success('Отзыв отправлен на модерацию');
}
add_action('wp_ajax_wpexperts_submit_review', 'wpexperts_handle_review_submission');
add_action('wp_ajax_nopriv_wpexperts_submit_review', 'wpexperts_handle_review_submission');

Использование плагина Clearfy Pro для оптимизации отзывов

Если вы хотите быстро добавить функционал отзывов с оценками и расширенными настройками, обратите внимание на плагин Clearfy Pro. Он позволяет улучшать работу сайта, включая отзывы, оптимизировать безопасность и управлять метаданными.

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

Итоги и рекомендации по внедрению отзывов с оценками

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

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

Возможно, вам пригодится Clearfy Pro для дополнительной оптимизации и защиты сайта.