Отзывы с фотографиями значительно повышают доверие посетителей и улучшают конверсию сайта. В этой статье мы подробно рассмотрим, как реализовать систему отзывов с возможностью прикрепления фотографий в WordPress. Рассмотрим как использовать популярные плагины, так и создать собственное решение с помощью кода.
Почему отзывы с фотографиями важны для сайта на WordPress
Отзывы помогают повысить социальное доказательство и влияют на решение посетителя о покупке или использовании услуги. Когда к отзыву добавляется фото реального человека или товара, это усиливает доверие и увеличивает конверсию. Особенно это актуально для интернет-магазинов, сервисных сайтов, ресторанов и образовательных платформ.
WordPress из коробки не поддерживает отзывы с изображениями, поэтому нужно либо использовать плагины, либо писать кастомный функционал.
Использование плагинов для отзывов с фото
Плагин WP Customer Reviews
Один из популярных бесплатных плагинов для сбора отзывов с возможностью загрузки изображений.
- Простой в настройке
- Позволяет добавлять поля для загрузки фото
- Есть настройка модерации отзывов
Для установки:
wp plugin install wp-customer-reviews --activateЧтобы разрешить загрузку фото, нужно в настройках плагина включить соответствующую опцию.
Плагин Site Reviews
Более продвинутый плагин с возможностью отображения отзывов в разных стилях, поддержкой фото и рейтингов.
- Поддерживает шорткоды для вставки отзывов на страницы
- Есть виджеты и блоки для Gutenberg
- Можно настраивать поля для фото и комментариев
Установка:
wp plugin install site-reviews --activateКастомное решение: как сделать отзывы с фото своими силами
Если нужно точное управление функционалом, лучше написать собственный код. Создадим кастомный тип записи wphost_review с поддержкой метаполей для фото.
Регистрация кастомного типа записи
function wphost_register_review_cpt() {
$labels = [
'name' => 'Отзывы',
'singular_name' => 'Отзыв',
'add_new' => 'Добавить отзыв',
'add_new_item' => 'Добавить новый отзыв',
'edit_item' => 'Редактировать отзыв',
'all_items' => 'Все отзывы',
'menu_name' => 'Отзывы'
];
$args = [
'labels' => $labels,
'public' => true,
'supports' => ['title', 'editor', 'thumbnail'],
'has_archive' => true,
'menu_position' => 20,
'menu_icon' => 'dashicons-testimonial',
];
register_post_type('wphost_review', $args);
}
add_action('init', 'wphost_register_review_cpt');Включаем поддержку миниатюр (featured images) для возможности прикреплять фото к отзыву.
Добавление пользовательских полей
Для хранения дополнительной информации, например оценки, можно использовать метаполя. Добавим поле рейтинга:
function wphost_add_review_meta_box() {
add_meta_box('wphost_review_rating', 'Рейтинг', 'wphost_render_rating_meta_box', 'wphost_review', 'side');
}
add_action('add_meta_boxes', 'wphost_add_review_meta_box');
function wphost_render_rating_meta_box($post) {
$value = get_post_meta($post->ID, '_wphost_review_rating', true);
echo '<label>Оценка (1-5): </label>';
echo '<input type="number" name="wphost_review_rating" value="' . esc_attr($value) . '" min="1" max="5" />';
}
function wphost_save_review_meta($post_id) {
if (array_key_exists('wphost_review_rating', $_POST)) {
update_post_meta($post_id, '_wphost_review_rating', intval($_POST['wphost_review_rating']));
}
}
add_action('save_post', 'wphost_save_review_meta');Вывод отзывов с фотографиями на сайте
Для вывода отзывов создадим шорткод, который будет показывать отзывы с прикрепленными изображениями и рейтингом.
function wphost_reviews_shortcode($atts) {
$args = [
'post_type' => 'wphost_review',
'posts_per_page' => 5,
'post_status' => 'publish'
];
$reviews = new WP_Query($args);
if (!$reviews->have_posts()) {
return '<p>Отзывов пока нет.</p>';
}
$output = '<div class="wphost-reviews">';
while ($reviews->have_posts()) {
$reviews->the_post();
$rating = get_post_meta(get_the_ID(), '_wphost_review_rating', true);
$thumb = get_the_post_thumbnail(get_the_ID(), 'thumbnail');
$output .= '<div class="wphost-review-item">';
if ($thumb) {
$output .= '<div class="wphost-review-photo">' . $thumb . '</div>';
}
$output .= '<h3>' . get_the_title() . '</h3>';
$output .= '<div class="wphost-review-rating">Рейтинг: ' . intval($rating) . ' / 5</div>';
$output .= '<div class="wphost-review-content">' . get_the_content() . '</div>';
$output .= '</div>';
}
wp_reset_postdata();
$output .= '</div>';
return $output;
}
add_shortcode('wphost_reviews', 'wphost_reviews_shortcode');Чтобы вывести отзывы вместе с фото и рейтингом, добавьте шорткод [wphost_reviews] в нужное место сайта.
Как разрешить пользователям добавлять отзывы с фото с фронтенда
Для сбора отзывов с фото от посетителей нужно сделать форму на сайте. Это можно реализовать с помощью плагинов, например, WPForms (платный) или создать форму самостоятельно.
Пример простой формы для загрузки отзывов с фото (без плагинов)
В теме добавьте код обработки и форму:
function wphost_handle_review_submission() {
if ('POST' === $_SERVER['REQUEST_METHOD'] && !empty($_POST['wphost_review_nonce']) && wp_verify_nonce($_POST['wphost_review_nonce'], 'wphost_submit_review')) {
$title = sanitize_text_field($_POST['wphost_review_title']);
$content = sanitize_textarea_field($_POST['wphost_review_content']);
$rating = intval($_POST['wphost_review_rating']);
$new_post = [
'post_title' => $title,
'post_content' => $content,
'post_type' => 'wphost_review',
'post_status' => 'pending'
];
$post_id = wp_insert_post($new_post);
if ($post_id) {
update_post_meta($post_id, '_wphost_review_rating', $rating);
if (!empty($_FILES['wphost_review_photo']['name'])) {
require_once(ABSPATH . 'wp-admin/includes/file.php');
$uploaded = wp_handle_upload($_FILES['wphost_review_photo'], ['test_form' => false]);
if (!isset($uploaded['error'])) {
$filename = $uploaded['file'];
$filetype = wp_check_filetype(basename($filename), null);
$attachment = [
'post_mime_type' => $filetype['type'],
'post_title' => sanitize_file_name(basename($filename)),
'post_content' => '',
'post_status' => 'inherit'
];
$attach_id = wp_insert_attachment($attachment, $filename, $post_id);
require_once(ABSPATH . 'wp-admin/includes/image.php');
$attach_data = wp_generate_attachment_metadata($attach_id, $filename);
wp_update_attachment_metadata($attach_id, $attach_data);
set_post_thumbnail($post_id, $attach_id);
}
}
echo '<p>Спасибо за ваш отзыв! После модерации он появится на сайте.</p>';
}
}
}
add_action('template_redirect', 'wphost_handle_review_submission');
function wphost_review_form() {
ob_start();
?>
<form method="post" enctype="multipart/form-data">
<label>Заголовок отзыва:</label><br>
<input type="text" name="wphost_review_title" required><br>
<label>Текст отзыва:</label><br>
<textarea name="wphost_review_content" required></textarea><br>
<label>Рейтинг (1-5):</label><br>
<input type="number" name="wphost_review_rating" min="1" max="5" required><br>
<label>Фото:</label><br>
<input type="file" name="wphost_review_photo" accept="image/*"><br>
<input type="hidden" name="wphost_review_nonce" value="<?php echo wp_create_nonce('wphost_submit_review'); ?>">
<input type="submit" value="Отправить отзыв">
</form>
<?php
return ob_get_clean();
}
// Используйте шорткод [wphost_review_form] чтобы вывести форму в любом месте сайта
add_shortcode('wphost_review_form', 'wphost_review_form');Этот код создает форму для отправки отзывов с фото. После отправки отзыв уходит на модерацию (статус pending), чтобы администратор мог проверить содержимое.
Заключение
Реализация отзывов с фотографиями в WordPress — задача вполне решаемая как с помощью готовых плагинов, так и собственных решений. Плагины позволяют быстро запустить функционал, но кастомный код дает полный контроль и гибкость. Благодаря подробным примерам кода и рекомендациям вы сможете сделать удобную и надежную систему отзывов с фото для своего сайта.
Для расширенного управления отзывами и интеграции с другими сервисами рекомендуем обратить внимание на плагины и темы от WPGShop.