Отзывы с фотографиями в WordPress без плагинов: пошаговое руководство

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

Почему стоит создавать отзывы без плагинов

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

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

Основы: создание пользовательского типа записи для отзывов

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

function wpquiz_register_review_post_type() {
    $labels = array(
        'name' => 'Отзывы',
        'singular_name' => 'Отзыв',
        'add_new' => 'Добавить отзыв',
        'add_new_item' => 'Добавить новый отзыв',
        'edit_item' => 'Редактировать отзыв',
        'new_item' => 'Новый отзыв',
        'all_items' => 'Все отзывы',
        '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_position' => 20,
        'menu_icon' => 'dashicons-format-chat'
    );
    register_post_type('wpquiz_review', $args);
}
add_action('init', 'wpquiz_register_review_post_type');

Добавьте этот код в файл functions.php вашей темы или в отдельный плагин. После этого в админке появится новый раздел «Отзывы».

Добавляем возможность загрузки фотографий к отзывам

Чтобы прикреплять фото к отзыву, используем стандартное поле «Изображение записи» (featured image). Включите поддержку миниатюр, если у вас её нет:

add_theme_support('post-thumbnails', array('wpquiz_review'));

В админке при создании отзыва появится поле для установки фото. Но нам нужно сделать возможность загрузки фото прямо с фронтенда — чтобы пользователи сами добавляли отзывы с картинками.

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

Создадим шорткод [wpquiz_review_form], который выведет форму для ввода имени, текста отзыва и загрузки фотографии.

function wpquiz_review_form_shortcode() {
    if (!is_user_logged_in()) {
        return '<p>Пожалуйста, войдите, чтобы оставить отзыв.</p>';
    }

    if (isset($_POST['wpquiz_review_nonce']) && wp_verify_nonce($_POST['wpquiz_review_nonce'], 'wpquiz_review_action')) {
        $result = wpquiz_handle_review_submission();
        if (is_wp_error($result)) {
            echo '<p style="color:red;">' . esc_html($result->get_error_message()) . '</p>';
        } else {
            echo '<p style="color:green;">Спасибо за ваш отзыв!</p>';
        }
    }

    ob_start();
    ?>
    <form method="post" enctype="multipart/form-data">
        <p><label>Ваше имя:<br><input type="text" name="wpquiz_name" required></label></p>
        <p><label>Отзыв:<br><textarea name="wpquiz_review_text" rows="5" required></textarea></label></p>
        <p><label>Фото:<br><input type="file" name="wpquiz_review_image" accept="image/*" required></label></p>
        <p><input type="submit" value="Отправить отзыв"></p>
        <?php wp_nonce_field('wpquiz_review_action', 'wpquiz_review_nonce'); ?>
    </form>
    <?php
    return ob_get_clean();
}
add_shortcode('wpquiz_review_form', 'wpquiz_review_form_shortcode');

Обработка данных формы и загрузка изображения

Создаем функцию для сохранения отзыва и прикрепления изображения к записи:

function wpquiz_handle_review_submission() {
    if (empty($_POST['wpquiz_name']) || empty($_POST['wpquiz_review_text'])) {
        return new WP_Error('empty_fields', 'Заполните все обязательные поля.');
    }
    if (!isset($_FILES['wpquiz_review_image']) || $_FILES['wpquiz_review_image']['error'] !== UPLOAD_ERR_OK) {
        return new WP_Error('upload_error', 'Ошибка при загрузке изображения.');
    }

    $name = sanitize_text_field($_POST['wpquiz_name']);
    $review_text = sanitize_textarea_field($_POST['wpquiz_review_text']);

    $review_post = array(
        'post_title' => $name,
        'post_content' => $review_text,
        'post_status' => 'pending',
        'post_type' => 'wpquiz_review'
    );

    $post_id = wp_insert_post($review_post);

    if (!$post_id) {
        return new WP_Error('insert_error', 'Не удалось сохранить отзыв.');
    }

    require_once(ABSPATH . 'wp-admin/includes/file.php');
    require_once(ABSPATH . 'wp-admin/includes/media.php');
    require_once(ABSPATH . 'wp-admin/includes/image.php');

    $attachment_id = media_handle_upload('wpquiz_review_image', $post_id);

    if (is_wp_error($attachment_id)) {
        wp_delete_post($post_id, true);
        return new WP_Error('media_error', 'Ошибка при сохранении изображения.');
    }

    set_post_thumbnail($post_id, $attachment_id);

    return true;
}

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

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

Чтобы показать отзывы на странице, создадим шорткод [wpquiz_show_reviews]:

function wpquiz_show_reviews_shortcode() {
    $args = array(
        'post_type' => 'wpquiz_review',
        'post_status' => 'publish',
        'posts_per_page' => 10
    );
    $query = new WP_Query($args);

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

    ob_start();
    echo '<div class="wpquiz-reviews">';
    while ($query->have_posts()) {
        $query->the_post();
        $thumb = get_the_post_thumbnail(null, 'medium');
        echo '<div class="wpquiz-review-item">';
        if ($thumb) {
            echo '<div class="wpquiz-review-photo">' . $thumb . '</div>';
        }
        echo '<div class="wpquiz-review-content">';
        echo '<h3>' . esc_html(get_the_title()) . '</h3>';
        echo '<p>' . esc_html(get_the_content()) . '</p>';
        echo '</div>';
        echo '</div>';
    }
    echo '</div>';
    wp_reset_postdata();

    return ob_get_clean();
}
add_shortcode('wpquiz_show_reviews', 'wpquiz_show_reviews_shortcode');

Вы можете вставить шорткод [wpquiz_show_reviews] в любое место сайта, чтобы выводить опубликованные отзывы с фото.

Советы по безопасности и улучшению

Обязательно используйте проверку nonce (как в примере), чтобы избежать CSRF атак. Также рекомендуем модерировать отзывы перед публикацией, чтобы контролировать контент.

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

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

Заключение

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

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