Главная
Wordpress
Рейтинг записей WordPress без плагина звездами
  • 3534
  • 40
  • Рубрика: 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. Там Вы увидите ссылку - Получить данные по URL, нажмите на нее и в появившемся поле введите адрес страницы, где Вы проголосовали и нажмите ПОЛУЧИТЬ И ПРОВЕРИТЬ:

Проверить ссылку
перед Вами будет страница, которая разделена на две части. Слева html-код Вашей страницы, справа отчет. В отчете должно сверху быть написано зеленым - Проблем нет. Если это так, то Вам осталось только подождать день - два. -->

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

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

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

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



Пример

Выглядеть это будет так:

Рейтинг 10 звезд

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

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




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


Оцените статью
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
Проголосовало: 181, в среднем: 4.8 из 5

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

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

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

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

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

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

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

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

      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

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

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

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

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

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

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

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

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

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

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

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

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

    Добрый день!
    Подскажите как можно реализовать рейтинг записей по нескольким параметрам. Т.е. допустим у каждой записи есть 5 параметров для оценки: интересность, практичность, оформление, качество и т.д. и т.п. Необходимо чтобы пользователь мог оценивать любой из этих параметров по пятибалльной шкале. А я в любом месте мог вывести либо среднюю оценку записи, либо оценку по определенному параметру. А так же мог создавать архивы самых интересных записей, либо отсортировать записи по параметру практичности и т.д.

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

      Данный метод Вам не поможет. Ищите плагин, который мог бы это реализовать.Лично мне, такие никогда не попадались на глаза.

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

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

  • Андрей
    Комментариев: 3

    Как сделать 10 звезд ?

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

    Здравствуйте, сделал все как вы сказали, но при добавлении строки в funtcions.php сервер вылетает и пишет HTTP 500 ERROR

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

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

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

    При добавление кода в functions.php выдает ошибку HTTP 500. Как решить?

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

      Смените место, куда Вы добавляете код. Возможно нужно не в конец, а немного раньше или в начало. Нужно смотреть по коду functions.php.
      Рядом с файлом functions.php должна быть папка ratings, в которой и находятся все файлы. То есть, чтобы в файле functions.php соответствовал путь.
      require_once('ratings/rating.php');
      Видите, папка ratings и в ней файл rating.php. Если вы не правильно добавили папку с файлами или поменяли путь или у вас в папке ratings еще одна папка ratings, а уже потом файл, то будет ошибка.

  • Андрей
    Комментариев: 3

    Вы знаете, как вместо 5 звезд выводить 10 ?

  • Олег
    Комментариев: 1

    Доброго времени суток! Спасибо за готовое решение. Подскажите пжл а можно как-то теперь всем продуктам (в моем случае) добавить автоматически рейтинг, желательно рандом голосов, а рейтинг скажем 4,4 или 4,75 допустим. ??

  • Евгений
    Комментариев: 5

    Скажите, а в чем был смысл делать все это "без плагина"? Для того, чтобы криво втулять на сайт файлы скриптов и стилей, из-за чего у половины последователей решение не работает?

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

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

      • Евгений
        Комментариев: 5

        Нагрузка, извиняюсь, на что? на сервер, формирующий html-код страницы? Если вы займетесь оптимизацией, то узнаете, что эта проблема решается проще и эффективней всего - простым статическим кэшированием страницы. А вот правильно упаковать криво втуленный скрипт (да и стиль тоже) в один пакет с остальными скриптами (стилями) для уменьшения количества файлов и реального ускорения загрузки сайта - задача нерешаемая. Перенос криво втуленного скрипта в футер для устранения блокировки загрузки прочих файлов - задача нетривиальная... А всего-то надо было грамотно оформить решение как плагин - даже без админстраницы, но с правильным, по Кодексу, подключением скриптов и стилей.

  • Евгений
    Комментариев: 5

    Мне проще обычный плагин поставить и разогнать, чем разбираться с этой странной штукой с непонятной математикой.
    Кстати, полюбопытствуйте где-нибудь, что такое кэширование в браузере. Возможно, после его настройки и сайт у вас будет открываться не так странненько, как сейчас... И разгонится хотя бы до 90% PageSpeed Score https://gtmetrix.com/reports/gnatkovsky.com.ua/h8L4Im2B

  • Евгений
    Комментариев: 5

    Почему бы и нет? https://gtmetrix.com/reports/aggreg.ru/Ryp7G37M
    Я туда правда не заходил пару лет - некогда писать. Но он в зеленой зоне PageSpeed с тех пор и до этих.

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

      Почему забросили? отличный сайт!

      • Евгений
        Комментариев: 5

        Ну... зарабатывать можно, конечно, подпираясь саморекламой через сайт. Но иногда реклама уже не на пользу - от задач бы отбиться....
        Тема оформления да, красивая. Смысловая. Но допилена мной как раз под скорость. Если бы не кривоватый хостинг, который нормально не дает кэшировать картинки png, разогнал бы до 98% - обычное дело для несложных сайтов.

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

          Хорошо вам, у меня нельзя вообще. Только на выделенном сервере, который покупать я не собираюсь 🙂 mod_expires.c и mod_headers.c в .htaccess можно прописывать до умопомрачения но кэширование не включится 🙂

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

    Перерыл весь интернет в поисках простого рейтинга. У Вас самый толковый код нашел. Сначала отображались первые звездочки, хотя я почти сразу поменял на вторые (веселенькие). Но на следующий день звездочки поменялись. Пример на моей странице https://serpstat.pp.ua/s-chego-nachat/ Единственное, что гугл маркер не хочет их воспринимать их как рейтинг статьи и постоянно показывает неправильную пометку, даже если уже голосовали

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

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

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

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

Это не спам *

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

Привет дорогой друг

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