Logo

Навигация
  • Верстка
    • WordPress
    • HTML5
    • CSS3
    • Responsive
    • jQuery & Javascript
  • Дизайн
    • Респонсив
    • Графика
    • Юзабилити
    • Типографика
  • Технологии и Интернет
    • Веб-сервисы
    • SEO
    • Маркетинг
    • Разное
  • Mobile
    • Apple
    • Android
    • Windows
  • Вдохновение
    • Веб-сайты
    • Креатив
    • Юмор
  • Скачать
  • Tools
    • CSS3 Генератор Кода

Создаем блок “Топ комментаторов” на сайте

Александр Маврин | Май 29, 2013 | 0 комментариев
CSS3 Верстка
топ комментаторов на сайте

Можно долго описывать пользу плагина “Топ комментаторов”, но одно могу сказать точно, если хотите сделать свой блог популярным в блогосфере и повысить трафик, то подобная функция будет весьма кстати. Обычно посетители на блоге не очень активно комментируют статьи, даже если они интересные. Но если установлен виджет топа комментаторов, то сразу же начинается движение и каждый хочет оказаться на верхней позиции рейтинга, чтобы все увидели ссылку на его сайт. Такая вот мотивация получается и главное, что все от этого выигрывают. И сейчас мы разберем, как реализовать блок комментаторов на блоге без плагина. Немного терпения и все получится. Итак, поехали.

Некоторые плагины можно заменять простой вставкой кода и это хорошее альтернативное решение, которое снижает нагрузку на сайт. Первое, что нужно сделать, это добавить код в файл functions.php. Если у вас нет такого файла, то его нужно создать и не забудьте про кодировку UTF-8 без BOM. Добавляем в файл этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
function sp_top_commentator(){
global $wpdb;
$length = 0;
$month = false
$comment = true;
$nofollow = true;
 
$count = 9;
$col = 3;
 
$avatarSize = 40;
$exceptionEmail = '[email protected] , [email protected] ';
 
$results = $wpdb->get_results('
SELECT
COUNT(comment_author_email) AS comments_count, comment_author_email, comment_author, comment_author_url
FROM
(select * from '.$wpdb->comments.' order by comment_ID desc) as pc
WHERE
comment_author_email != "" AND
comment_type = "" AND
comment_approved = 1 AND
comment_author_email NOT IN ('.preg_replace('/([\w\d\.\-_]+@[\w\d\.\-_]+)(,? ?)/','"\\1"\\2',$exceptionEmail).')'.
($month ? 'AND month(comment_date) = month(now()) AND year(comment_date) = year(now())' : '').
'GROUP BY
comment_author_email
ORDER BY
comments_count DESC
LIMIT '.$count
);
 
$output = "<div class='top-comment'><table><tr>";
$i = 0;
foreach($results as $result){
if ($i>=$col) {
$output .= "</tr><tr>";
$i = 0;
}
$i++;
$output .= "<td><div class='avatar-top'>".get_avatar($result->comment_author_email,$avatarSize)."</div><div class='avatar-comment'>";
if ($length and $length<mb_strlen($result->comment_author)) $result->comment_author = trim(mb_substr($result->comment_author, 0, $length)).'.';
if ($result->comment_author_url)
if ($nofollow)
$output .= "<a target='_blank' rel='nofollow' href='".$result->comment_author_url."'>".$result->comment_author."</a>";
else
$output .= "<a target='_blank' href='".$result->comment_author_url."'>".$result->comment_author."</a>";
else
$output .= $result->comment_author;
 
if ($comment) $output .= "(".$result->comments_count.")";
$output .= "<div style='clear:both;'></div></div></td>";
}
if ($i<=$col) $output .= "</tr>";
$output .= "</table></div>";
echo $output;
}

Теперь немного подробнее о функциях, которые прописаны в самом начале.

1
2
3
4
5
6
7
8
9
$length = 0;  // Длина имени
 
$month = false;  // true - за текущий месяц, false - за все время
    $comment = true;  // Показывать количество комментариев
    $nofollow = true;  // ссылки nofollow
    $count = 9;   // количество комментаторов
    $col = 3;   // количество колонок
    $avatarSize = 40;   // размер аватара в пикселях
    $exceptionEmail = '[email protected] , [email protected] '; // исключить адреса

