Добавляем рейтинг записей к родной системе комментирования WordPress

Добавляем рейтинг записей к родной системе комментирования WordPress
Click here to view original web page at oddstyle.ru
Рейтинг в виде звездочек – самый быстрый и простой способ получить обратную связь от ваших пользователей, потому он и стал таким популярным во всем мире. Сегодня мы расширим комментарии WordPress путем добавления к ним рейтинговой системы.

Основной файл плагина

Давайте создадим основной файл, который будет содержать код нашего плагина. С помощью FTP-клиента перейдите в /wp-content/plugins/ в вашей установке WordPress и создайте папку под названием ci-comment-rating (или любую другую на ваше усмотрение). Затем войдите в папку и создайте в ней файл ci-comment-rating.php (тоже можете назвать на свое усмотрение).

Вставьте в файл следующий код:

Создание интерфейса для рейтинга

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

01//Create the rating interface.
02add_action( 'comment_form_logged_in_after', 'ci_comment_rating_rating_field' );
03add_action( 'comment_form_after_fields', 'ci_comment_rating_rating_field' );
04function ci_comment_rating_rating_field () {
06<label for="rating">Rating<span class="required">*</span></label>
08<fieldset class="comments-rating">
09<span class="rating-container">
10<?php for ( $i = 5; $i >= 1; $i-- ) : ?>
11<input type="radio" id="rating-<?php echo esc_attr( $i ); ?>" name="rating" value="<?php echo esc_attr( $i ); ?>" /><label for="rating-<?php echo esc_attr( $i ); ?>"><?php echo esc_html( $i ); ?></label>
12<?php endfor; ?>
13<input type="radio" id="rating-0" class="star-cb-clear" name="rating" value="0" /><label for="rating-0">0</label>

Код выше поможет нам поместить систему рейтинга в форму комментариев – как для зарегистрированных пользователей, так и для незарегистрированных. Вот как рейтинг будет выглядеть после добавления кода:

Пока не очень красиво.

Добавляем стилизацию

Нам нужны звездочки, поскольку наша система рейтинга использует их для оценки постов. Вставим иконки в наш интерфейс. Также нам нужно будет создать папку с ресурсами (назовем ее assets) в главной папке с плагином и внутри нее создать файл style.css. Отредактируем style.css и вставим код:

01.comments-rating {
02border: none;
08display: inline-block;
12/* remove inline-block whitespace */
14/* flip the order so we can use the + and ~ combinators */
15unicode-bidi: bidi-override;
16direction: rtl;
19.rating-container * {
24display: none;
27.rating-container > input + label {
28/* only enough room for the star */
29font-family: 'dashicons';
30display: inline-block;
31overflow: hidden;
34white-space: nowrap;
35cursor: pointer;
39.rating-container > input + label:before {
40display: inline-block;
41text-indent: -9999px;
47.rating-container > input + label:hover ~ label:before,
48.rating-container > input + label:hover:before {
54.rating-container > .star-cb-clear + label {
55text-indent: -9999px;
57margin-left: -.5em;
60.rating-container > .star-cb-clear + label:before {
67text-shadow: none;
70.rating-container:hover > input + label:hover ~ label:before,
71.rating-container:hover > input + label:hover:before {

Идем обратно к ci-comment-rating.php и добавляем:

Сначала мы регистрируем файл style.css, созданный ранее, после чего ставим в очередь иконки и таблицу стилей. Сохраняем код и обновляем страницу.

Гораздо лучше.

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

Интерфейс готов. Теперь нам надо убедиться, что пользовательский рейтинг сохраняется в базу данных. Для этого мы будем использовать add_comment_meta, чтобы создать произвольное поле, которое будет хранить наши данные рейтинга. Вставьте код в главный файл плагина:

В коде выше мы сцепляемся с хуком comment_post, который запускается в момент отправки комментария. Мы проверяем, добавил ли пользователь рейтинг, чистим его, после чего сохраняем в базу данных.

Делаем рейтинг обязательным (опциональный шаг)

Если вы хотите, чтобы пользователи всегда передавали рейтинг вместе с комментариями, то в таком случае добавьте следующий код в главный файл плагина:

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

Совет: если вы не хотите, чтобы рейтинг был обязательным, удалите фрагмент:

В итоге визуальный сигнал о том, что рейтинг обязателен, будет удален.

Вывод рейтинга в отправленном комментарии

Как только пользователь оценил ваш пост, нам нужно вывести рейтинг вместе с комментарием. Для этого вставьте следующий код в главный файл плагина:

Что мы делаем тут: мы сцепляемся с comment_text, проверяем, есть ли фактический рейтинг, и если да, то генерируем разметку для вывода рейтинга. Если рейтинга нет, то просто возвращаем текст комментария.

Готово!

Мы создали простой плагин, который позволяет добавить систему рейтинга в виде звезд к комментариям WordPress.

Расширяем плагин

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

Вставьте следующий код в файл плагина:

Функция получит ID поста, пройдет по всем одобренным комментариям, просуммирует рейтинги, после чего вернет средний показатель с округлением до первого десятичного знака. Если у тестируемого поста нет рейтингов, то в таком случае функция вернет false.

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

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

Урок подошел к концу. Мы надеемся, что вы придумаете интересные идеи по расширению плагина.

Для вашего удобства ниже приведен весь код плагина из файла ci-comment-rating.php:

01<?php /* Plugin Name: CI Comment Rating Description: Adds a star rating system to WordPress comments Version: 1.0.0 Author: The CSSIgniter Team Author URI: https://cssigniter.com/ */ //Enqueue the plugin's styles. add_action( 'wp_enqueue_scripts', 'ci_comment_rating_styles' ); function ci_comment_rating_styles() { wp_register_style( 'ci-comment-rating-styles', plugins_url(/,__FILE__) . 'assets/style.css' ); wp_enqueue_style( 'dashicons' ); wp_enqueue_style( 'ci-comment-rating-styles' ); } //Create the rating interface. add_action( 'comment_form_logged_in_after', 'ci_comment_rating_rating_field' ); add_action( 'comment_form_after_fields', 'ci_comment_rating_rating_field' ); function ci_comment_rating_rating_field () { ?>

Источник: https://www.cssigniter.com