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

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

 

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

На каком основании будет формироваться список популярных записей? – спросите вы. Он будет сформирован по количеству комментариев к статье. Чем больше комментариев у статьи, тем выше в списке она будет. Советую не делать список очень большим, 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;
}

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