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

Віталий

11 років ago

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

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

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

1. Нужно прописать скрипт наших популярных записей внутри нашей темы.

Прописать можно к примеру в файле sidebar.php/ Вы можете также прописать в файле single.php, после записи как это у меня или в любом другом месте, где Вам удобно.
Для вывода списка будем использовать WP_Query, с легкими и не большими настройками. Такой у нас будет первая строка

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

где мы указал по какому принципу сортировать и сколько постов выводить. Цифра 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>

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

2. Немного украшаем список с помощью CSS.

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

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

Теперь добавим стили миниатюрам.

.popular_box 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_box li img:hover {
 border:1px solid #888;

 }

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

3. Смотрим готовый код для вставки в файл темы.

<div class="popular_box">
 
<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_box ul li{
line-height:16px;
display:block;
border-bottom:1px solid #e9e9e9;
padding:15px 0px 20px 0px;
height:50px;
font-size:12px;

}

.popular_box 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_box li img:hover {
border:1px solid #888;

}

После вставки кода в нужные места, у вас появится список из пяти записей с миниатюрами.
На этом все. Спасибо за внимание 🙂

Exit mobile version