Как создать список популярных статей

Здравствуй, уважаемые читатели. Сегодня я расскажу вам, как вывести в сайтбаре список популярных статей с миниатюрами и без миниатюр. Сейчас, когда Яндекс потихоньку будет отключать ссылочное ранжирование, во всех областях, нужно позаботиться о поведенческих факторах. Так как именно поведенческие факторы сыграют ключевую роль при ранжировании сайта. А улучшить поведенческие факторы позволит уникальный контент адаптивный дизайн и юзабилити. Вот и вывод популярных материалов привлекает взгляд посетителей и тем самым улучшает поведенческие факторы.

Итак, давайте приступать. Как вы помните я не сторонник чрезмерного количества плагинов на блоге. Поэтому расскажу вам способ, как вывести список популярных материалов без применения плагинов. Для начала я, конечно же, посмотрел в Интернете, есть ли подобные способы. И как оказалось есть. Но вот какая неприятная ситуация оказалась. Все эти материалы находятся в топе поисковой выдачи, не знаю, кто у кого копировал, но у всех одна и та же подлянка. При вставке фрагмента кода в шаблон, появляется внешняя ссылка на сторонний сайт. Вы конечно понимаете, что популярные материалы, как правило, выводят в сайтбаре. А значит, внешняя ссылка будет всегда находиться на главной странице Вашего блога. Что в свою очередь вовсе не хорошо.

В общем, пришлось разбираться самому.

2 способа создать список популярных материалов

Итак, существует два способа вывода популярных материалов в виде списка.

Первый способ через подсчёт количества просмотров.

Второй способ через подсчёт количества комментариев.

Первый способ хорош, но имеет ряд недостатков. Так при небольшой посещаемости сайта нагрузка на базу данных невелика. Но при внушительной посещаемости сайта, запросов к база данных станет гораздо больше и ещё неизвестно, как это отразится на работоспособности сайта. Второй недостаток это подсчёт. Подсчитывается не уникальное количество просмотров, а каждое обновление страницы. Что, на мой взгляд, кажется, не совсем правильно. Хотя если кто знает, как реализовать подсчёт уникальных просмотров буду благодарен, если поделитесь в комментариях.

Итак, для своего сайта я выбрал второй способ реализации, то есть вывод популярных материалов на основе подсчёта комментариев. При этом способе будет куда меньше запросов к базе данных.

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

Как создать список популярных материалов с миниатюрами

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

Шаг 1

Открываем административную панель WordPress. Переходим в раздел «Внешний вид», далее «Редактор». Открываем файл «Боковая колонка» (sidebar.php). В коде ищем место, где вы хотите вывести список популярных материалов. Ориентируйтесь по заголовкам уже имеющихся в Вашем сайтбаре блоков.

Шаг 2

Выбрав место в коде, вставляем вот этот код:

<ul><li id="recent-posts">
<h2>Популярные статьи</h2>
<ul style="list-style:none;">
<?php global $post; $postslist=get_posts('numberposts=10&orderby=comment_count');
foreach($postslist as $post) : setup_postdata($post); ?>
<li><a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail(array(60,60), array("class" => "alignleft popular-sidebar")); ?>
</a>
<span style="padding-top:0px;float:left; width:200px;">
<a style="float:left; width:200px; padding-top:5px;"
title="Открыть: <?php the_title(); ?>" href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></span>
<div class="clear"></div>
</li>
<?php endforeach; ?>
</ul>
</li>
</ul>

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

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

Шаг 3

Теперь необходимо добавить стили оформление для списка популярных материалов. Для этого открываем файл «Таблица стилей» (style.css). И в конце добавляем стили для оформления списка популярных материалов с миниатюрами.

Разумеется, вы можете использовать свои стили. Если вы пока слабо разбираетесь в таблицах стилей css, советую изучить бесплатный курс Евгения Попова «css с нуля«.

Разбор стилей:

/*Стиль миниатюры*/
img.popular-sidebar {
 background: none repeat scroll 0 0 #FFFFFF; /*фон миниатюры*/
 border: 1px solid #DDDDDD; /*рамка вокруг миниатюры*/
 border-radius: 6px; /*закруглённые углы миниатюры*/
 box-shadow: 0 4px 5px #0B6AF8; /*размер и цвет тени миниатюры*/
 height: 60px; /*высота миниатюры*/
 margin-right: 10px; /*отступ справа*/
 margin-top: 5px; /*отступ сверху*/
 padding: 3px; /*внутренний отступ вкруговую*/
 width: 60px; /*ширина миниатюры*/
}
/*Стиль миниатюры при наведении*/
img:hover.popular-sidebar {
 background: none repeat scroll 0 0 #FFFFFF; /*фон миниатюры*/
 border: 1px solid #DDDDDD; /*рамка вокруг миниатюры*/
 border-radius: 6px; /*закруглённые углы миниатюры*/
 box-shadow: 0 0 3px #DB0217; /*размер и цвет тени миниатюры*/
 height: 60px; /*высота миниатюры*/
 margin-right: 10px; /*отступ справа*/
 margin-top: 5px; /*отступ сверху*/
 padding: 3px; /*внутренний отступ вкруговую*/
 width: 60px; /*ширина миниатюры*/
}

В моих стилях меняется только параметр тени миниатюры: смещение и цвет. Вы можете поэкспериментировать с отступами и фоном, получится очень оригинально.

Результат:

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

Шаг 1

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

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

<div class="recens">
<h2>Популярные статьи</h2>
<ul><li>
<?php global $post; $postslist=get_posts('numberposts=10&orderby=comment_count');
foreach($postslist as $post) : setup_postdata($post); ?>
<li>
<a style="float:left; font-weight:bold; width:200px;"
title="Post: <?php the_title(); ?>" href="<?php the_permalink(); ?>">
<?php the_title(); ?></a></span>
<div class="clear"></div>
</li>
<?php endforeach; ?>
</li>
</ul>
</div>

Шаг 2

Конечно, можно ничего больше не трогать, но лучше подправить стиль оформления. Обычный список выглядит скучновато. Поэтому предлагаю добавить маркеры. В качестве маркера буду использовать графический файл. Данные файл нужно скопировать в папку images вашей темы оформления. Или любую другую папку, на Ваше усмотрение. Но Вы должны знать путь к этому файлу. А теперь в файл style.css добавляем стили оформления.

/*Стиль для списка без миниатюр*/
.recens ul li {
 background: url("images/arrow.png") no-repeat scroll 0 5px rgba(0, 0, 0, 0);
 padding: 3px 0 3px 19px;
}

В результате получится нечто подобное:

Эти стили лишь небольшой пример, вы можете сделать гораздо красивее. Добавив бордюры, цвет ссылки, изменения при наведении и так далее.

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

И в завершении предлагаю Вашему вниманию видеоверсию статьи.

На этом у меня всё. Если будут вопросы, обязательно пишите, я постараюсь помочь.

Да скорость встречи друзья.

С уважением, Максим Зайцев.