Как вывести список популярных записей на блоге WordPress с миниатюрами и без плагинов

Разместил / Просмотров: 4 968 / комментариев 86

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

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

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

Ну а теперь давайте приступать.

Список самых популярных записей с миниатюрами на WordPress без плагинов

PHP код записей

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

<?php $pc = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>

Далее мы добавляем вызов самих постов:

<?php while ($pc->have_posts()) : $pc->the_post(); ?>

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

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array()); ?></a>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>

Таким образом вот, что у нас получилось:

<ul>
 <?php
 $pc = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
 <?php while ($pc->have_posts()) : $pc->the_post(); ?>
 <li>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array()); ?></a>
 <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
 </li>
 <?php endwhile; ?>
 </ul>

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

Вот видите как всё просто :-) Но это ещё не всё. Теперь нужно не много украсить список. Пример Вы сможете посмотреть у меня на блоге в сайдбаре.

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

Для начала нам нужно придумать какой нибудь класс, например popular. И теперь для этого класса зададим вот такие настройки:

.popular ul li{
 line-height:16px;
 display:block;
 border-bottom:1px solid #e9e9e9;
 padding:15px 0px 20px 0px;
 height:50px;
 font-size:12px;

}

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

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

.popular ul li img {
 width: 50px;
 height: 50px;
 border:1px solid #ccc;
 background:#fff;
 padding:2px;
 float:left;
 margin:0 10px 0 0px;
 -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Для Firefox */
 -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Для Safari и Chrome */
 box-shadow: 2px 2px 2px rgba(0,0,0,0.1); /* Параметры тени */
 -moz-transition: border 0.3s 0.05s ease;
 -o-transition: border 0.3s 0.05s ease;
 -webkit-transition: border 0.3s 0.05s ease;
}

.popular li img:hover {
 border:1px solid #888;

 }

Здесь для миниатюр заданы рамки, которая при наведении плавно темнеет. Это сделано с помощью transition и .popular li img:hover. Так же добавлена не большая тень для изображений, так смотрится более красиво чем без неё. Ещё по умолчанию задан размер в 50 на 50 пикселей. Естественно это значение Вы можете с лёгкостью менять.

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

Куда вставлять код в WordPress?

В админке Вашего блога нужно зайти в редактор, затем находим Боковая колонка (sidebar.php) и в желаемое место вставляем следующее:

<div class="popular">

<ul>
<?php
$pc = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
<?php while ($pc->have_posts()) : $pc->the_post(); ?>
<li>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_post_thumbnail(array()); ?></a>
<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
</li>
<?php endwhile; ?>
</ul>

</div>

После того как добавили код переходим в Таблица стилей (style.css) и так же в любое место добавьте вот эти стили:

.popular ul li{
line-height:16px;
display:block;
border-bottom:1px solid #e9e9e9;
padding:15px 0px 20px 0px;
height:50px;
font-size:12px;

}

.popular ul li img {
width: 50px;
height: 50px;
border:1px solid #ccc;
background:#fff;
padding:2px;
float:left;
margin:0 10px 0 0px;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Для Firefox */
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); /* Для Safari и Chrome */
box-shadow: 2px 2px 2px rgba(0,0,0,0.1); /* Параметры тени */
-moz-transition: border 0.3s 0.05s ease;
-o-transition: border 0.3s 0.05s ease;
-webkit-transition: border 0.3s 0.05s ease;
}

