Скрипт рейтинга со звездами на html. Звездный рейтинг с применением небольшого кода CSS. Итак, переходим к созданию звездного рейтинга

Есть стандартный функционал оценки чего-либо в вэбе, который можно встретить на многих сайтах. Как правило, это технически это делается несколькими способами:

1. Набор input элементов типа radio, каждый из которых соответствует той или иной оценке

2. Много ненужной и несемантичной html-разметки + javascript.

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

– функционал на основе инпутов уже был реализован в cms, соответственно лучше придерживаться его, чем потом заставлять программиста придумывать “костыли” под твой скрипт;

– я ленивая и порой мне легче поколдовать с CSS, чем по всему интернету искать JavaScript плагин, который бы удовлетворил запросы в данной ситуации;

– когда-то я уже видела реализацию подобного механизма и была уверена, что это возможно.

Рейтинг в виде звезд на CSS

Итак, механизм стилизации radio инпутов с помощью CSS не является новым и не я его придумала, конечно. Но почему-то по запросу “рейтинг на CSS” я не нашла готового решения, который бы меня устроил. Поэтому, я написала своё.

1. Нам нужны изображения (желательно в спрайте) в виде звезд (солнышек, котят, совят и чего угодно, что вам больше нравится).

2. Определимся с разметкой (разметка ниже полностью написана в примере, тут опишу основную идею): у нас есть обертывающий элемент, в нем чередуются и . Причем, чередуются задом наперёд (это очень важно, чтобы можно было стилизовать все выбранные звезды при клике а также это нужно для hover-эффекта, см. пример). Инпуты идут сверху, прозрачные, чтобы были видны только звезды-label.

3. При выборе того или иного инпута, меняются стили для всех , идущих ниже по разметке (с помощью css селектора ~). Фактически в форме также, как и обычно выбранный radiobutton становится checked.

Звездный рейтинг с завидной частотой встречается почти на всех веб-сайтах. Сегодня мы решили немного поэкспериментировать, и разработать новый подход к созданию звездного рейтинга с использованием небольшого отрывка кода CSS, и совсем не прибегать к коду javascript.

В верстке для звезды используется единица уникода (☆). Если у вас стоит кодировка UTF-8, то здесь не будет проблем. В противном случае вы можете использовать ☆. Вы можете использовать столько звезд, сколько пожелаете:

☆☆☆☆☆

Теперь нам нужно при наведении заменить эту «пустую» звезду «твердой». Вы можете просто создать псевдо элемент твердой звезды (★) поверх нее при событии:hover

Rating > span:hover:before {
content: "2605";
position: absolute;
}
P.S.: Перед 2605 \

В силу того, что элемент имеет абсолютное позиционирование, мы применяем top: 0; left: 0; (как минимум в новых браузерах). Таким образом, получается, что твердая звездочка сидит прямо поверх пустой. Вы даже можете изменить ее размер или цвет, если пожелаете.

Но тем не менее, то, что есть у нас, работает только с отдельными звездами. Наша структура UX требует того, чтобы все звезды были заполнены. Например, если мы наведем на 4-ю звезду, то не только она должна быть заполнена, но также и 3-я, 2-я и 1-я.

Невозможно посредством CSS выделить предыдущие дочерние элементы. Тем не менее, у нас есть возможность выделить последующие дочерние элементы. Например, посредством смежного или общего родственного комбинатора. Если мы буквально перевернем очередность символов, то сможем использовать общий родственный комбинатор для того, чтобы выделять звезды, расположенные до той звезды, на которую был наведен курсор мыши (так как фактически, в коде HTML будут выделены последующие звезды, просто отображены они у нас в перевернутом порядке).

Rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}
P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)

И на этом всё! Полноценная UX-структура с использованием чуточки кода. Вот весь код CSS, за счет которого данный элемент будет работать:

Rating {
unicode-bidi: bidi-override;
direction: rtl;
}
.rating > span {
display: inline-block;
position: relative;
width: 1.1em;
}
.rating > span:hover:before,
.rating > span:hover ~ span:before {
content: "2605";
position: absolute;
}
P.S.: Перед 2605 в указанном коде должен быть слэш \ (редактор данного движка его почему-то съедает.)

Применение на практике

Если вероятность, что javascript все же будет включен в данную структуру. Когда пользователь кликает на звезду, сведения о рейтинге отправляются обратно посредством Ajax, а сам виджет запускает класс для мгновенного отображения выбранного числа звезд. Если javascript уже используется в проекте, не будет ли полезно хотя бы звездный рейтинг организовать без использования данной технологии? Если ваше приложение полноценно зависит от javascript, то не беспокойтесь за работу данного элемента. Если вы заинтересованы в разработке веб-сайта, который будет работать и без javascript, то данный пример реализации как раз подойдет вам. Советуем также взглянуть на от Леа Вероу (Lea Verou), где используются радио-кнопки, что позволяет сделать элемент частью формы, которую можно подтвердить и без применения JS.

Добрый день, друзья!

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

Сегодня публикую второй материал по данной теме, вслед за первым, где мы сделали для сайта на WordPress с помощью плагина Wp-PostRatigns.

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

Почему я отказался от плагина

Причин удалять плагин и переходить на способ с использованием скрипта у меня не было до тех пор, пока я не обнаружил, что некоторый функционал сайта перестал работать при активном плагине WP-PostRatings.

У меня на блоге без плагина реализованы следующие решения:

• Скрипт увеличения изображений по клику;
• Комментарии от Cackle;
• Раскрывающийся спойлер для скрытия текста.

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

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

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

К тому же плагин позволяет более жестко выставить настройки для возможностей голосования. Например, можно выставить, оценка пользователя запоминалась по его Cookie и IP адресу, чтобы отгородить себя от накрутки оценок для более реалистичной картинки в рейтинге.

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

Рейтинг со звездами без плагина

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

Папку, находящуюся в архиве мы загружаем на хостинг в папку с шаблоном, чтобы реализовать такой путь: site.ru/wp-content/themes/название темы/ratings.

require_once("ratings/rating.php");

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