В этой статье мы подробно рассмотрим, как можно реализовать функционал динамических отзывов с оценками в WordPress без использования сторонних плагинов. Это особенно полезно, если вы хотите иметь полный контроль над кодом и минимизировать количество подключаемых расширений, сохраняя максимальную производительность и безопасность сайта.
Создание пользовательского типа записи «Отзывы» для динамического функционала
Для начала необходимо зарегистрировать собственный тип записи, который будет хранить отзывы пользователей. Это позволит удобно работать с отзывами в админ-панели и выводить их на сайте.
Добавьте в файл functions.php вашей темы следующий код:
function wpkeys_register_post_type_reviews() {
$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,
'supports' => array('title', 'editor', 'author'),
'menu_icon' => 'dashicons-testimonial',
'rewrite' => array('slug' => 'otzyvy')
);
register_post_type('wpkeys_review', $args);
}
add_action('init', 'wpkeys_register_post_type_reviews');Этот код создаст новый тип записи «Отзывы» с собственным меню в админке и возможностью добавлять, редактировать и просматривать отзывы.
Добавление пользовательского метаполя для оценки (звезд)
Чтобы добавить оценку к отзыву, создадим метаполе с числовым значением от 1 до 5. Выведем поле на странице редактирования отзыва и сохраним значение.
Добавьте следующий код в functions.php:
function wpkeys_review_add_rating_metabox() {
add_meta_box(
'wpkeys_review_rating',
'Оценка отзыва',
'wpkeys_review_rating_metabox_callback',
'wpkeys_review',
'side',
'default'
);
}
add_action('add_meta_boxes', 'wpkeys_review_add_rating_metabox');
function wpkeys_review_rating_metabox_callback($post) {
wp_nonce_field('wpkeys_review_rating_nonce', 'wpkeys_review_rating_nonce_field');
$value = get_post_meta($post->ID, '_wpkeys_review_rating', true);
?>
<label for="wpkeys_review_rating_field">Выберите оценку (1-5):</label><br>
<select name="wpkeys_review_rating_field" id="wpkeys_review_rating_field">
<option value="">Выберите</option>
<?php for ($i = 1; $i <= 5; $i++) : ?>
<option value="<?php echo $i; ?>" <?php selected($value, $i); ?>><?php echo $i; ?> Звезда<?php echo $i > 1 ? 'ы' : ''; ?></option>
<?php endfor; ?>
</select>
<?php
}
function wpkeys_review_save_rating_metabox($post_id) {
if (!isset($_POST['wpkeys_review_rating_nonce_field']) || !wp_verify_nonce($_POST['wpkeys_review_rating_nonce_field'], 'wpkeys_review_rating_nonce')) {
return;
}
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
return;
}
if (isset($_POST['wpkeys_review_rating_field'])) {
$rating = intval($_POST['wpkeys_review_rating_field']);
if ($rating >= 1 && $rating <= 5) {
update_post_meta($post_id, '_wpkeys_review_rating', $rating);
} else {
delete_post_meta($post_id, '_wpkeys_review_rating');
}
}
}
add_action('save_post', 'wpkeys_review_save_rating_metabox');Так мы добавим поле для оценки и сохраним его при сохранении записи.
Вывод отзывов с оценками на фронтенде
Теперь выведем отзывы на странице сайта, отображая текст и звёздный рейтинг. Рекомендуется использовать WP_Query для выборки отзывов.
В нужном шаблоне (например, page-reviews.php или в любом другом) вставьте следующий код:
<?php
$args = array(
'post_type' => 'wpkeys_review',
'posts_per_page' => 10,
'orderby' => 'date',
'order' => 'DESC'
);
$reviews_query = new WP_Query($args);
if ($reviews_query->have_posts()) :
echo '<div class="wpkeys-reviews-list">';
while ($reviews_query->have_posts()) : $reviews_query->the_post();
$rating = get_post_meta(get_the_ID(), '_wpkeys_review_rating', true);
echo '<div class="wpkeys-review-item">';
echo '<h3>' . get_the_title() . '</h3>';
echo '<div class="wpkeys-review-rating">' . wpkeys_render_stars($rating) . '</div>';
echo '<div class="wpkeys-review-content">' . get_the_content() . '</div>';
echo '</div>';
endwhile;
echo '</div>';
wp_reset_postdata();
else :
echo '<p>Отзывов пока нет.</p>';
endif;
function wpkeys_render_stars($rating) {
$rating = intval($rating);
$output = '';
for ($i = 1; $i <= 5; $i++) {
if ($i <= $rating) {
$output .= '<span style="color: #f5b301; font-size: 20px;">★</span>'; // заполненная звезда
} else {
$output .= '<span style="color: #ccc; font-size: 20px;">☆</span>'; // пустая звезда
}
}
return $output;
}
?>Этот код создаст красивый список отзывов с оценками в виде звездочек.
Добавление формы для отправки отзывов с оценками с помощью AJAX
Чтобы сделать функционал более интерактивным, создадим форму для отправки отзывов с оценками, которая будет отправлять данные без перезагрузки страницы через AJAX.
HTML форма
Вставьте на страницу такой HTML-код:
<form id="wpkeys-review-form" method="post">
<label for="wpkeys-review-title">Заголовок отзыва:</label><br>
<input type="text" id="wpkeys-review-title" name="title" required><br>
<label for="wpkeys-review-content">Текст отзыва:</label><br>
<textarea id="wpkeys-review-content" name="content" rows="5" required></textarea><br>
<label for="wpkeys-review-rating">Оценка (1-5):</label><br>
<select id="wpkeys-review-rating" name="rating" required>
<option value="">Выберите</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
</select><br>
<input type="submit" value="Отправить отзыв">
<div id="wpkeys-review-message" style="margin-top:10px; color: green;"></div>
</form>JavaScript для AJAX-запроса
Добавьте в шаблон или подключите отдельный JS-файл с таким кодом (не забудьте локализовать скрипт для передачи URL ajax):
document.addEventListener('DOMContentLoaded', function() {
var form = document.getElementById('wpkeys-review-form');
var message = document.getElementById('wpkeys-review-message');
form.addEventListener('submit', function(e) {
e.preventDefault();
var data = new FormData(form);
data.append('action', 'wpkeys_submit_review');
data.append('nonce', wpkeys_ajax_object.nonce);
fetch(wpkeys_ajax_object.ajax_url, {
method: 'POST',
credentials: 'same-origin',
body: data
})
.then(response => response.json())
.then(json => {
if (json.success) {
message.style.color = 'green';
message.textContent = 'Спасибо! Ваш отзыв отправлен и ожидает модерации.';
form.reset();
} else {
message.style.color = 'red';
message.textContent = json.data || 'Ошибка при отправке отзыва.';
}
})
.catch(() => {
message.style.color = 'red';
message.textContent = 'Ошибка сети. Попробуйте позже.';
});
});
});PHP обработчик AJAX
Добавьте в functions.php следующий код для обработки AJAX-запроса:
function wpkeys_enqueue_scripts() {
wp_enqueue_script('wpkeys-review-script', get_template_directory_uri() . '/js/wpkeys-review.js', array(), null, true);
wp_localize_script('wpkeys-review-script', 'wpkeys_ajax_object', array(
'ajax_url' => admin_url('admin-ajax.php'),
'nonce' => wp_create_nonce('wpkeys_review_nonce')
));
}
add_action('wp_enqueue_scripts', 'wpkeys_enqueue_scripts');
function wpkeys_handle_submit_review() {
check_ajax_referer('wpkeys_review_nonce', 'nonce');
$title = sanitize_text_field($_POST['title'] ?? '');
$content = sanitize_textarea_field($_POST['content'] ?? '');
$rating = intval($_POST['rating'] ?? 0);
if (empty($title) || empty($content) || $rating < 1 || $rating > 5) {
wp_send_json_error('Пожалуйста, заполните все поля корректно.');
}
$new_post = array(
'post_title' => $title,
'post_content' => $content,
'post_status' => 'pending', // для модерации
'post_type' => 'wpkeys_review'
);
$post_id = wp_insert_post($new_post);
if ($post_id) {
update_post_meta($post_id, '_wpkeys_review_rating', $rating);
wp_send_json_success();
} else {
wp_send_json_error('Ошибка при сохранении отзыва.');
}
}
add_action('wp_ajax_wpkeys_submit_review', 'wpkeys_handle_submit_review');
add_action('wp_ajax_nopriv_wpkeys_submit_review', 'wpkeys_handle_submit_review');Улучшение отзывов: сортировка и фильтры по оценкам
Для удобства пользователей полезно добавить возможность сортировки и фильтрации отзывов по рейтингу. Это можно реализовать через параметры WP_Query с использованием meta_query.
Пример выборки отзывов с оценкой от 4 и выше:
$args = array(
'post_type' => 'wpkeys_review',
'posts_per_page' => 10,
'meta_key' => '_wpkeys_review_rating',
'orderby' => 'meta_value_num',
'order' => 'DESC',
'meta_query' => array(
array(
'key' => '_wpkeys_review_rating',
'value' => 4,
'compare' => '>=',
'type' => 'NUMERIC'
)
)
);
$filtered_reviews = new WP_Query($args);Это позволит выводить наиболее высокооценённые отзывы, что улучшит восприятие контента посетителями.
Рекомендации по безопасности и производительности
При создании такого функционала важно учитывать безопасность и нагрузку на сайт:
- Обязательно используйте
nonceдля защиты от CSRF в AJAX-запросах. - Обрабатывайте и фильтруйте все пользовательские данные.
- Используйте отложенную модерацию новых отзывов, чтобы избежать спама.
- Кэшируйте вывод отзывов, особенно если их много, чтобы снизить нагрузку на базу данных.
Если у вас есть на сайте плагин Clearfy Pro, его функции оптимизации и защиты могут помочь дополнительно снизить риски и ускорить загрузку страниц с отзывами.
Вывод
Таким образом, без использования плагинов вы можете создать гибкий и удобный функционал динамических отзывов с оценками, который легко адаптируется под любые требования. Такой подход позволит вам полностью контролировать код и интегрировать отзывы в ваш проект на WordPress максимально эффективно.