Главная
Wordpress
Рейтинг записей WordPress без плагина звездами
  • 27 Мар 2015г
  • 1853
  • 15
  • Рубрика: Wordpress

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

Рейтинг записей

Доброго времени суток. 🙂

Когда-то, я искал как сделать рейтинг записей WordPress без плагина. Уж очень меня напрягал распространенный и так любимый всеми плагин WP-PostRatings. Он имеет огромный размер, кучу обращений к базе данных, нагружает своей универсальностью, аля - все и сразу. Тогда мои поиски не были увенчаны успехом и я сделал свое детище, но про него расскажу когда-то позже. Мне хотелось организовать простой, но в то же время информативный и понятный для посетителей рейтинг. С его помощью, я бы смог понять, настолько мои статьи интересны моим посетителям и знать в каком направлении мне нужно двигаться. К тому же у Гугла такой рейтинг выводится при выдаче результатов поиска, что явно обращает внимание пользователя. У Яндекса пока такого нет, но может вскоре появится 🙂

Сравнительно недавно, несколько месяцев назад, я случайно наткнулся именно на то, что так долго искал. Скрипт был рабочим, но все же мелкие недоработки были, плюс косяк с Google, о нем напишу немного позже. Давайте приступим к реализации рейтинга. Пример ниже на картинке или под любой статьей на этом сайте. Можете проверить как он работает, нажав на 5 звезд. Как-то не скромно, да? 🙂

Рейтинг записей WordPress

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



Пример

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

  1. Откройте header.php и перед закрывающимся head подключите Java - файл и файл стилей рейтинга:
    <script src="<?php bloginfo('stylesheet_directory'); ?>/ratings/rating.js"></script>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ratings/rating.css">
    
  2. Откройте functions.php и в конце, перед ?> подключите php скрипт рейтинга.
    require_once('ratings/rating.php');
    
  3. Откройте файл записи и в нужном месте single.php, там - где хотите увидеть рейтинг, добавьте такой вызов функции:
    <?php rating(); ?>
    

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

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

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

Если все сделано правильно, то Вы увидите результат. Чтобы установить без подключения лишних файлов, можете скопировать все содержимое из rating.css в Ваш файл стилей style.css.

Так-же вместо подключения rating.php в functions.php, можно просто скопировать все его содержимое, кроме первой строки и вставить в конце перед ?>.

rating.js - переместите в корень темы и тогда его подключение в шапке будет таким:

<script src="<?php bloginfo('stylesheet_directory'); ?>/rating.js"></script>

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

Отображение рейтинга записей в Google

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

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

Если Вы не знаете что такое микроразметка и не устанавливали ее себе на сайт, то Вам нужно в single.php найти заголовок записи, примерно он выглядит так:

<h1><?php the_title (); ?></h1>

Перед ним нужно добавить такую строку

<div xmlns:v="http://rdf.data-vocabulary.org/#" typeof="v:Review-aggregate"></div>

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

Рейтинг записи в Google

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

Вы используете рейтинг записей у себя на сайте?

На этом все, спасибо за внимание. 🙂




Если Вам был полезным мой труд, можете поддержать сайт, обменяться со мной текстовыми ссылками или посмотреть рекламку, что займет 2 минуты :)


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(99 голосов, в среднем: 4.3 из 5)

Опубликовано 15 комментариев

  • Артем
    Комментариев: 1

    Здравствуйте, сделал так как написано, уже прошло больше месяца, но в выдаче гугла звезды не появились, не подскажите в чем может быть проблема? Сайт http://bopt.org/

    • Виталий
      Комментариев: 269

      Там что-то поменялось с микроразметкой. Нужно читать правила правильной настройки и менять в коде рейтинга. У самого недавно пропали, но времени заняться этим пока нет.

  • Дмитрий
    Комментариев: 1

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

    • Виталий
      Комментариев: 269

      1. В статье же написано, для вывода рейтинга добавить строку
      <?php rating(); ?>
      Добавляйте ее в цикле где список. Например по вопросу 2, что описан ниже цикл заключен в теги LI Там выводится миниатюра и название, вот после них добавьте и рейтинг. Ну или у себя в цикле списка. В общим просто добавляйте строку. Для каждой записи выведет свой рейтинг.

      2. Можно. Вот статья о выводе по просмотрам http://gnatkovsky.com.ua/vyvod-populyarnyx-zapisej-po-kolichestvu-prosmotrov-wordpress.html Там в коде цикла задан ключ для просмотров -
      meta_key=post_views_count
      Замените его на
      meta_key=vote-rating
      Теперь у вас выведет записи по рейтенгу. То есть те у которых больше оценка+больше голосов за эту оценку
      В итоге, я сделал так и получил то что Вам нужно
      <ul class="populargb">
      <?php $populargb = new WP_Query('showposts=5&meta_key=vote-rating&orderby=meta_value_num' );
      while ( $populargb->have_posts() ) {
      $populargb->the_post(); ?>
      <li>
      <?php the_post_thumbnail(); ?>

      <a title="<?php the_title(); ?>" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      <?php rating(); ?>
      </li>
      <?php } ?>
      </ul>

  • Алексей
    Комментариев: 5

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

    • Виталий
      Комментариев: 269

      Проверил только что еще раз на своем сайте, через телефон, все работает. Возможно ваш браузер на телефоне не может работать с данным скриптом. Также может на сайте есть кэш плагин, который попросту не дает проголосовать? Однажды я столкнулся с такой проблемой на одном из сайтов заказчиков.

      • Алексей
        Комментариев: 5

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

  • Алексей
    Комментариев: 5

    У вас звезды большие что вы сделали?

  • Алексей
    Комментариев: 5

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

  • Юрий
    Комментариев: 2

    Попробовал добавить у себя на страницу - звезды серые, по клику не зеленеют, при наведении курсора на среднюю звезду из нее вниз появляется вертикальный столбик звезд... клик учёлся как (1 голос, в среднем: NaN из 5). Что поправить, подскажите, пожалуйста.

Добавить комментарий

Заполните поля ниже. Ваш e-mail не будет опубликован. Обязательные поля помечены *

Уважаемые пользователи! При добавлении комментариев на сайт Вам следует соблюдать правила указанные под формой отправки комментариев.

Соблюдайте добавления комментариев

Это не спам *

Нажмите, чтобы добавить код в комментарий