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

Его цель не только задержать читателей на сайте и повысить количество просматриваемых страниц, но и усилить доверие к вашему сайту и лично к вам (если сайт авторский).

Что может заинтересовать посетителя и задержать его на сайте? 1. Контент:

• Интересные статьи.
• Удобные сервисы по теме сайта.
• Тематические изображения и видео в статьях.

2. Доверие к автору и сайту:

• Информация о сайте и авторе – страница автора.
• Возможность связаться с автором – форма для контактов, email или телефон.

3. Поощрение активности пользователей:

• Возможность выразить свое мнение о статье или оценить ее:
  • оставить комментарий и получить ответ на него.
  • поставить лайк или добавить ссылку на статью на свою страницу в социальной сети – кнопки социальных сетей.
  • поставить прямую оценку материалу – рейтинг.
• Голосования на различные темы.
• Подарки читателям и пользователям, конкурсы и акции.

4. Красивый дизайн и удобный в использовании сайт.

Сегодня я расскажу о том, как добавить на сайт простой "звездный" рейтинг постов без использования сложных и тяжелых плагинов. Кроме того, наш рейтинг будет содержать микроразметку для рейтинга, а это значит, что его звезды будут отображаться в ПВ (поисковой выдаче) Google и привлекать внимание к сниппету сайта. Вот так:

А шансов на то, что пользователь кликнет на сниппет со звездами намного больше, так что с их помощью мы сможем увеличить СТР (кликабельность) страниц в выдаче.

Наличие рейтинга на сайте, также, может помочь ему попасть в РСЯ (рекламная сеть Яндекса) – ее модераторы всегда обращают внимание на дополнительные сервисы ресурса.
Как правило, рейтинги создают при помощи плагина WP-PostRatings.

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

Сильно тормозит загрузку сайта.

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

Итак, переходим к созданию звездного рейтинга: ↓ Скачать скрипт рейтинга сайтов можно по ссылке ниже

Уже скачали 288 раз(а)

Открыть ↓

Для разблокировки содержимого, введите код из последнего, присланного вам письма.

После распаковки архива, вы получите папку ratings и файлы:

Functions.php,
- footer.php,
- single.php и
- style.css.

Папку ratings нужно добавить в папку с вашей темой.

А код из файлов functions.php, footer.php, single.php и style.css перенести, соответственно, в файлы functions.php, footer.php, single.php и style.css вашей темы.

В functions.php и footer.php – в начало файла, в style.css – в конец файла.

В single.php после тега

Другие теги микроразметки для статей можно посмотреть на http://schema.org/Article и добавить те, которые вам нужны.

После этого пост, с добавленным к нему рейтингом, можно проверить в валидаторе микроразметки:
Google - https://developers.google.com/structured-data/testing-tool/ и
Яндекса - http://webmaster.yandex.ua/microtest.xml .

Напоследок, предлагаю посмотреть вебинар по выводу сайтов из АГС при помощи контента, создающего добавочную стоимость.

Звездный рейтинг с завидной частотой встречается почти на всех веб-сайтах. Сегодня мы решили немного поэкспериментировать, и разработать новый подход к созданию звездного рейтинга с использованием небольшого отрывка кода 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.

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

Основной причиной смены рейтинга послужило то, что рейтинг выводился «целочисленными» звездами, ну максимум можно было вывести и половину звезды. Т. е. если рейтинг для статьи был 4.75, то надо было выводить либо 4.5 звезды либо 5, что меня не очень устраивало.

Поэтому было принято решение написать свой собственный плагин на jQuery для формирования рейтинга в виде звезд.

Основные требования к плагину:

• Рейтинг должен был выводиться корректно, т. е. если у меня рейтинг был равен 4.78, то и количество закрашенных звезд должно быть соответствующим.
• Возможность выбора эффекта при наведении курсора мыши на звезду. Это имеется ввиду то, какую оценку пользователь сможет выставлять. т. е. при наведение указателя мыши на звезды они должны были закрашиваться либо целыми звездами, либо по пол звезды, либо в абсолютных значениях следуя за указателем мыши
• Возможность задания своих звезд
• Возможность указать URL на который будет отправлен результат голосования
• Возможность указать количество звезд выводимых в рейтинге
• Автоматическое склонение результатов голосования. (Например: 1 голос, 2 голоса, 5 голосов)
• Возможность задать свои существительные для результатов голосования
• Возможность задавать минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
• Возможность выполнить пользовательскую функцию, при клике на звезду

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

