Как создать уникальный отзывный блок в WordPress с помощью плагинов и кода

Зачем нужен отзывный блок на сайте WordPress

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

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

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

Популярные плагины для отзывов

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

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

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

Пример настройки Site Reviews с кастомным шорткодом

После установки и активации плагина Site Reviews, добавьте новый отзыв в админке. Для вывода отзывов на страницу используйте шорткод:

[site_reviews_form assign_to="123" hide="title"]

где assign_to — ID страницы или записи, к которой привязываются отзывы.

Чтобы кастомизировать вывод, можно создать собственный шаблон в теме, скопировав файл плагина из /wp-content/plugins/site-reviews/templates/ в папку темы и изменив его под свои нужды.

Создание отзывного блока с нуля с помощью кода WordPress

Регистрация пользовательского типа записи для отзывов

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

function wptips_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' => 'В корзине отзывов не найдено',
        'menu_name' => 'Отзывы'
    );

    $args = array(
        'labels' => $labels,
        'public' => true,
        'has_archive' => false,
        'supports' => array('title', 'editor', 'custom-fields'),
        'menu_icon' => 'dashicons-testimonial',
        'show_in_rest' => true
    );

    register_post_type('wptips_review', $args);
}
add_action('init', 'wptips_register_review_post_type');

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

Создание метаполей для имени автора и рейтинга

Отзывы обычно содержат имя автора и рейтинг. Добавим метабоксы для удобного ввода этих данных.

function wptips_add_review_metaboxes() {
    add_meta_box('wptips_review_details', 'Детали отзыва', 'wptips_review_details_callback', 'wptips_review', 'normal', 'high');
}
add_action('add_meta_boxes', 'wptips_add_review_metaboxes');

function wptips_review_details_callback($post) {
    wp_nonce_field('wptips_review_save', 'wptips_review_nonce');

    $author = get_post_meta($post->ID, '_wptips_review_author', true);
    $rating = get_post_meta($post->ID, '_wptips_review_rating', true);

    echo '<p><label for="wptips_review_author">Имя автора:</label><br />';
    echo '<input type="text" id="wptips_review_author" name="wptips_review_author" value="'.esc_attr($author).'" size="25" /></p>';

    echo '<p><label for="wptips_review_rating">Рейтинг (1-5):</label><br />';
    echo '<select id="wptips_review_rating" name="wptips_review_rating">';
    for ($i=1; $i<=5; $i++) {
        $selected = selected($rating, $i, false);
        echo "<option value=\"$i\" $selected>$i</option>";
    }
    echo '</select></p>';
}

function wptips_review_save_postdata($post_id) {
    if (!isset($_POST['wptips_review_nonce']) || !wp_verify_nonce($_POST['wptips_review_nonce'], 'wptips_review_save')) {
        return;
    }
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    if (isset($_POST['wptips_review_author'])) {
        update_post_meta($post_id, '_wptips_review_author', sanitize_text_field($_POST['wptips_review_author']));
    }
    if (isset($_POST['wptips_review_rating'])) {
        $rating = intval($_POST['wptips_review_rating']);
        if ($rating >= 1 && $rating <= 5) {
            update_post_meta($post_id, '_wptips_review_rating', $rating);
        }
    }
}
add_action('save_post', 'wptips_review_save_postdata');

Вывод отзывов на сайте через шорткод

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

function wptips_review_shortcode($atts) {
    $atts = shortcode_atts(array('count' => 5), $atts, 'wptips_reviews');

    $args = array(
        'post_type' => 'wptips_review',
        'posts_per_page' => intval($atts['count']),
        'post_status' => 'publish',
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) {
        return '<p>Отзывы отсутствуют.</p>';
    }

    $output = '<div class="wptips-reviews">';
    while ($query->have_posts()) {
        $query->the_post();
        $author = get_post_meta(get_the_ID(), '_wptips_review_author', true);
        $rating = intval(get_post_meta(get_the_ID(), '_wptips_review_rating', true));
        $content = get_the_content();

        $output .= '<div class="wptips-review-item">';
        $output .= '<div class="wptips-review-content">'.wpautop($content).'</div>';
        $output .= '<div class="wptips-review-author">— '.esc_html($author).'</div>';
        $output .= '<div class="wptips-review-rating">'.wptips_get_stars_html($rating).'</div>';
        $output .= '</div>';
    }
    wp_reset_postdata();
    $output .= '</div>';

    return $output;
}
add_shortcode('wptips_reviews', 'wptips_review_shortcode');

function wptips_get_stars_html($rating) {
    $full_star = '★';
    $empty_star = '☆';
    $stars = str_repeat('<span class="star full">' . $full_star . '</span>', $rating);
    $stars .= str_repeat('<span class="star empty">' . $empty_star . '</span>', 5 - $rating);
    return '<div class="wptips-stars">' . $stars . '</div>';
}

Теперь в любом месте сайта можно вставить шорткод [wptips_reviews count="3"], чтобы вывести последние 3 отзыва.

Стилизация отзывного блока

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

.wptips-reviews {
    max-width: 700px;
    margin: 0 auto;
}
.wptips-review-item {
    border: 1px solid #ddd;
    padding: 15px;
    margin-bottom: 20px;
    background: #f9f9f9;
    border-radius: 5px;
}
.wptips-review-author {
    font-weight: bold;
    margin-top: 10px;
    color: #333;
}
.wptips-stars {
    color: #f5a623;
    font-size: 18px;
    margin-top: 5px;
}
.star.full {
    color: #f5a623;
}
.star.empty {
    color: #ccc;
}

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

Интеграция с плагином Clearfy Pro для оптимизации отзывов

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

Clearfy Pro позволяет отключать ненужные REST API запросы, минимизировать CSS и JS, что улучшит время ответа и пользовательский опыт при работе с отзывным блоком.

Выводы и рекомендации

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

Для быстрого старта лучше использовать плагины Site Reviews или Strong Testimonials. Для полной кастомизации — создавать собственный тип записи и шорткод, как показано выше.

Оптимизировать работу отзывного блока поможет Clearfy Pro, доступный на wpshop.ru.