Популярные записи будут сортироваться по количеству оставленных комментариев к записи. Выходит чем больше комментариев в записи, тем она стает популярнее и будет выводиться в списке выше остальных.
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;
}
После вставки кода в нужные места, у вас появится список из пяти записей с миниатюрами.
На этом все. Спасибо за внимание 🙂