.popular li img:hover {
border:1px solid #888;

}

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

  • Sawes

    а у меня не выходит нифига. названия есть (синие), а миниатюр — нет.

  • Sawes, а у Вас к записям миниатюры стоят?

  • Sawes

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

  • Делается, это в админке при написании поста, справа, там должно быть поле «Задать миниатюру»

  • Артем

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

  • Артём, а вот это уже отдельная статья :-)

  • Sawes

    у меня нет такого. видимо шаб не поддерживает миниатюры.

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

  • Sawes

    ну это я понимаю, потому и спрашиваю как включить миниатюры

  • Sawes, можно в админке включить миниатюру. Даже если их шаблон не поддерживает. Внимательнее смотрите при написании поста справа должно быть «Задать миниатюру»

  • Sawes

    да не, нет у меня такой функции.

  • Sawes, а шаблон старый уже?

  • Sawes

    шаблон вот этот — http://wp-templates.ru/gracia/

  • В этом шаблоне есть миниатюры. А что у Вас в медиафайлах в админке для миниатюр прописано? Какие размеры?

  • Sawes

    нет у меня никаких миниатюр в медиафайлах

  • Sawes, должны быть. а версия вп какая?

  • Sawes

    сейчас 3.5, пару дней назад была предыдущая. ничего не изменилось.

  • Sawes, точно в медиафайлах ничего про миниатюры нет? Нужно зайти в параметры а потом в медиафайлы.

  • Sawes

    там написано размер миниатюры 150×150
    но больше кроме этого никаких упоминаний про миниатюры нет.

  • Размер миниатюр стоит. Теперь зайдите в записи, потом добавить новую, И внимательно ищите справа «Задать миниатюру» должно быть по любому.

  • Sawes

    да нету там, ё моё —
    http://uploads.ru/aUIJo.png

  • Sawes, прочтите вот это. http://wphelp.ru/2010/thumbnails-wordpress-3-0.htm

  • Sawes

    ну ладно, спасибо, буду разбираться с кодом.

  • dot1x

    Спасибо большое, работает.

  • dot1x, на здоровье :-)

  • Спасибо! Все просто и красиво! То что нужно :)

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

  • Сергей, честно, я не знаю как это реализовать, возможно есть какие то плагины.

  • Я плагинами стараюсь не пользоватся, когда можно несколько строк в код добавить. =)

  • Ден

    А если сайдбар на виджетах, то данный метод применить не получится?

  • Ну почему не получится, у меня же на блоге получилось :-) Вам просто нужно добавить код в sidebar.php и применить соответствующие стили.

  • Наталья

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

  • Наталия, можно просто установить плагин Post Views, он добавляет виджет в котором самые просматриваемые посты.

  • Наталья

    Там к сожалению нет миниатюр, мне Ваше решение чем и понравилось — возможностью вывода миниатюр

  • Спасибо за действующий код. Все получилось, даже описать трудно насколько класно! Подскажите, у меня проблема с MenuMatic, которую никто не может или не хочет подсказать как решить. Может сделаете подобную статью с расжевыванием о том, как это меню у Вас получилось — просто супер! С праздниками! Иисус Воскресе!

  • Здравствуйте, Саша. Извините, но я не могу понять о чём именно идёт речь. Объясните что за MenuMatic? :-) Спасибо большое и Вас с праздником. Воистину Воскрес.

  • Наталия, скорее всего как то можно прикрутить миниатюры к данному плагину, но я не знаю как. Пока только знаю как вывести самые комментируемые посты с миниатюрами. Чем собственно и поделился :-)

  • Может я ошибся с названием, у меня просто оно так в теме Вордпреса называется — верхнее меню с рубриками Вашими :»JavaScript», «JQuery», «Новичкам» и т.д. Красивое меню, а самое главное работает плавно и все подрубрики выплывают!

  • Посмотрите вот эту статью http://beloweb.ru/wp/kak-sdelat-gorizontalnoe-menyu-s-pomoshhyu-css-i-jquery-i-kak-ego-prikrepit-k-blogu-na-wordpress.html Тут я описывал подробно как сделать такое меню.

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

  • Егор, в классе .popular ul li попробуйте поменять значения padding:15px 0px 20px 0px;

  • Я там уже поставил padding:0px 0px 22px 0px;

  • Пробую уже пол часа, какие именно величины нужно задать? Заранее спасибо

  • Егор, попробуйте все величины ставьте большее значение не 22, а 30 например. Попробуйте ещё изменить значения класса .popular ul li img вот это margin:0 10px 0 0px;

  • Жаль, но ничего не получается

  • Егор, что то не правильно делаете. Возможно классы конфликтуют, ещё попробуйте шрифт немного уменьшить.

  • Скорее всего стили конфликтуют — придется убрать, а жаль, мне так понравился

  • Еще вопрос — статьи выводятся в зависимости от количества комментариев, а как сделать, чтобы от количества просмотров

  • А зачем убирать? измените название классов, не обязательно именно эти использовать.

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

  • Нет, все-таки получилось — изменил line-height:28px;

  • Вот видите :-)

  • Спасибо за потраченное на меня время

  • На здоровье, Егор. Обращайтесь ещё :-)

  • Наверное, чтобы по количеству просмотров сделать, нужно эту строчку редактировать — $pc = new WP_Query(‘orderby=comment_count&posts_per_page=10’);

  • Егор, вряд ли. потому что количество просмотров нужно брать из базы данных. Не всё так просто.

  • А, еще вопрос — у меня отступ от левого края, как его убрать? Спасибо

  • Да, да — уже гуглю по этому поводу

  • Отступ смотрите в классе Вашего виджета. В самом шаблоне

  • Дело в том, что в остальных виджетах такого отступа нету

  • А такую-же статью про последние записи не планируете?

  • Егор, а смысл их выводить если они на главной выводятся? :-)

  • Далеко не все приходят на сайт с главной, многие ведь заходят например при переходе с поисковиков

  • Не спорю, многие переходят на главную.

  • Все вставил куда надо, ничего не появляется

  • Значит не правильно что то делаете, какая у Вас версия Вордпресс?

  • kirill kitaev

    3.5.1

  • А в какой файл код вставляете?

  • kirill kitaev

    в sidebar.php и style, все по инструкции)), проверю на другом сайте и отпишу. И вопрос еще, каким плагином вы сделали комменты ?

  • Пробуйте, и обязательно отпишитесь. Плагин Disqus

  • 4idroid

    Попробуйте Executable PHP widget для вставки PHP кода в сайдбар

  • Если код вставлять в sidebar.php то этот плагин не нужен.

  • Вера

    Та же проблема. Почему-то эта версия движка не ставит миниатюру автоматом.
    Как вариант, при редактировании записи включите в Настройках экрана отображать блок миниатюры (появится внизу) и задавайте ее вручную.

  • А Вы с официального сайта вордпресс устанавливаете?

  • Ирина

    Александр, можете ли вы подсказать, как настроить время показа миниатюр?

  • Ирина, в смысле? Не совсем понял. Можно подробнее?

  • Андрей

    А как сделать отступ картинки и анкора от края?

  • вот этими размерами padding:0px 0px 22px 0px;

  • big_jacky

    Здравствуйте. Решение отличное, сам пользуюсь подобным. Может подскажете как к этому ещё и постраничную навигацию «прикрутить». дело в том что я вывожу записи из определённой рубрики на отдельной статической странице. Пять записей отображается. А вот как перейти к остальным? Те коды что нашёл сети у меня не работают. Может подскажете как это решить?

  • Здравствуйте, извините, но я не знаю решения.

  • Здравствуйте, а можно вывести с шестой по десятую популярную запись. Хочу сделать два виджета — в первом поставить ваш код с популярными 1-5 записями, а во втором (он будет плавающим) — с шестой по десятую. Это возможно сделать?

  • Честно, даже не знаю как такое реализовать

  • Юлия

    Александр, спасибо за скрипт! Все работает чудесно, и что немаловажно — с первого раза и нервотрепки! Один вопрос:хочу чтобы как у вас, выводилось, количество просмотров каждой статьи. Или хотя бы количество комментариев. Подскажите?

  • Здравствуйте, установите плагин wp-postviews :)

  • Юлия

    Александр, спустя 20 дней, появился еще один вопрос: а можно ли в этом скрипте запретить вывод записей из определенных рубрик?

  • Виктор

    Все отлично! :)