Как создать динамические отзывы в WordPress с помощью шорткодов

Почему динамические отзывы важны для сайта на WordPress

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

Динамические отзывы на WordPress обычно реализуются через кастомные типы записей (Custom Post Types), которые можно выводить на страницах с помощью шорткодов. Такой подход отделяет отзывы от обычных записей блога и даёт удобный интерфейс для их управления.

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

Создание пользовательского типа записей «Отзывы» в WordPress

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

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

function wpdesk_register_reviews_cpt() {
    $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', 'thumbnail'),
        'menu_position' => 20,
        'menu_icon' => 'dashicons-testimonial',
        'rewrite' => array('slug' => 'otzyvy'),
    );
    register_post_type('wpdesk_review', $args);
}
add_action('init', 'wpdesk_register_reviews_cpt');

Этот код создаёт новый тип записей с названием «Отзывы», который будет отображаться в админ-панели WordPress с иконкой и удобными метками на русском языке.

Обратите внимание, что в supports указаны поля, которые будут доступны для отзывов: заголовок, содержимое, автор и миниатюра. Вы можете расширить этот список при необходимости.

Создание шорткода для вывода отзывов на страницах и в записях

После создания кастомного типа записей нужно сделать удобный шорткод, который позволит выводить отзывы в любом месте сайта. Например, в записи, на главной странице или в сайдбаре.

Добавьте в functions.php следующий код:

function wpdesk_reviews_shortcode($atts) {
    $atts = shortcode_atts(array(
        'count' => 5,
        'order' => 'DESC'
    ), $atts, 'wpdesk_reviews');

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

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

    $output = '<div class="wpdesk-reviews">';
    while ($query->have_posts()) {
        $query->the_post();
        $output .= '<div class="wpdesk-review">';
        $output .= '<h3 class="wpdesk-review-title">' . get_the_title() . '</h3>';
        $output .= '<div class="wpdesk-review-content">' . get_the_content() . '</div>';
        $output .= '<p class="wpdesk-review-author">Автор: ' . get_the_author() . '</p>';
        if (has_post_thumbnail()) {
            $output .= get_the_post_thumbnail(get_the_ID(), 'thumbnail', array('class' => 'wpdesk-review-thumb'));
        }
        $output .= '</div>';
    }
    $output .= '</div>';
    wp_reset_postdata();
    return $output;
}
add_shortcode('wpdesk_reviews', 'wpdesk_reviews_shortcode');

Теперь вы можете вставлять шорткод [wpdesk_reviews] в любые страницы или записи, и он выведет последние 5 отзывов. Также доступны параметры count (количество отзывов) и order (порядок сортировки).

Например, для вывода 3 отзывов в прямом порядке используйте:

[wpdesk_reviews count=3 order=ASC]

Добавление кастомных полей и расширение отзывов

Чтобы отзывы были информативными, полезно добавить дополнительные поля, например, рейтинг, должность автора или дату посещения. Это можно сделать при помощи плагинов, например Advanced Custom Fields, или программно.

Рассмотрим пример добавления пользовательского поля «Рейтинг» через метабоксы:

function wpdesk_add_reviews_metabox() {
    add_meta_box('wpdesk_review_rating', 'Рейтинг отзыва', 'wpdesk_review_rating_callback', 'wpdesk_review', 'side');
}
add_action('add_meta_boxes', 'wpdesk_add_reviews_metabox');

function wpdesk_review_rating_callback($post) {
    $value = get_post_meta($post->ID, '_wpdesk_review_rating', true);
    echo '<label for="wpdesk_review_rating_field">Оценка (от 1 до 5): </label>';
    echo '<input type="number" id="wpdesk_review_rating_field" name="wpdesk_review_rating_field" value="' . esc_attr($value) . '" min="1" max="5" step="1" />';
}

function wpdesk_save_review_rating($post_id) {
    if (array_key_exists('wpdesk_review_rating_field', $_POST)) {
        $rating = intval($_POST['wpdesk_review_rating_field']);
        if ($rating >= 1 && $rating <= 5) {
            update_post_meta($post_id, '_wpdesk_review_rating', $rating);
        } else {
            delete_post_meta($post_id, '_wpdesk_review_rating');
        }
    }
}
add_action('save_post', 'wpdesk_save_review_rating');

Теперь при добавлении отзыва в админке появится поле для рейтинга. Его можно вывести в шорткоде, дополнив вывод:

// Внутри цикла while в функции wpdesk_reviews_shortcode
$rating = get_post_meta(get_the_ID(), '_wpdesk_review_rating', true);
if ($rating) {
    $output .= '<p class="wpdesk-review-rating">Рейтинг: ' . esc_html($rating) . ' / 5</p>';
}

Стилизация и улучшение UX для отзывов

Чтобы отзывы выглядели аккуратно и привлекательно, добавьте стили в вашу тему или плагин:

.wpdesk-reviews {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.wpdesk-review {
    border: 1px solid #ddd;
    padding: 15px;
    width: 100%;
    max-width: 400px;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    background-color: #fff;
    border-radius: 5px;
}
.wpdesk-review-title {
    font-size: 1.2em;
    margin-bottom: 10px;
}
.wpdesk-review-content {
    font-size: 1em;
    margin-bottom: 10px;
}
.wpdesk-review-author {
    font-style: italic;
    color: #555;
    margin-bottom: 10px;
}
.wpdesk-review-thumb {
    float: right;
    margin-left: 10px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
}
.wpdesk-review-rating {
    font-weight: bold;
    color: #f39c12;
}

Добавьте этот CSS в файл стилей вашей темы или подключите отдельный файл стилей из плагина.

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

Выводы и рекомендации по развитию системы отзывов

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

Для дальнейшего развития можно добавить:

• Форму отправки отзывов на фронтенде с проверкой и защитой от спама;
• Интеграцию с плагинами рейтингов и схемами микроразметки для SEO;
• Модерацию и управление статусами отзывов.

Этот подход позволит поддерживать актуальный и полезный контент, повышая доверие посетителей и улучшая конверсию сайта.