Главная » WordPress » Популярные записи на блоге WordPress с миниатюрами, без использования плагинов

Популярные записи на блоге WordPress с миниатюрами, без использования плагинов

Здравствуйте! Сегодня рассмотрим, как вывести список популярных статей (записей) на WordPress без плагина, а самое главное, с миниатюрами. Все это с помощью небольшого php кода и CSS стилей.

популярные записи с минниатюрами wordpress без плагина

 

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

На каком основании будет формироваться список популярных записей? – спросите вы. Он будет сформирован по количеству комментариев к статье. Чем больше комментариев у статьи, тем выше в списке она будет. Советую не делать список очень большим, 5 записей – самый оптимальный вариант. Как он выглядит? В качестве примера можете глянуть в сайдбаре моего блога «Популярные статьи».

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

 

PHP код популярных записей за все время существования блога

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

Как я говорил ранее, немного разберемся с кодом:

div class=»popular» – это класс, с помощью которого мы будем задавать CSS стили нашего списка.

Чтобы задать количество выводимых статей в значении posts_per_page=5 установите свое число, в данном примере будет выводиться пять статей.

Вызов самих статей:

Вызов миниатюры и названия статей:

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

 

PHP код популярных записей за время указанное вами

В этом примере я предоставлю вам php код, который выводит самые комментируемые статьи за последние 30 дней. Он немного отличается от предыдущего, используя функцию отсеивания по дате.

Если вы хотите, чтобы у вас отображались популярные записи за другое количество времени, замените в strtotime(‘-30 days’) число 30 на требуемое (по умолчанию 30 – месяц, если поставите 60 – два месяца,  7 – это будет неделя и так далее).

Чтобы изменить выводимое количество статей, как и в предыдущем коде, замените число в значении posts_per_page=5.

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

 

Украсим список с помощью CSS

Осталась самая малость. Немного украсим наш список. Опять же, предоставлю вам весь код, а немного ниже объясню, что к чему. Ранее, я уже говорил о классе popular, с помощью которого мы будем задавать стили:

Вы могли заметить, что в php коде присутствовали классы ul и li, с помощью которых мы украсили наш список. Вы можете внести любые изменения в стили, чтобы список максимально вписывался в вашу тему.

А теперь немного подробнее разберем, за что отвечают те или иные классы:

Здесь присутствуют параметры высоты элемента списка (height), заданы отступы (padding) и размер текста (font-size).

Во второй половине мы задаем настройки для миниатюр:

Здесь мы задаем размер изображения миниатюры (width и height), отступы (padding), выравнивание (float), задний фон (background), рамку (border) и округление ее краев (border-radius) и тень (box-shadow). Также присутствует класс popular li img:hover, который отвечает за выделение изображения при наведении курсора.

 

Куда все эти коды вставлять?

Если у вас есть поддержка php кода в виджетах, вы можете зайти в админку, «Внешний вид – Виджеты» перетянуть виджет в боковую колонку и вставить в него один из php кодов, которые мы рассматривали выше (за все время или за время указанное вами). Также вы можете зайти в редактор, в вашей панели администратора, найдите «Боковая колонка (sidebar.php)» и в место, где хотите видеть список популярных записей, вставьте один из предложенных php кодов, например:

После того, как вы добавили php код, перейдите в «Таблица стилей (style.css)» (или используя ftp соединение, редактором Notepad++ отредактируйте файл style.css) и добавьте в любое место стили, которые мы с вами разбирали немного выше:

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