Мы вставили основные функции для отображения блока ТОП комментаторов и теперь давайте включим его там, где хотим видеть. Обычно для этого используют сайдбар. Нужно открыть на редактирование файл sidebar.php и вставить в него функцию:

1
<!--?php sp_top_commentator(); ?-->

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
function sp_commentator_winners(){
    global $wpdb;
    $length = 0
 
$comment = true
    $nofollow = true;
    $col = 3
    $avatarSize = 40;
 
$exceptionEmail = '[email protected] , [email protected] ';
    $countWinners = 3;
    $results = $wpdb->get_results('
        SELECT
            COUNT(comment_author_email) AS comments_count, comment_author_email, comment_author, comment_author_url
        FROM
            (select * from '.$wpdb->comments.' order by comment_ID desc) as pc
        WHERE
            comment_author_email != "" AND
            comment_type = "" AND
            comment_approved = 1 AND
            comment_author_email NOT IN ('.preg_replace('/([\w\d\.\-_]+@[\w\d\.\-_]+)(,? ?)/','"\\1"\\2',$exceptionEmail).') AND
            month(comment_date) = month(now() - interval 1 month)
        GROUP BY
            comment_author_email
        ORDER BY
            comments_count DESC
        LIMIT '.$countWinners
    );
 
    $output = "</pre>
<div class="top-comment">";     $i = 0;     foreach($results as $result){         if ($i>=$col) {             $output .= "";             $i = 0;         }         $i++;         $output .= " ";     }     if ($i<=$col) $output .= " ";     $output .= "
<table width="100%">
<tbody>
<tr>
<td>
<div class="avatar-top">".get_avatar($result->comment_author_email,$avatarSize)."</div>
<div class="avatar-comment">";
        if ($length and $length<mb_strlen($result->comment_author)) $result->comment_author = trim(mb_substr($result->comment_author, 0, $length)).'.';
        if ($result->comment_author_url)
            if ($nofollow)
                $output .= "<a href="&quot;.$result->comment_author_url.&quot;" target="_blank" rel="nofollow">".$result->comment_author."</a>";
            else
                $output .= "<a href="&quot;.$result->comment_author_url.&quot;" target="_blank">".$result->comment_author."</a>";
        else
            $output .= $result->comment_author;
 
        if ($comment) $output .= "(".$result->comments_count.")";
        $output .= "
<div style="clear: both;"></div>
</div></td>
</tr>
</tbody>
</table>
</div>
<pre>
";
    echo $output;
}

Функция $countWinners  говорит о том, сколько победителей выводить в блоке. По умолчанию установлено 3, но вы можете менять это значение на свое. И так же в sidebar.php добавляем функцию вывода победителей:

1
<!--?php sp_commentator_winners(); ?-->

Дело осталось за малым – красиво оформить блок топа комментаторов при помощи CSS стилей. Здесь, я думаю, к каждому шаблону придется писать свои стили, чтобы гармонично встроить блок в дизайн, но все же возможно кому-то даже не придется редактировать этот код:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.top-comment {
 
    height:100%;
}
 
.top-comment table {
    min-height: 100%;
    height:100%;
    width:100%;
}
 
.top-comment table tr {
   text-align:center;
   vertical-align: top;
}
 
.top-comment table td {
    padding:0 5px 15px 5px;
}
 
.top-comment .avatar-top img {
    padding: 3px;
    background: white;
    border-image: initial;
    border: 1px solid #D0D0BB;
    margin: 0 0 3px 0;
}
 
.top-comment .avatar-comment {
    font-size: 12px;
}

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

Поделиться статьей:
  • tweet

Об Авторе

