Показать самые комментируемые статьи

Опубликовано: 22 Сентябрь 2010Автор ratemir

Cамые комментируемые статьиОдин из способов определения популярности той или иной страницы сайта, это количество оставленных комментариев. На WordPress есть такая возможность распределения популярности контента. Тем самым, показывая в любой части страницы Вашего блога, список самых комментируемых статей, мы видим простые ссылки и значения количества комментов. Было бы неплохо добавить к каждой ссылке по графической полосе и таким образом улучшить дизайн, как на картинке слева.

Давайте воссоздадим это с помощью WordPress, CSS и JQuery, не используя каких-либо плагинов.

Базовый код для WordPress

1
2
3
4
5
6
7
8
9
<ul id="most-commented">
         <?php $most_commented = new WP_Query('orderby=comment_count&posts_per_page=5'); ?>
         <?php while ($most_commented->have_posts()) : $most_commented->the_post(); ?>
<li>
         <a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a>
         <span class="comment-bar"><span class="comment-count"><?php comments_number('0','1','%'); ?></span></span>
</li>
         <?php endwhile; ?>
</ul>

2 строчка кода используется для поиска 5-ти наиболее прокомментированных статей блога. Вы можете поменять это значение на любое другое.

Далее мы выводим каждую ссылку как элемент списка. Для этого берём функцию while ()(строка 3). Чтобы вывести ссылку на страницу сайта используется the_permalink () и the_title () , а затем мы показываем количество комментариев применив comments_number () и некоторые дополнительные значения для стилизации.

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

Основные стили CSS

Для начала, пропишем значения стилей для каждого элемента списка:

#most-commented li {
             list-style: none;
}
 
#most-commented a {
            display: block;
}

С помощью list-style: none; мы отменили появление стилей, таких как подчеркивание ссылок или текста. Используя display: block; ссылки были определены как блочный элемент, чтобы отделить их друг от друга для лучшей визуализации.

Продолжаем создавать стили CSS и придаем дизайн для графической линии и счетчика комментариев:

#most-commented .comment-bar {
              display: inline-block;
              position: relative;
              height: 30px;
              width: 0;
              margin: 5px 0;
              padding-left: 20px;
              background-color: #999;
}
 
#most-commented .comment-count {
             display: inline-block;
             position: absolute;
             right: -20px;
             top: -5px;
             width: 34px;
             height: 34px;
             border-width: 3px;
             border-style: solid;
             border-color: #FFF;
            -moz-border-radius: 20px;
            -webkit-border-radius: 20px;
             border-radius: 20px;
             text-align: center;
             line-height: 34px;
             background-color: #6CAC1F;
             font-size: 13px;
             font-weight: bold;
             color: #FFF;
}

Большая часть этого стиля является произвольной, так что не бойтесь менять фоновое изображение или иным образом настроить цвета под свои темы. Главное, выровнять ширину графического счетчика комментариев(#most-commented .comment-bar) и отрегулировать панель по своему желанию.

Обратите внимание на полную ширину цифрового счетчика комментариев(#most-commented .comment-count). В нашем случае она будет равна 40px, то есть width: 34px; + border-width: 3px;(3px для левой и правой границы). Используется половина этого значения(right: -20px;) для наложения цифрового счетчика комментариев на графический счетчик.

Указанные стили CSS копируйте в файл style.css Вашей темы WordPress или создайте новый файл CSS (например, style-comment.css) и пропишите пути к нему в теге <head></head> В нашем случае будет так:

<link rel="stylesheet" href="<?php bloginfo ('template_directory'); ?>/style-comment.css" type="text/css" />

Связываем все это с JQuery

Наконец, давайте используем JQuery для установки ширины отдельных столбиков. Но сначала создаем файл most-commented.js и копируем туда ниже приведенный скрипт. Файл кладем в папку wp-content/themes/ваша тема/js (то есть туда где в Вашей теме хранятся скрипты .js)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(function() {
// define global variables
var maxWidth, maxCount;
 
$('#most-commented li').each(function(i) {
var $this = $(this);
var thisCount = ~~$this.find('.comment-count').text();
 
// set up some variables if the first iteration
if ( i == 0 ) {
maxWidth = $this.width() - 40;
maxCount = thisCount;
}
 
// calculate the width based on the count ratio
var thisWidth = (thisCount / maxCount) * maxWidth;
 
// apply the width to the bar
$this.find('.comment-bar').animate({
width : thisWidth
}, 200, 'swing');
});
});

Цикл начинается после загрузки страницы, проходя по всем элементам <li>, преобразуя текст в целое значение(строки 5-7).

Далее, мы вычли 40 пикселей по ширине элемента списка, чтобы установить максимальную ширину для графического счетчика комментариев(строка 11). Теперь осталось вычислить ширину каждого бара и сделать анимированный переход(строки 15-21). Если вы предпочитаете стиль элементов без какой-либо анимации, просто замените animate () на статическую css ().

Установка

Для работы скрипта потребуется дополнительная библиотека jQuery. Можно подгружать её с серверов Google'а или же скопировать здесь. Между тегами <head></head> добавляем следующие строки:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js
"></script>
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/most-commented.js"></script>
Метки: Рубрика: Технологии jQuery


Опубликовать в twitter.comПоделиться ВКонтактеПоделиться в FacebookПоделиться В Моем МиреОпубликовать в своем блоге livejournal.com
Если Вам понравилась статья, Вы можете получать новые материалы Ratemir.ru по: RSS или можете просто получать обновления блога на e-mail:

10 комментариев к “Показать самые комментируемые статьи”

  • Владислав
    11 Апрель, 2011, 16:50

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

  • швей
    25 Август, 2011, 19:47

    Отлично написано. А главное хорошо разжевано.

  • 240х320
    2 Сентябрь, 2011, 3:11

    Очень интересно. Но чего-то не хватает. Может быть, стоит добавить каких-нибудь картинок или фото?

  • anonim
    2 Сентябрь, 2011, 8:31

    Бесплатный совет: заведи у себя в блоге рубрику типа «самые горячие обсуждения» или что-то в этом роде. Там можно будет комментировать самые обсуждаемые темы блога…

  • svoi
    4 Сентябрь, 2011, 14:33

    Конечно, мы все с удовольствием проводим время в сети, но далеко не всегда — с пользой. Вот и я тоже. Редко попадается что-то действительно стоящее, что-то, что не только рассмешит, но и заставит задуматься. Этот пост как раз — одно из ркдких исключений, когда читаешь с удовольствием и что-то для себя выносишь. Спасибо автору.

  • ovchat
    5 Сентябрь, 2011, 13:16

    И опять об этом. Если поисковики научатся понимать смысл, то блогерам придется поизголяться, чтобы быть читаемыми и не похожими на других.

  • nvs
    14 Сентябрь, 2011, 14:05

    Хм… Как раз на эту тему думал, а тут такой пост шикарный, спасибо!

  • Hari
    9 Ноябрь, 2011, 1:21

    Сенкс за инфу, почитал с интересом

  • двигатель wd615
    6 Август, 2013, 12:30

    Даже и не докопаешься.

  • двигатель wd615.87
    7 Август, 2013, 18:48

    Спасибо. Прочитал с интересом. Блог в избранное занес=)

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

Наверх