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

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

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

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

• WPRemark — мощный плагин для отзывов с множеством настроек, включая загрузку изображений и рейтинги.
• Site Reviews — популярный бесплатный плагин с расширениями для фото и рейтингов.
• WP Customer Reviews — простой в использовании, позволяет добавлять фото и звёздочные оценки.

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

Создание пользовательской формы отзывов с загрузкой фото и рейтингом

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

<?php
function wpquizru_render_review_form() {
    if (isset($_POST['wpquizru_review_nonce']) && wp_verify_nonce($_POST['wpquizru_review_nonce'], 'wpquizru_submit_review')) {
        $name = sanitize_text_field($_POST['wpquizru_name']);
        $email = sanitize_email($_POST['wpquizru_email']);
        $review_text = sanitize_textarea_field($_POST['wpquizru_review_text']);
        $rating = intval($_POST['wpquizru_rating']);

        $attachment_id = 0;
        if (!empty($_FILES['wpquizru_photo']['name'])) {
            require_once(ABSPATH . 'wp-admin/includes/file.php');
            $uploaded = wp_handle_upload($_FILES['wpquizru_photo'], array('test_form' => false));
            if (!isset($uploaded['error'])) {
                $attachment = array(
                    'post_mime_type' => $uploaded['type'],
                    'post_title' => sanitize_file_name($_FILES['wpquizru_photo']['name']),
                    'post_content' => '',
                    'post_status' => 'inherit'
                );
                $attachment_id = wp_insert_attachment($attachment, $uploaded['file']);
                require_once(ABSPATH . 'wp-admin/includes/image.php');
                $attach_data = wp_generate_attachment_metadata($attachment_id, $uploaded['file']);
                wp_update_attachment_metadata($attachment_id, $attach_data);
            }
        }

        $commentdata = array(
            'comment_post_ID' => get_the_ID(),
            'comment_author' => $name,
            'comment_author_email' => $email,
            'comment_content' => $review_text,
            'comment_type' => 'review',
            'comment_approved' => 0
        );

        $comment_id = wp_insert_comment($commentdata);

        if ($comment_id) {
            if ($rating > 0 && $rating <= 5) {
                add_comment_meta($comment_id, 'wpquizru_rating', $rating);
            }
            if ($attachment_id) {
                add_comment_meta($comment_id, 'wpquizru_photo', $attachment_id);
            }
            echo '<p>Спасибо за ваш отзыв! Он появится после модерации.</p>';
        }
    }

    ob_start();
    ?>
    <form method="post" enctype="multipart/form-data">
        <p><label>Имя (обязательно)<br><input type="text" name="wpquizru_name" required></label></p>
        <p><label>Email (обязательно)<br><input type="email" name="wpquizru_email" required></label></p>
        <p><label>Отзыв<br><textarea name="wpquizru_review_text" rows="5" required></textarea></label></p>
        <p><label>Оценка (1-5)<br><select name="wpquizru_rating" required>
            <option value="">Выберите оценку</option>
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
            <option value="5">5</option>
        </select></label></p>
        <p><label>Фото (необязательно)<br><input type="file" name="wpquizru_photo" accept="image/*"></label></p>
        <p><input type="hidden" name="wpquizru_review_nonce" value="<?php echo wp_create_nonce('wpquizru_submit_review'); ?>"></p>
        <p><input type="submit" value="Отправить отзыв"></p>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpquizru_review_form', 'wpquizru_render_review_form');
?>

Этот шорткод [wpquizru_review_form] можно вставить в любую страницу или запись, чтобы вывести форму для отзывов. Все отзывы сохраняются как комментарии с типом review, а рейтинг и фото — как метаданные комментария.

Отображение отзывов с оценками и фотографиями

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

<?php
function wpquizru_display_reviews() {
    $comments = get_comments(array(
        'post_id' => get_the_ID(),
        'status' => 'approve',
        'type' => 'review',
        'orderby' => 'comment_date',
        'order' => 'DESC'
    ));

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

    ob_start();
    echo '<div class="wpquizru-reviews">';
    foreach ($comments as $comment) {
        $rating = intval(get_comment_meta($comment->comment_ID, 'wpquizru_rating', true));
        $photo_id = get_comment_meta($comment->comment_ID, 'wpquizru_photo', true);
        $photo_url = $photo_id ? wp_get_attachment_url($photo_id) : '';

        echo '<div class="wpquizru-review" style="border:1px solid #ddd;padding:15px;margin-bottom:15px;">';
        echo '<p><strong>' . esc_html($comment->comment_author) . '</strong> – <em>' . esc_html($comment->comment_date) . '</em></p>';

        if ($rating > 0) {
            echo '<p>Оценка: ' . str_repeat('★', $rating) . str_repeat('☆', 5 - $rating) . '</p>';
        }

        echo '<p>' . esc_html($comment->comment_content) . '</p>';

        if ($photo_url) {
            echo '<p><img src="' . esc_url($photo_url) . '" alt="Фото отзыва" style="max-width:150px; height:auto;"></p>';
        }

        echo '</div>';
    }
    echo '</div>';

    return ob_get_clean();
}
add_shortcode('wpquizru_reviews', 'wpquizru_display_reviews');
?>

Вставьте шорткод [wpquizru_reviews] туда, где хотите вывести список отзывов с оценками и фотографиями.

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

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

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

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

Вывод

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