Александр Маврин - Автор блога SerBlog.ru - блог о заработке в интернете, компьютерах, программах, создании сайтов и многом другом.

    Тзги: wordpressуроки

    Новые статьи

    • Как создать меню в стиле Apple при помощи одного CSS3 без использования картинок

      Февраль 19, 2014 - 0 комментариев
    • Подборка креативных дизайнов корпоративных сайтов за Февраль 2014

      Февраль 18, 2014 - 0 комментариев
    • Как стилизовать полосы прокрутки (скроллинг) в Webkit-браузерах

      Февраль 12, 2014 - 0 комментариев

    Это интересно

    • Полезные крючки и фильтры для Вордпресса

      Январь 18, 2014 - 0 комментариев
    • Встречайте обновление Вордпресс 3.8 “Паркер”

      Декабрь 13, 2013 - 0 комментариев
    • Настройка wp-config для расширения функционала WordPress сайта

      Декабрь 3, 2013 - 0 комментариев

    Зафрэндимся?

    Получайте первыми новые уроки и статьи! Еженедельные розыгрыши и конкурсы среди подписчиков!

    Человек 841 Человек
    • Популярное
    • Новые
    • Комментарии
    • Бесплатный билет на Design Camp? Совместная акция Microsoft и WebDesignMagazine.ru

      Ноябрь 27, 2013 - 19 комментариев
    • 8 HTML5 и CSS3 сниппетов для разработки и дизайна новых проектов

      Август 25, 2013 - 4 комментариев
    • 2D графика. Талант и многогранность Александра Дягилева

      Январь 27, 2014 - 4 комментариев
    • Звездные войны в CSS

      Май 31, 2013 - 4 комментариев
    • Возврат к основам или как создать HTML5 шаблон?!

      Октябрь 7, 2013 - 4 комментариев
    • Как создать меню в стиле Apple при помощи одного CSS3 без использования картинок

      Февраль 19, 2014 - 0 комментариев
    • Подборка креативных дизайнов корпоративных сайтов за Февраль 2014

      Февраль 18, 2014 - 0 комментариев
    • Как стилизовать полосы прокрутки (скроллинг) в Webkit-браузерах

      Февраль 12, 2014 - 0 комментариев
    • Fotolia TEN – Третий сезон открыт!

      Февраль 11, 2014 - 0 комментариев
    • Повтори олимпийский рекорд и выиграй шаблон для сайта со скидкой в 50%

      Февраль 11, 2014 - 0 комментариев
    • Ознакомление с CSS модулем Flexbox

      А не плохая вещь, беру на заметку,...
      Февраль 4, 2014 - JamaRolex
    • 2D графика. Талант и многогранность Александра Дягилева

      Благодарю!) Приятно слышать ;)
      Февраль 4, 2014 - Александр
    • Добавляем свой CSS в любой пост или страницу на Вордпрессе

      Благодарю! Отличный и простой хак! И...
      Февраль 3, 2014 - Андрей Семенов
    • 2D графика. Талант и многогранность Александра Дягилева

      Да, кто бы мог подумать что в Удмуртии...
      Февраль 2, 2014 - Александр
    • Оптимизация JavaScript при помощи RequireJS

      Спасибо, я, правда, свой костыль делал,...
      Февраль 1, 2014 - plutov.by

    Популярные тэги

    android Apple css css3 fotolia html5 javascript jquery mobile responsive SEO typography wordpress адаптивное адаптивный анимация бесплатно бесплатные бизнес вдохновение веб веб-дизайн веб-сайт веб-сайты верстка вордпресс дизайн креатив маркетинг меню мобильные приложения плагины портфолио разработка реклама респонсив скачать сниппет темы технологии типографика уроки шрифты юзабилити юмор

    Опрос на этой неделе:

    Партнеры

    300x250 V1
    • ¡

      О Нас

      Познакомимся ближе! Немного о себе и портале

    • =

      Работа

      Пишете статьи? Станьте автором нашего журнала!

    • X

      Реклама

      О Вас узнают десятки тысяч посетителей!

    • L

      Есть Идеи?

      Поделитесь с нами своими предложениями

    • Главная
    • О Нас
    • Работа
    • Архив
    • Пользовательское cоглашение
    • Реклама на сайте
    • Партнеры
    • Контакты
    © 2013. Все права защищены. Перепечатка материалов возможна с сохранением ссылки на источник, а также изменением заголовка статьи и содержимого.