Для того, чтобы использовать данный плагин у себя на сайте, первым делом необходимо подключить саму библиотеку jQuery и сам плагин. Подключать библиотке jQuery мы будем не обычным способом, а с репозитория Google.

window.jQuery || document.write("");

Данный код необходимо разместить между тегами на Вашем сайте.

О том, для чего необходимо подключать jQuery с репозитория Google можно почитать .

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

Все это Вы найдете в исходниках.

После того, как все необходимые стили и библиотеки подключены, можно вызывать сам плагин. Для этого в нужное место на Вашей странице необходимо вставить div, например, с классом rating:

Теперь к этому элементу можно вызвать плагин следующим образом:

$("div.rating").rating();

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

Для того, чтобы, задать какое-то количество закрашенных звезд, необходимо внутрь нашего элемента вставить скрытое поле для ввода с классом val, которое будет содержать значение Вашего рейтинга:

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

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

Если же на одной странице размещено несколько рейтингов и Вам нужно отправлять данные на сервер, то для идентификации рейтинга используется еще одно скрытое поле ввода с классом vote-id:

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

Теперь поговорим о том, какие есть настройки у плагина и как их можно изменять!

fx	float	Эффект при наведении курсора мыши на звезду. float — При наведении курсора мыши, звезды будут закрашиваться постепенно, следую за указателем мыши half - При наведении курсора мыши, звезды будут закрашиваться постепенно по пол звезды full - При наведении курсора мыши будет закрашиваться целая звезда
image		путь к изображению звезд. Следует заметить, что картинка должна быть выполнена в виде спрайта, т. е. так В самом верху изображения расположена звезда, которая будет выводится для не закрашенных звезд. Под ней находится звезда, которая выводится при наведении курсора мыши. И в самом низу расположена звезда, которая выводится для закрашенных звезд. Если Вы решите изменить звезды, то эту последовательность следует сохранить. Также обращаю Ваше внимание, что высота и ширина одной звезды должны быть равны . Иначе рейтинг будет выводится не корректно
width	32	Ширина одной звезды
stars	5	Количество выводимых звезд в рейтинге
titles	[ "голос", "голоса", "голосов" ]	Массив существительных, которые будут выводится для учета голосов
readOnly	false	Режим работы рейтинга. По умолчанию равен — false. Если установить в true, то не будет возможности проголосовать
minimal	0	Минимальное значение рейтинга, ниже которого пользователь не сможет проголосовать
url		Адрес страницы, на которую будет отправлен AJAX запрос с результатом голосования
type	post	Тип AJAX запроса. По умолчанию равен — post. Если Вам нужно передавать GET запрос на сервер, то установите это значение равным — get
loader		Путь к изображению, которое будет выводится в тот момент, пока идет AJAX запрос на сервер
click		Пользовательская функция, которая вызывается, когда пользователь кликает по звезде. Первым параметром функции будет сам объект рейтинга, а второй — результат голосования пользователя

Формат вывода пользовательских сообщений

Допустим на сервере вы обрабатываете запрос и обновляете рейтинг у заметки. В таком случае можно вывести сообщение «Спасибо. Ваш голос учтен», перестроить рейтинг звезд и обновить количество проголосовавших в браузере пользователя.

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

Поэтому для корректной работы плагина сервер должен возвращать json-объект следующего вида:

Если status будет равен значению - OK, то рейтинг звезд обновится и пересчитается количество проголосовавших, иначе будет просто выведено предупреждающее сообщение.

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

Посмотреть демо можно

Доброго времени суток дамы и господа. С помощью этой статьи я хотел бы познакомиться с вами, а заодно опробовать себя в качестве автора. А для того чтобы это знакомство не проходило зря, мы рассмотрим с вами некоторые варианты создания инструмента для оценки чего либо. В интернете прижился такой визуальный элемент как “звездочки”:

К примеру:

Хотя в последнее время все больше используются оценочные инструменты со сторонних сервисов, например “лайки” от Facebook"a или от Вконтакте, которые позволяют оценить материал только в положительном ключе. Хорошо это или плохо, мы с вами решим как - нибудь в другой раз, а сейчас давайте рассмотрим несколько вариантов реализации традиционных “звездочек”.

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

После этого мы можем перейти к самой верстке.

Обычный рейтинг

Начнем мы пожалуй с самого простого: 5 целых звезд, при наведении также должно меняться состояние у предыдущих. Семантически пожалуй наиболее подходит упорядоченный список. Почему именно упорядоченный? Тут все просто, звездочки имеют свой “вес”: от одного до пяти (ну или сколько у вас там зведочек:)).

