Как сделать отзывы с оценкой и фотографиями в WordPress: пошаговое руководство

Автор: Олеся Волкова | Опубликовано: 03.01.2026

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

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

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

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

Использование плагинов для отзывов с рейтингом и фото

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

1. WP Customer Reviews

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

Преимущества:

Легко настраивается;
Поддержка рейтингов;
Возможность модерировать отзывы.

Минусы — встроенная загрузка фото требует дополнительного кода или интеграций.

2. Site Reviews

Очень гибкий и современный плагин с возможностью добавлять фото к отзывам через дополнительные настройки или расширения. Поддерживает вывод отзывов в виде шорткодов и виджетов.

3. WP Remark

Если вы уже используете WP Remark на wpquiz.ru, можно расширить его функционал для отзывов, добавив кастомные поля для оценки и загрузки фотографий.

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

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

Регистрация кастомного типа записи "Отзыв" и мета-полей

<?php
// Функция регистрации типа записи отзывов для wpquiz
function wpquiz_register_review_post_type() {
    $labels = array(
        'name'               => 'Отзывы',
        'singular_name'      => 'Отзыв',
        'add_new'            => 'Добавить отзыв',
        'add_new_item'       => 'Добавить новый отзыв',
        'edit_item'          => 'Редактировать отзыв',
        'new_item'           => 'Новый отзыв',
        'view_item'          => 'Просмотреть отзыв',
        'search_items'       => 'Поиск отзывов',
        'not_found'          => 'Отзывы не найдены',
        'not_found_in_trash' => 'Отзывы не найдены в корзине',
    );

    $args = array(
        'labels'             => $labels,
        'public'             => true,
        'has_archive'        => true,
        'supports'           => array('title', 'editor', 'author'),
        'show_in_rest'       => true,
        'menu_position'      => 20,
        'menu_icon'          => 'dashicons-format-chat',
    );

    register_post_type('wpquiz_review', $args);
}
add_action('init', 'wpquiz_register_review_post_type');

Далее создадим мета-поля для оценки и загрузки фото. Для этого используем add_meta_box и сохраняем данные при сохранении записи.

Добавление мета-боксов для рейтинга и фотографии

<?php
function wpquiz_add_review_metaboxes() {
    add_meta_box('wpquiz_review_rating', 'Рейтинг от 1 до 5', 'wpquiz_review_rating_metabox', 'wpquiz_review', 'side', 'default');
    add_meta_box('wpquiz_review_photo', 'Фотография', 'wpquiz_review_photo_metabox', 'wpquiz_review', 'normal', 'default');
}
add_action('add_meta_boxes', 'wpquiz_add_review_metaboxes');

function wpquiz_review_rating_metabox($post) {
    $rating = get_post_meta($post->ID, '_wpquiz_review_rating', true);
    echo '<label>Рейтинг:</label> <select name="wpquiz_review_rating">';
    for ($i = 1; $i <= 5; $i++) {
        $selected = ($rating == $i) ? 'selected' : '';
        echo "<option value=\"$i\" $selected>$i</option>";
    }
    echo '</select>';
}

function wpquiz_review_photo_metabox($post) {
    $photo_id = get_post_meta($post->ID, '_wpquiz_review_photo_id', true);
    $photo_url = $photo_id ? wp_get_attachment_url($photo_id) : '';
    echo '<input type="hidden" id="wpquiz_review_photo_id" name="wpquiz_review_photo_id" value="'.esc_attr($photo_id).'" />';
    echo '<img id="wpquiz_review_photo_preview" src="'.esc_url($photo_url).'" style="max-width:100%;display:block;margin-bottom:10px;" />';
    echo '<button type="button" class="button" id="wpquiz_upload_photo_button">Загрузить фото</button>';
    echo '<button type="button" class="button" id="wpquiz_remove_photo_button">Удалить фото</button>';
    // JS для загрузки и удаления фото добавим ниже
}

