Код для вывода топ комментаторов на сайте WordPress с адаптивным дизайном

24 Май 2014

Код для вывода топ комментаторов на сайте WordPress с адаптивным дизайномРешила добавить в этом блоге вывод лучших комментаторов, и конечно же без участия плагинов, потому что я большая поклонница правила «чем меньше плагинов — тем лучше». Самое лучшее решение нашла у моего любимого SEOлетика — топ комментаторов без плагина в WordPress.

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

Код для вывода топ комментаторов адаптивного блога на WordPress без плагина

Чтобы добавить топ комментаторов необходимо найти в шаблоне активной темы оформления нужные файлы и добавить к ним следующий код:

В файл functions.php, в конце страницы:

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

function sp_top_comment(){
    global $wpdb;
    $length = 0;       // Максимальная длинна имени в символах, если стоит 0, то имя не обрезается
    $month = false;    // true - за текущий месяц, false - за все время
    $comment = true;   // показывать количество комментариев
    $nofollow = false; // ссылки true - nofollow
    $count = 15;       // количество комментаторов
    $avatarSize = 70;  // размер аватара
    $exceptionEmail = 'olunka-com@ya.ru, olunka-com@yandex.ru'; // мыла-исключения
    $lengthMin = 10;    // минимальное количество символов в учитываемом комментарии
    $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.' where CHAR_LENGTH(comment_content) > '. $lengthMin .' 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,
            comment_ID ASC
        LIMIT '.$count
    );
 
          $output = "<div class='top-comment-block clearfix'>";
          foreach($results as $result)
          if ($count>0) {
        $output .= "<div class='top-comment-item'><div class='top-comment-avatar'>".get_avatar($result->comment_author_email,$avatarSize)."</div><div class='top-comment-name'>";
        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></div>";
          $count=$count-1;
          }
          $output .= "</div>";
          echo $output;
 
}

В файл стилей, обычно он называется style.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-block {
     width:100%;
     font-size:12px;
     line-height:12px;
     margin:0;
     padding:0;
}
 
.top-comment-item {
     display:block;
     float:left;
     margin-right:5px;
     margin:0;
     text-align:center;
     width:100px;
     height:110px;
}
.top-comment-avatar img {
     border:2px solid #bed4df;
}
@media only screen and (max-width:1400px) {
.top-comment-item {
     width:70px;
     margin-right:5px;
}
}
@media only screen and (max-width:800px) {
.top-comment-block {
     display:none;
}
}

Вызов функции можно осуществить в любом месте сайта (обычно для этого выбирают сайдбар или футер) с помощью этого кода:

1

<?php sp_top_commentator(); ?>

Как настроить вывод топ комментаторов на адаптивном сайте на WordPress

Код для вывода топ комментаторов на сайте WordPress с адаптивным дизайномС настройками вам помогут подробные комментарии в функции и файл стилей. Сами окошки комментаторов, содержащие граватар и ник — это блоки со свойством float:left, что означает, что они сами будут перетекать на следующую строку, если им не будет хватать места в ширину. Для экранов, ширина которых менее 800px, я поставила свойство display:none (скрыть) на весь топ комментаторов, потому что считаю, что на таких малых экранах вывод комментаторов не оправдан ни функционально, ни стилистически.

Результат работы этого кода выглядит так, ка показано на картинке, либо вы можете увидеть работу этого кода в футере сайта Olunka.ru.

Похожие статьи