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

Автор: Георгий Захаров | Опубликовано: 08.12.2025

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

Почему стоит создавать отзывы с картинками самостоятельно

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

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

Создание типа записи «Отзыв» с поддержкой картинок

Первым делом создадим собственный тип записи (Custom Post Type) для отзывов. Это позволит вам удобно управлять отзывами через админ-панель WordPress.

Добавьте следующий код в файл functions.php вашей темы или в отдельный плагин:

function wpskins_register_reviews_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,
        'menu_position' => 20,
        'supports' => array('title', 'editor', 'thumbnail'),
        'menu_icon' => 'dashicons-testimonial',
        'show_in_rest' => true,
    );
    register_post_type('wpskins_review', $args);
}
add_action('init', 'wpskins_register_reviews_cpt');

Здесь мы создали тип записи с названием «Отзывы», который поддерживает заголовок, содержимое и миниатюру — картинку отзыва.

Настройка пользовательских полей для дополнительной информации

Кроме текста и картинки, часто нужно добавить дополнительные поля, например имя автора, рейтинг и дату. Можно использовать плагин Advanced Custom Fields (ACF) или создать поля вручную. Ниже пример ручного добавления поля рейтинга:

function wpskins_add_rating_meta_box() {
    add_meta_box('wpskins_rating_meta', 'Рейтинг', 'wpskins_rating_meta_box_callback', 'wpskins_review', 'side');
}
add_action('add_meta_boxes', 'wpskins_add_rating_meta_box');

function wpskins_rating_meta_box_callback($post) {
    wp_nonce_field('wpskins_save_rating_meta', 'wpskins_rating_meta_nonce');
    $value = get_post_meta($post->ID, '_wpskins_rating', true);
    echo '<label for="wpskins_rating_field">Рейтинг (от 1 до 5):</label> ';
    echo '<input type="number" id="wpskins_rating_field" name="wpskins_rating_field" min="1" max="5" value="' . esc_attr($value) . '" />';
}

function wpskins_save_rating_meta($post_id) {
    if (!isset($_POST['wpskins_rating_meta_nonce'])) return;
    if (!wp_verify_nonce($_POST['wpskins_rating_meta_nonce'], 'wpskins_save_rating_meta')) return;
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) return;
    if (!current_user_can('edit_post', $post_id)) return;
    if (isset($_POST['wpskins_rating_field'])) {
        $rating = intval($_POST['wpskins_rating_field']);
        if ($rating < 1) $rating = 1;
        if ($rating > 5) $rating = 5;
        update_post_meta($post_id, '_wpskins_rating', $rating);
    }
}
add_action('save_post', 'wpskins_save_rating_meta');

Этот код добавляет боковую панель с полем рейтинга от 1 до 5 и сохраняет значение при сохранении отзыва.

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

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

function wpskins_display_reviews() {
    $args = array(
        'post_type' => 'wpskins_review',
        'posts_per_page' => 5,
        'orderby' => 'date',
        'order' => 'DESC'
    );
    $reviews = new WP_Query($args);
    if (!$reviews->have_posts()) {
        return '<p>Отзывы отсутствуют.</p>';
    }
    $output = '<div class="wpskins-reviews">';
    while ($reviews->have_posts()) {
        $reviews->the_post();
        $rating = get_post_meta(get_the_ID(), '_wpskins_rating', true);
        $output .= '<div class="wpskins-review-item">';
        if (has_post_thumbnail()) {
            $output .= get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class' => 'wpskins-review-img'));
        }
        $output .= '<h3 class="wpskins-review-title">' . get_the_title() . '</h3>';
        $output .= '<div class="wpskins-review-rating">' . wpskins_render_stars($rating) . '</div>';
        $output .= '<div class="wpskins-review-content">' . get_the_content() . '</div>';
        $output .= '</div>';
    }
    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}

function wpskins_render_stars($rating) {
    $full_star = '<span style="color:#f5c518;">★</span>';
    $empty_star = '<span style="color:#ccc;">☆</span>';
    $output = '';
    for ($i = 1; $i <= 5; $i++) {
        $output .= ($i <= $rating) ? $full_star : $empty_star;
    }
    return $output;
}

add_shortcode('wpskins_reviews', 'wpskins_display_reviews');

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

Советы по стилизации отзывов

Для более привлекательного вида добавьте CSS в файл стилей темы или в дополнительный CSS в настройках WordPress:

.wpskins-reviews {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.wpskins-review-item {
    border: 1px solid #ddd;
    padding: 15px;
    width: calc(33% - 20px);
    box-sizing: border-box;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}
.wpskins-review-img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 10px;
}
.wpskins-review-rating {
    font-size: 18px;
    margin-bottom: 10px;
}
@media(max-width: 768px) {
    .wpskins-review-item {
        width: 100%;
    }
}

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

Если вы хотите расширить функционал отзывов, рекомендую обратить внимание на следующие плагины:

Advanced Custom Fields (ACF) — для создания удобных и гибких полей, включая загрузку изображений;
WP Customer Reviews — простой плагин для сбора и отображения отзывов с поддержкой изображений;
Site Reviews — мощный плагин с возможностью модерирования, рейтингов и кастомных полей.

Однако если вам критична скорость и контроль, лучше использовать собственный код, как описано в статье.

Как обезопасить отзывы и избежать спама

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

Использовать Google reCAPTCHA при отправке отзывов;
Добавить проверку nonce в формах;
Модерировать отзывы перед публикацией (статус черновика или на утверждение);
Ограничить возможность добавления отзывов авторизованными пользователями.

Это поможет поддерживать качественный контент и избежать проблем с безопасностью.