Создание динамических отзывов с оценками в Elementor для WordPress

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

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

Статичные отзывы — это просто текст и картинки, которые приходится вручную обновлять. Динамические отзывы позволяют хранить данные в базе как отдельные записи, используя кастомные типы записей и пользовательские поля. Это удобно для масштабирования и интеграции с Elementor, который отлично работает с динамическими данными.

Плюсы использования динамических отзывов:

• Легко добавлять новые отзывы через админку WordPress.
• Можно добавлять оценку по шкале и выводить звёздочки.
• Отзывы можно фильтровать и сортировать.
• Использовать отзыв в разных местах сайта без дублирования.

Создание кастомного типа записи для отзывов

Сначала создадим кастомный тип записи wpel_elementor_review, который будет хранить отзывы. Добавим пользовательские поля: имя автора, текст отзыва и оценку от 1 до 5.

<?php
function wpel_elementor_register_review_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' => false,
        'show_in_menu' => true,
        'supports' => array('title', 'editor'),
        'menu_icon' => 'dashicons-testimonial',
    );
    register_post_type('wpel_elementor_review', $args);
}
add_action('init', 'wpel_elementor_register_review_cpt');

После регистрации типа записи в админке появится меню «Отзывы».

Добавление пользовательских полей для оценки

Чтобы добавить оценку к отзыву, можно использовать плагин Advanced Custom Fields (ACF) или добавить мета-поле вручную. Рассмотрим вариант с ACF:

• Установите и активируйте плагин ACF.
• Создайте группу полей для типа записи «Отзывы».
• Добавьте поле «Оценка» (rating) с типом «Число», минимальное значение 1, максимальное 5.

Если не хотите использовать ACF, добавьте мета-поле программно:

<?php
function wpel_elementor_add_review_meta_box() {
    add_meta_box('wpel_elementor_review_rating', 'Оценка отзыва', 'wpel_elementor_review_rating_callback', 'wpel_elementor_review', 'side');
}
add_action('add_meta_boxes', 'wpel_elementor_add_review_meta_box');

function wpel_elementor_review_rating_callback($post) {
    $value = get_post_meta($post->ID, '_wpel_elementor_review_rating', true);
    echo '<label for="wpel_elementor_review_rating_field">Оценка (1-5): </label>';
    echo '<input type="number" id="wpel_elementor_review_rating_field" name="wpel_elementor_review_rating_field" value="'.esc_attr($value).'" min="1" max="5" style="width:100%;" />';
}

function wpel_elementor_save_review_meta($post_id) {
    if (array_key_exists('wpel_elementor_review_rating_field', $_POST)) {
        update_post_meta($post_id, '_wpel_elementor_review_rating', intval($_POST['wpel_elementor_review_rating_field']));
    }
}
add_action('save_post', 'wpel_elementor_save_review_meta');

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

Теперь нам нужно вывести отзывы на странице, созданной в Elementor. Для этого создадим шаблон архива отзывов или используем виджет «Шаблон» Elementor для вывода динамического контента.

Чтобы добавить динамическое отображение оценки в виде звёздочек, добавим функцию, которая преобразует число в HTML со звёздочками:

function wpel_elementor_get_rating_stars($post_id) {
    $rating = get_post_meta($post_id, '_wpel_elementor_review_rating', true);
    $rating = intval($rating);
    if ($rating < 1) $rating = 1;
    if ($rating > 5) $rating = 5;
    $stars = '';
    for ($i = 1; $i <= 5; $i++) {
        if ($i <= $rating) {
            $stars .= '<span style="color:#f5a623; font-size:18px;">★</span>'; // заполненная звезда
        } else {
            $stars .= '<span style="color:#ccc; font-size:18px;">★</span>'; // пустая звезда
        }
    }
    return $stars;
}

В Elementor используйте виджет «HTML» или «Текст» с динамическим шорткодом, чтобы выводить отзывы и оценки. Для этого зарегистрируем шорткод:

function wpel_elementor_reviews_shortcode($atts) {
    $args = array(
        'post_type' => 'wpel_elementor_review',
        'posts_per_page' => isset($atts['count']) ? intval($atts['count']) : 5,
        'orderby' => 'date',
        'order' => 'DESC',
    );
    $query = new WP_Query($args);
    if (!$query->have_posts()) return '<p>Отзывы не найдены.</p>';
    $output = '<div class="wpel-elementor-reviews">';
    while ($query->have_posts()) {
        $query->the_post();
        $rating_html = wpel_elementor_get_rating_stars(get_the_ID());
        $content = get_the_content();
        $author = get_the_title();
        $output .= '<div class="wpel-review-item" style="border:1px solid #ddd; padding:15px; margin-bottom:15px; border-radius:5px;">';
        $output .= '<h3 style="margin:0 0 5px 0;">'.esc_html($author).'</h3>';
        $output .= '<div class="wpel-review-rating" style="margin-bottom:10px;">'.$rating_html.'</div>';
        $output .= '<div class="wpel-review-content">'.wp_kses_post($content).'</div>';
        $output .= '</div>';
    }
    wp_reset_postdata();
    $output .= '</div>';
    return $output;
}
add_shortcode('wpel_elementor_reviews', 'wpel_elementor_reviews_shortcode');

Теперь на странице Elementor добавьте виджет «HTML» и вставьте шорткод:

[wpel_elementor_reviews count="3"]

Этот шорткод выведет 3 последних отзыва с оценками в виде звёзд.

Дополнительные советы по стилизации и улучшению функционала

Использование кастомных полей для имени и даты

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

Фильтрация отзывов по оценке

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

function wpel_elementor_reviews_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'min_rating' => 1,
    ), $atts, 'wpel_elementor_reviews');

    $meta_query = array(
        array(
            'key' => '_wpel_elementor_review_rating',
            'value' => intval($atts['min_rating']),
            'compare' => '>=',
            'type' => 'NUMERIC',
        )
    );

    $args = array(
        'post_type' => 'wpel_elementor_review',
        'posts_per_page' => intval($atts['count']),
        'orderby' => 'date',
        'order' => 'DESC',
        'meta_query' => $meta_query,
    );

    $query = new WP_Query($args);
    if (!$query->have_posts()) return '<p>Отзывы не найдены.</p>';

    // вывод как ранее...
}

Интеграция с плагинами WPShop

Если вы используете WPRemark для комментариев и отзывов, можно подключить его, чтобы выводить отзывы с оценками в формате, совместимом с Elementor, или использовать плагин Clearfy Pro для оптимизации и управления мета-данными отзывов.

Подробнее о плагинах WPRemark и Clearfy Pro.