38 Комментарии

  1. Я как-то хотела поставить в сайдбаре виджет популярных записей (статей), но что-то меня остановило, уже и не помню. А сейчас только один вопрос: это каким-то образом влияет на показатели сайта? Например, не увеличивает ли количество внутренних ссылок (которых, как говорили, должно быть в идеале не более 150 шт.)? Или, может, еще на что-то, о чем я не знаю? :?:

    • Наталия, вы можете закрыть ссылки тегами nofollow и заключить код в noindex, я именно так и сделал. :smile: Насчет показателей ничего сказать не могу, много видел дофолов блогов (не закрыты ссылки, даже в комментариях) которые успешно процветают. И о 150 ссылках слышу впервые :smile:

  2. Здравствуйте. Не подскажите, как сделать вывод популярных записей по количеству просмотров?

    • Здравствйте, Константин. В двух словах не рассказать. :smile: Сначала нужно сделать вывод кол-ва просмотров статей, затем использовать функцию — этой темы на целую статью хватит). Попробуйте набрать ваш вопрос в гугле, если ничего не найдете, постараюсь на днях статью написать :smile:

  3. Здравствуйте! Спасибо за труд и за статью. Такой вопрос: насколько я понял, в качестве миниатюр выводятся первые картинки с постов. Или нет? Но, если нет картинок в посте вообще, то миниатюры нет и не очень красиво получается. Нельзя ли для тех случаев, когда в посте нет картинок, вставлять картинку-заглушку?
    Спасибо!

  4. Здравствуйте, у меня не получается! вставляю виджет в сайдбар, а там вылетает have_posts()) : $pc->the_post(); ?>
    Что это значит? где я ошиблась? :sad:

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

  6. Здравствуйте ! Подскажите, а как у вас выводится виджет тот что ниже подписки ( в сайтбаре ) там где 4 вкладки «Популярные», «Новые», «Комментарии», «Теги» это каким нибудь плагином ? У вас на блоге не нашел поста на эту тему !

  7. Сергей, для меня Ваш блог — просто находка! Не просто коды, а ещё и пояснения, причём доступные для понимания) спасибо большое за Ваш труд!)

    • Рад, что вам пригодилась информация :smile: Стараюсь писать без воды и в тоже время разжевано. :twisted: И вам спасибо за оценку труда ;-)

    • Виктор

      Да блог классный! Мне сразу понравился! Нашел случайно, пока свой блог создаю, настраиваю) Темы многие полезные,то что нужно!

      • Спасибо :smile: В скором времени продолжу писать статьи, были небольшие проблемы :smile: Удачи вам в создании блога, как закончите — обязательно покажите :twisted:

  8. Виктор

    Хорошая статья спасибо!

  9. а как выводить не рейтинг постов за все время а за 30 дней к примеру (т.е. счетчик сбрасывается каждые 30 дней )?
    Без возможности сброса счетчика польза от такого кода сомнительна. С ним в блоке навечно пропишутся статьи с большим возрастом, набравшие за все время наибольшее количесво просмотров..новые актуальные посты в рейтинг не попадут даже если будут иметь в текущем периодле фантастическое количество ежедневных просмотров

    • Serg, посмотрите внимательнее, в статье есть заголовок «PHP код популярных записей за время указанное вами».

      В коде (5 строка) выставляется количество дней (В примере ниже стоит 30 дней).

  10. Спасибо, но это вам нужно внимательней посмотреть)))
    Вариант указанный вами проводит выборку среди постов не старше хх дней. Я же говорю о выборке среди всех постов за последние хх дней… вот в чем смысл

    • Код выводит наиболее комментируемые посты среди всех, за указанное количество дней. То есть, берет все статьи сайта, и за указанный период отслеживает комментарии к ним.

  11. таки нет..код выбирает статьи не старше хх дней, проверьте..

  12. Спасибо! Статья то что нужно.Подскажите пожалуйста как вывести дату публикации статьи, как у вас в сайдбаре., спасибо.

  13. Спасибо! Все получилось! А не подскажете как вывести случайные статьи» и «последние комментарии» как у Вас в футоре? Красиво и функционально, хотелось бы так же. заранее спасибо!

    • Пожалуйста :smile:
      Насчет последних комментариев — это должно быть в вашей теме «Виджеты» — «Свежие комментарии»
      Случайные статьи — добавить функцию в тему.

      • Спасибо за быстрый ответ.
        Виджет комментариев есть — нет в нем вывода миниатюр. ;-) Я это имел ввиду. А по поводу вывода функции для случайных статей — заказываю Вам, Сергей, статью :twisted: Чтобы с выводом миниатюр.

  14. Виктор

    Благодарю за код, искал рабочий по выводу популярных за месяц, нашел )) :razz:

  15. Сергей, а как сделать чтоб вся эта конструкция открывалась в других окнах? ;-)

    • Виктор

      Елена, Если имеете ввиду ссылку, тогда так. <a href=" » title=» » target=»_blank»> <a href="» title=»» target=»_blank»>

    • Виктор

    • Виктор

      Не получается сюда код вставить. Вообщем нужно атрибут target добавить. Смотрите скриншот

      • Виктор, спасибо за ответ))) но если б я понимала куда коды засунуть в этой конструкции)))
        <a href=" » title=»»>
        <a href="» title=»»>
        перед каким из знаков ставить » target=»_blank»>?)))

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

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

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!:

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">