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

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

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

 

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

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

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

 

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

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

<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>

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

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

Чтобы задать количество выводимых статей в значении 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>

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

 

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

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

<div class="popular">
<ul>
<?php
function filter_where($where = '') {
 $where .= " AND post_date > '" . date('Y-m-d', strtotime('-30 days')) . "'";
 return $where;
}
add_filter('posts_where', 'filter_where');
query_posts('post_type=post&posts_per_page=5&orderby=comment_count&order=DESC');
while (have_posts()): 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;
wp_reset_query();
?>
</ul>
</div>

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

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

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

 

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

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

/* Популярные записи */
.popular ul li{
 line-height:16px;
 display:block;
 border-bottom:1px solid #ECECEC;
 padding:15px 0px 20px 0px;
 height:50px;
 font-size:12px;
}

.popular ul li img {
    width: 55px;
    height: 55px;
    padding: 2px;
    float: left;
    margin: 0 13px 0 0px;
    background: #FFFFFF;
    border: 1px solid #D0D0BB;
    border-radius: 5px;
    box-shadow: 0 0 5px #666666;
}

.popular li img:hover {
    border: 1px solid #ffffff;
    padding: 2px;
    margin: 0 5px 0 4px;
}

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

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

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

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

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

.popular ul li img {
    width: 55px;
    height: 55px;
    padding: 2px;
    float: left;
    margin: 0 13px 0 0px;
    background: #FFFFFF;
    border: 1px solid #D0D0BB;
    border-radius: 5px;
    box-shadow: 0 0 5px #666666;
}

.popular li img:hover {
    border: 1px solid #ffffff;
    padding: 2px;
    margin: 0 5px 0 4px;
}

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

 

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

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

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

/* Популярные записи */
.popular ul li{
 line-height:16px;
 display:block;
 border-bottom:1px solid #ECECEC;
 padding:15px 0px 20px 0px;
 height:50px;
 font-size:12px;
}

.popular ul li img {
    width: 55px;
    height: 55px;
    padding: 2px;
    float: left;
    margin: 0 13px 0 0px;
    background: #FFFFFF;
    border: 1px solid #D0D0BB;
    border-radius: 5px;
    box-shadow: 0 0 5px #666666;
}

.popular li img:hover {
    border: 1px solid #ffffff;
    padding: 2px;
    margin: 0 5px 0 4px;
}

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

0 0 голоса
Рейтинг статьи
Подписаться
Уведомить о
guest
38 комментариев
Старые
Новые Популярные
Межтекстовые Отзывы
Посмотреть все комментарии
Наталия
8 лет назад

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

Константин
8 лет назад

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

Виталий
8 лет назад

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

Виталий
Ответить на  Сергей
8 лет назад

Спасибо!

Анна
Анна
7 лет назад

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

Регина
7 лет назад

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

Дмитрий
7 лет назад

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

Елена
7 лет назад

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

Виктор
Виктор
Ответить на  Елена
7 лет назад

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

Виктор
Виктор
7 лет назад

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

Serg
Serg
7 лет назад

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

Serg
Serg
7 лет назад

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

Serg
Serg
7 лет назад

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

sharki
sharki
7 лет назад

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

Олег
6 лет назад

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

Олег
Ответить на  Сергей
6 лет назад

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

Виктор
Виктор
5 лет назад

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

Елена
5 лет назад

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

Виктор
Виктор
Ответить на  Елена
5 лет назад

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

Виктор
Виктор
Ответить на  Елена
5 лет назад

<a href="" title=" " target="_blank">
<a href="" title="" target="_blank">

Виктор
Виктор
Ответить на  Елена
5 лет назад

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

Елена
Ответить на  Виктор
5 лет назад

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

Виктор
Виктор
Ответить на  Елена
5 лет назад

Я скриншот сделал в предыдущем ответе перейдите по ссылке «Смотрите скриншот» — название ссылки и посмотрите))) 😉

Елена
Ответить на  Виктор
5 лет назад

Спасибо, получилось!)

38
0
Оставьте комментарий! Напишите, что думаете по поводу статьи.x
()
x
Send this to a friend