// Добавим JS в админку для загрузки фото
function wpquiz_admin_scripts($hook) {
    if ('post.php' != $hook && 'post-new.php' != $hook) {
        return;
    }
    global $post;
    if ('wpquiz_review' != $post->post_type) {
        return;
    }
    wp_enqueue_media();
    wp_enqueue_script('wpquiz-admin-js', get_template_directory_uri() . '/js/wpquiz-admin.js', array('jquery'), null, true);
}
add_action('admin_enqueue_scripts', 'wpquiz_admin_scripts');

// Сохраняем данные
function wpquiz_save_review_meta($post_id) {
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (isset($_POST['wpquiz_review_rating'])) {
        update_post_meta($post_id, '_wpquiz_review_rating', intval($_POST['wpquiz_review_rating']));
    }
    if (isset($_POST['wpquiz_review_photo_id'])) {
        update_post_meta($post_id, '_wpquiz_review_photo_id', intval($_POST['wpquiz_review_photo_id']));
    }
}
add_action('save_post', 'wpquiz_save_review_meta');

В отдельном файле wpquiz-admin.js подключаем скрипт загрузки фото через медиабиблиотеку:

jQuery(document).ready(function($) {
    var frame;
    $('#wpquiz_upload_photo_button').on('click', function(e) {
        e.preventDefault();
        if (frame) {
            frame.open();
            return;
        }
        frame = wp.media({
            title: 'Выберите или загрузите фото',
            button: { text: 'Выбрать' },
            multiple: false
        });
        frame.on('select', function() {
            var attachment = frame.state().get('selection').first().toJSON();
            $('#wpquiz_review_photo_id').val(attachment.id);
            $('#wpquiz_review_photo_preview').attr('src', attachment.url);
        });
        frame.open();
    });
    $('#wpquiz_remove_photo_button').on('click', function(e) {
        e.preventDefault();
        $('#wpquiz_review_photo_id').val('');
        $('#wpquiz_review_photo_preview').attr('src', '');
    });
});

Вывод отзывов с рейтингом и фотографиями на сайте

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

<?php
function wpquiz_reviews_shortcode($atts) {
    $args = array(
        'post_type' => 'wpquiz_review',
        'posts_per_page' => 10,
        'post_status' => 'publish',
    );
    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Отзывы пока отсутствуют.</p>';
    }
    $output = '<div class="wpquiz-reviews">';
    while ($query->have_posts()) {
        $query->the_post();
        $rating = intval(get_post_meta(get_the_ID(), '_wpquiz_review_rating', true));
        $photo_id = get_post_meta(get_the_ID(), '_wpquiz_review_photo_id', true);
        $photo_url = $photo_id ? wp_get_attachment_url($photo_id) : '';
        $output .= '<div class="wpquiz-review-item">';
        if ($photo_url) {
            $output .= '<div class="wpquiz-review-photo"><img src="'.esc_url($photo_url).'" alt="Фото отзыва" style="max-width:100px;"/></div>';
        }
        $output .= '<h3>'.get_the_title().'</h3>';
        $output .= '<div class="wpquiz-review-rating">' . wpquiz_render_stars($rating) . '</div>';
        $output .= '<div class="wpquiz-review-content">' . get_the_content() . '</div>';
        $output .= '</div>';
    }
    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}
add_shortcode('wpquiz_reviews', 'wpquiz_reviews_shortcode');

// Функция отрисовки звезд
function wpquiz_render_stars($count) {
    $stars = '';
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $count) {
            $stars .= '<span style="color:#FFD700;">★</span>'; // заполненная звезда
        } else {
            $stars .= '<span style="color:#ccc;">★</span>'; // пустая звезда
        }
    }
    return $stars;
}

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

Дополнительные советы по безопасности и удобству

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

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

Заключение

Создание отзывов с рейтингом и фотографиями на WordPress — задача, которую можно решить как с помощью готовых плагинов, так и через собственные разработки. Используя приведённые примеры кода, вы сможете адаптировать систему под свои нужды и получить удобный инструмент для взаимодействия с пользователями.