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


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

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

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

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

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

Список без миниатюр

Список без миниатюр

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

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

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

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

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

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



Если статья оказалась для Вас полезной, поделитесь с друзьями, жмите на кнопочки:


Подписывайтесь на новые статьи!


Оставьте комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

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

  • Игорь Бут

    Хорошая статья, тоже не люблю плагины. Но мне почему то не помогла 🙁 Буду искать другие способы.

    • Максим Зайцев От автора

      Игорь, это скорей всего связано с особенностью Вашей темы. Но это всего лишь предположение. Уверен, Вы найдёте решение. Желаю удачи.

      • Тимур Хромов

        Спасибо) Все получилось) А как можно осуществить вывод через количество просмотров?

        • Максим Зайцев От автора

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

  • Сергей

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

    • Максим Зайцев От автора

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