Итак структура простая:

Давайте сразу подумаем как же мы можем выделить предыдущие элементы списка при наведении на один из них. Наверняка многие знают о css селекторе “~”. Для тех кто не знает, он позволяет выбрать всех последующих соседей, т.е. работает как +, но с оговоркой на “всех”. Но как он нам поможет? Ведь нам надо выбрать предыдущие элементы, а не следующие... Тут мы применим нам нашу смекалку и отсортировав элементы списка в обратном порядке применим к ним float: right. В итоге мы получим следующую структуру:

Rating { list-style: none; margin: 0; padding: 0; width: 100px; height: 20px; } .rating li { display: block; width: 20px; height: 20px; float: right; /* обтекание по правой стороне как раз необходимо для выстравания элементов в обратном порядке */ text-indent: -9999px; /* скрываем текст */ cursor: pointer; background: url("stars.png"); }

Теперь необходимо добавить стили для состояния наведения:

Rating li:hover, .rating li:hover ~ li { background-position: 0 -20px; }

Вторая строка и меняет фон для всех предыдущих элементов (но последующих по DOM - дереву).

Ну и конечно дописать чуть стилей:

Rating li.active, .rating li.active ~ li { background-position: 0 -40px; }

Но это не сильно информативно, и лучше отображать рейтинг в процентах. Добавим еще один элемент к списку, который будет видно только когда у списка есть определенный класс - в нашем случае .show-current . Окончательная структура списка приобретает следующий вид:

Для того чтобы наши звездочки ожили, приправим все это небольшим количеством JS"a:

Var $rating = $(".rating"); $rating.on("mouseover", function() { $(this).removeClass("show-current"); }).on("mouseleave", function() { $(this).addClass("show-current"); }); $("li", $rating).on("click", function() { alert("User selected " + $(this).text()); //Тут естественно может (и должен) располагаться более сложный код, например отправка результата голосования с помощью ajax на сервер и последующая отрисовка результата голосования });

Для использования на продакшене можно конечно еще произвести ряд оптимизаций:

картинку можно через data:URL включить в css, тем самым избавившись от лишнего HTTP запроса

• изначально установить ширину в 0 пикселей

  добавить css-transition собственно для анимации средствами браузера

  с некоторой задержкой через js задавать текущую ширину

Конечно можно придумать еще некоторые улучшения, но пусть это будет уже на вашей совести.

"Половинчатый" рейтинг

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

Стили же уже посложнее:

Li { display: block; width: 10px; height: 20px; float: right; text-indent: -9999px; cursor: pointer; background: url("img/stars.png") no-repeat; } li.current { display: none; } ul.show-current{ position: relative; } ul.show-current li { cursor: default; } ul.show-current li.current { position: absolute; top: 0; left: 0; display: block; width: 0; background-position: 0 -60px; background-repeat: repeat-x; } ul.show-current li.current:hover, ul.show-current li.current:hover ~ li { background-position: 0 -60px; } ul.show-current li.current span { display: block; height: 20px; width: 0; background: inherit; background-position: 0 -40px; } /* нечетные элементы */ li:nth-child(odd) { background-position: -10px 0; } /* четные при наведении и все предыдущие четные*/ li:nth-child(even):hover, li:nth-child(even):hover ~ li:nth-child(even){ background-position: 0 -20px; } /* четные при наведении и все предыдущие нечетные*/ li:nth-child(even):hover ~ li:nth-child(odd){ background-position: -10px -20px; } /* нечетные при наведении и все предыдущие нечетные*/ li:nth-child(odd):hover, li:nth-child(odd):hover ~ li:nth-child(odd) { background-position: -10px -20px; } /* нечетные при наведении и все предыдущие четные*/ li:nth-child(odd):hover ~ li:nth-child(even) { background-position: 0 -20px; }

Выводы:

Поддержка в браузерах:

Все современные браузеры, плюс:

• Обычный рейтинг - >= IE8
• Половинчатый рейтинг - >= IE9 (из-за использования:nth-child)

Ну вот и все пожалуй, что я хотел рассказать. Это естественно не единственный вариант реализации, в сети вы можете найти множество других. Из основных можно выделить 2 способа: основанный на инпутах и вариант с заданием стилей для каждой отдельной звезды, но я думаю и мой вариант имеет право на жизнь (особенно после смерти IE8). До встречи.

ps. (в репозитории вы можете найти less - версию css"a)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

require_once("ratings/rating.php");

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

Инструкции