Как сделать рейтинг на сайте в виде звезд
Обновлено: 05.07.2024
Есть стандартный функционал оценки чего-либо в вэбе, который можно встретить на многих сайтах. Как правило, это технически это делается несколькими способами:
1. Набор input элементов типа radio, каждый из которых соответствует той или иной оценке
2. Много ненужной и несемантичной html-разметки + javascript.
Недавно при верстке одного проекта мне пришлось столкнуться с подобной задачей. Немного подумав, я выбрала первый вариант по нескольким причинам:
– функционал на основе инпутов уже был реализован в cms, соответственно лучше придерживаться его, чем потом заставлять программиста придумывать “костыли” под твой скрипт;
– я ленивая и порой мне легче поколдовать с CSS, чем по всему интернету искать JavaScript плагин, который бы удовлетворил запросы в данной ситуации;
– когда-то я уже видела реализацию подобного механизма и была уверена, что это возможно.
Рейтинг в виде звезд на CSS
Итак, механизм стилизации radio инпутов с помощью CSS не является новым и не я его придумала, конечно. Но почему-то по запросу “рейтинг на CSS” я не нашла готового решения, который бы меня устроил. Поэтому, я написала своё.
1. Нам нужны изображения (желательно в спрайте) в виде звезд (солнышек, котят, совят и чего угодно, что вам больше нравится).
2. Определимся с разметкой (разметка ниже полностью написана в примере, тут опишу основную идею): у нас есть обертывающий элемент, в нем чередуются и . Причем, чередуются задом наперёд (это очень важно, чтобы можно было стилизовать все выбранные звезды при клике а также это нужно для hover-эффекта, см. пример). Инпуты идут сверху, прозрачные, чтобы были видны только звезды-label.
3. При выборе того или иного инпута, меняются стили для всех , идущих ниже по разметке (с помощью css селектора ~). Фактически в форме также, как и обычно выбранный radiobutton становится checked.
Кроссбраузерность: точно работает в Chrome 29, Firefox 23.0.1, Opera 16.0, Safari 5.1.7, IE 8+. Проверялось с помощью Javascript на предмет правильности выбора оценки.
Привет! Подготовил для вас очередной пост, в котором расскажу, каким образом мне удалось реализовать в конце всех статей рейтинг звезд, теперь каждый посетитель может оценить у меня на блоге любую запись по шкале от 1 до 5 баллов (звезд).
Но прежде, чем разбираться с расширением в сниппета, надо такие звездочки для голосования прикрутить на свой блог.
Скажу честно, что пока я нашел в сети только один работающий способ по созданию рейтинга на wordpress, который мне понравился больше всего своей простатой и гибкостью настройки.
WP-PostRatings — плагин оценки статей wordpress
Несколько вебмастеров, которым я всегда доверяю, убедили меня в работоспособности плагина WP-PostRatings, и как оказалось не зря. То, что вы видите в конце каждого поста реализовано как раз таки с помощь его.
Я уже не раз писал, что к любому роду плагинов отношусь негативно, так как все они в той или иной мере влияют на скорость загрузки сайта, но в моем случае другой альтернативы не нашлось. Если кто-то сделал подобный рейтинг без плагина, прошу поделиться своими знаниями в комментариях.
Ну что приступим к созданию голосования в виде звездочек:
Первое . Скачиваем плагин WP-PostRatings вот по этой ссылке . Далее устанавливаем его одним из стандартных способов (через FTP клиент или административную панель вордперсс).
Давайте пробежимся по каждой из функций данного плагина:
Manage Ratings
Здесь у вас будет отображаться вся статистика об оставленных оценках. Вы сможете наблюдать кто, когда, для какого поста и какую поставил оценку (имя пользователя, рейтинг, заголовок поста, дата и время, IP адрес).
Ratings Options
В настройках вам надо выбрать в каком виде будет осуществляться голосование (звезды, лайки, цифры, сердце, квадраты и другие).
Также можно задать шкалу голосования начиная от 1.Я решил сделать 5-ти бальную систему, поэтому установил значение равное 5.
Далее нужно дать название каждой оценке, и присвоить какое количество баллов будет учитываться при ее голосе.
Остальные настройки отвечают за выделение оценок, загрузку изображений и других правил голосования.
Rating Templates
Эти настройки отвечают за всю текстовую часть рейтинга. В виду того, что модуль голосования на иностранном языке придется изменить шаблон под себя, предварительно поработав с онлайн переводчиком.
Здесь нет ничего сложного, подойдет любой онлайн переводчик, а можно и без него. Смотрите, в какой момент выводится иностранный текст в процессе работы голосования на сайте, затем заходите в эти настройки, находите забугорный кусок текста и меняете на свой.
Может я непонятно объясняю, но в процессе во всем разберетесь. Посмотрите один из примеров моего перевода и сравните со своим.
Uninstall WP-PostRatings
Здесь пояснения не требуется, что такое удаление все прекрасно знают.
Третье . На последнем шаге останется только прикрутить только что созданный рейтинг для оценки статей на вордпресс блог. Для этого вставьте в том место, где планируете его выводить следующий код:
Добавляем звезды в расширенный сниппет Google
Только одних оценок в каждой статье мне стало мало, и было решено найти способ, как сделать их отображение в выдаче Гугла. Для этого потребовалось разметить данные с помощью семантической разметки.
Для этого находим в том же файле single.php код, отвечающий за вывод заголовка статьи, у меня это выглядит вот так:
Теперь его надо окружить вот таким текстом:
Здесь код заголовка
Далее перед этой строчкой нужно добавить еще один код, который укажет Google, что на странице используется расширенный сниппет:
В итоге у меня получился следующий код:
Далее надо разметить с сам код, отвечающий за вывод рейтинга звезд:
Поисковая система Google рекомендует всем проверять правильность действий по разметке каких-либо данных на этой странице проверки структурированных данных.
Если все сделано правильно, то картина должна быть примерно такого вида:
По идее через несколько апов Гугл должен подхватить вашу разметку, и начат отображать в выдаче заветные звездочки.
Но не факт что так будет, ведь вы только указываете ему, как он должен показывать ваш сайт посетителям, а последнее слово все равно остается за ним.
Вроде все рассказал, что хоте, если кто-то еще делал рейтинг голосования в виде звезд, прошу рассказать об этом в комментариях. На этом у меня все, до скорых встреч!
Доброго времени суток дамы и господа. С помощью этой статьи я хотел бы познакомиться с вами, а заодно опробовать себя в качестве автора. А для того чтобы это знакомство не проходило зря, мы рассмотрим с вами некоторые варианты создания инструмента для оценки чего либо. В интернете прижился такой визуальный элемент как “звездочки”:
К примеру:
Хотя в последнее время все больше используются оценочные инструменты со сторонних сервисов, например “лайки” от Facebook'a или от Вконтакте, которые позволяют оценить материал только в положительном ключе. Хорошо это или плохо, мы с вами решим как - нибудь в другой раз, а сейчас давайте рассмотрим несколько вариантов реализации традиционных “звездочек”.
Для начала нам необходимо само изображение звезды, причем желательны еще ее состояние для наведения, и активное состояние. Для этого я нарисовал вот такую звездочку, ну и сразу объединил ее в в спрайт.
После этого мы можем перейти к самой верстке.
Обычный рейтинг
Начнем мы пожалуй с самого простого: 5 целых звезд, при наведении также должно меняться состояние у предыдущих. Семантически пожалуй наиболее подходит упорядоченный список. Почему именно упорядоченный? Тут все просто, звездочки имеют свой “вес”: от одного до пяти (ну или сколько у вас там зведочек :) ).
Итак структура простая:
Давайте сразу подумаем как же мы можем выделить предыдущие элементы списка при наведении на один из них. Наверняка многие знают о css селекторе “~”. Для тех кто не знает, он позволяет выбрать всех последующих соседей, т.е. работает как +, но с оговоркой на “всех”. Но как он нам поможет? Ведь нам надо выбрать предыдущие элементы, а не следующие. Тут мы применим нам нашу смекалку и отсортировав элементы списка в обратном порядке применим к ним float: right. В итоге мы получим следующую структуру:
Дальше все просто:
Теперь необходимо добавить стили для состояния наведения:
Вторая строка и меняет фон для всех предыдущих элементов (но последующих по DOM – дереву).
Чтобы отобразить текущий усредненный рейтинг самым простым способом можно округлить среднее значение до целого и добавить класс к необходимому элементу списка:
Ну и конечно дописать чуть стилей:
Но это не сильно информативно, и лучше отображать рейтинг в процентах. Добавим еще один элемент к списку, который будет видно только когда у списка есть определенный класс – в нашем случае .show-current. Окончательная структура списка приобретает следующий вид:
Для того чтобы наши звездочки ожили, приправим все это небольшим количеством JS'a:
Для использования на продакшене можно конечно еще произвести ряд оптимизаций:
Для отрисовки текущего рейтинга с некоторой анимацией можно:
изначально установить ширину в 0 пикселей
добавить css-transition собственно для анимации средствами браузера
с некоторой задержкой через js задавать текущую ширину
Конечно можно придумать еще некоторые улучшения, но пусть это будет уже на вашей совести.
"Половинчатый" рейтинг
Стили же уже посложнее:
Выводы:
Поддержка в браузерах:
Все современные браузеры, плюс:
- Обычный рейтинг - >= IE8
- Половинчатый рейтинг - >= IE9 (из-за использования :nth-child)
Ну вот и все пожалуй, что я хотел рассказать. Это естественно не единственный вариант реализации, в сети вы можете найти множество других. Из основных можно выделить 2 способа: основанный на инпутах и вариант с заданием стилей для каждой отдельной звезды, но я думаю и мой вариант имеет право на жизнь (особенно после смерти IE8). До встречи.
Дата: 6 декабря 2011 33905 40
По многочисленным просьбам трудящихся, сегодняшняя статья будет на тему того, как создать обработчик результатов голосования, которые отправляет на сервер рейтинг в виде звезд, о котором я писал здесь.
Что же, исправляю этот недочет.
Итак, первым делом давайте определимся со структурой базы данных. Можно конечно использовать уже существующую таблицу в Вашей базе данных, в которой хранятся все Ваши заметки, но я в этом примере создам новую таблицу, которая будет содержать всего 4 поля.
Это такие поля:
- id – id заметки;
- name – название заметки;
- vote – общая средняя оценка за статью;
- voters – количество проголосовавших.
Для того чтобы создать такую таблицу необходимо выполнить следующий SQL-запрос:
Если у Вас уже есть таблица, в которой хранятся заметки, то Вам необходимо добавить в неё 2 новых поля: vote и voters.
Теперь можно добавить тестовую информацию в базу данных:
Так как мы работаем с базой данных, то первым делом создадим самый простой класс для работы с базой данных. Для этого создадим файл db.class.php и поместим туда следующий php код:
Стоит сказать, что конструктор этого класса объявлен как private, таким образом, объект не может быть создан вне пределов класса, и инициализация возможна только из статического метода init(). Он берет массив с параметрами соединения с MySQL и создает экземпляр класса, который содержится в статической переменной self::$instance. Таким образом, обеспечивается существование единственного соединения с базой данных в конкретный момент времени.
Остальная часть класса, выполняет запросы к базе данных, на основе статического метода query().
Более подробно об объектно-ориентированном программировании в PHP можно почитать тут, тут и тут.
При желании Вы можете доработать этот класс, так как Вам это нужно!
Для того чтобы вывести список статей на страницу, необходимо создать эту страницу. Для этого создадим файлик articles.php и поместим в него самый простой html шаблон страницы:
Теперь в самое начало файла articles.php добавим следующий код:
Немного пояснений. Первым делом мы задаем основные параметры подключения к базе данных mysql и затем подключаем класс для работы с базой данных db.class.php, который мы создали выше. Затем соединяемся с базой данных использую статический метод init() класса DB.
После того, как подключение к базе данных установлено, проверяем передан ли GET параметр id. Если он передан, то делаем выборку из базы данных и получаем информацию о нужной статье, иначе выводим список статей.
Если в базе данных нет заметки с указанным id, то выводим 404 ошибку.
Теперь осталось на основе полученных данных сформировать нужную html-разметку.
Здесь все просто. В начале проверяется если есть список статей, то в цикле проходимся по массиву $articles и формируем ссылки на страницы.
О том, что обозначают все эти поля Вы можете прочитать здесь. Там же Вы найдете основные настройки плагина.
После того, как html разметка сформирована, давайте вспомним, как же подключается рейтинг в виде звезд на сайт.
Первым делом необходимо подключить библиотеку jQuery и сам плагин jquery.rating.js на страницу, где будет размещен рейтинг. Это можно сделать так:
Данный код необходимо разместить между тегами в нашем шаблоне.
О том, для чего необходимо подключать jQuery с репозитория Google можно почитать здесь.
Также для корректной работы плагина, необходимо подключить следующие стили:
Что же идем дальше. После того, как html разметка рейтинга размещена в нужном месте на Вашем сайте, необходимо вызвать сам плагин рейтинга. Для этого используется следующий javascript-код:
Пару слов о том, что я здесь написал.
Если Вы обратили внимание, html разметка для рейтинга, которую Вы вставили на свой сайт имеет id равным id="rating". Зная этот id мы можем применить к этому блоку наш плагин, что мы и делаем. т. е. так:
- fx:'float' — это эффект при наведении, который означает, что звезды будут закрашиваться постепенно, следуя за указателем мыши
- stars: 5 - количество выводимых звезд в рейтинге
- image: 'images/stars.jpg' — здесь я указываю путь к изображению звезд
- loader: 'images/ajax-loader.jpg' - здесь я указываю путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер
- url: 'rating.php' - адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования
Итак, когда загрузится страница, плагин применится к нашему блоку с указанными настройками. Теперь когда пользователь кликнет по звезде, на страницу vote.php будет отправлен AJAX запрос, с результатом голосования.
Поэтому следующим шагом нам надо создать файл обработчик результатов голосования vote.php.
Результат голосования будет передан на сервер методом POST и будет хранится в переменной $_POST['score']. Также на сервер будет передан уникальный идентификатор замеки, который мы указали в скрытом поле:
Только вместо voteID Вы должны подставить свое значение уникального идентификатора, по которому будет идти выборка из базы данных. В нашем примере вместо voteID подставляется идентификатор статьи $post['id'].
Зная все эти данные, можно их обработать и записать в базу данных, тем самым обновив рейтинг заметки.
Давайте создадим обработчик результатов голосования vote.php и поместим туда следующий код:
Здесь мы также первым делом указываем параметры подключения к базе данных, подключаем класс для работы с базой данных и устанавливаем соединение с базой данных, использую статический метод init() класса DB.
После того, как все основные параметры заданы и соединение с базой данных установлено, идет проверка а были ли вообще переданы данные нашему обработчику.
Если данные переданы и пользователь еще не голосовал за эту статью, то обновляем данные в базе данных и включаем защиту от накрутки, установив куки с определенным временем жизни.
И в конце все данные преобразуются json объект и выводятся в браузер.
Надеюсь Вам будет полезна эта статья. Если есть какие-то вопросы, то отписуйтесь в комментариях ниже!
Читайте также: