Как добавить на сайт адаптивный блок топ комментаторов..?

реализуем адаптивный топ-блок комментаторов

Продолжим оптимизировать блог.

…эта статья продолжение… Добавляем топ комментаторов на сайт, без плагина А значит в подробностях сегодня толковать не стану: кто не читал, пройдите, взгляните…

А мы же приступим к АДАПТИВНОМУ делу, после которого у вас на сайте наконец-таки заработает совершенно адаптивный блок ТОП-комментаторов.

Мне недавно посетовали…

… “вот, мол, в инете сплошняком перепосты и отыскать полезное затруднительно… Так много хлама набралось со времён рождения блогерства: пора бы и вычистить…”

Это касалось статей о добавлении на свой сайт ТоП-комментаторов и того, что все мануалы в сети описывают НЕАДАПТИВНЫЙ вариант вывода ТОПА “а сейчас, как воздух, нужен вывод АДАПТИВНЫХ Топ комментов…”

И вот, крепенько подумав, я написал такой коротенький пост посвящённый АДАПТАЦИИ ТОП комментов (в добавку к первому посту).

Но действительно, полазив в интернете (вероятно не внимательно) ничегошеньки путного не нашёл! Правда меня Яшка упорно выводил на один сайт, в котором был показан “полезный” код, но тот увы – нерабочий.

Я не стал искать ошибку (лень-батюшка), а просто кое-что подпилил-подправил и даю вам совершенно рабочий код ТоПкомментаторов как в PHP решении, так и в CSS.

Вот собственнолико код, который нужно прописать в файл функций functions.php

//НАЧАЛО ТОП
    function sp_top_commentator(){
       global $wpdb;
       $length = 7;//Макс... длинна имени комментатора в символах, если стоит 0, то имя не обрезается
       $month = false;     // true - за текущий месяц, false - за все время
       $comment = false;    // показывать количество комментариев true
       $nofollow = true;   // ссылки nofollow false
       $count = 6;         //число иконок
       $col = 3;           //количество колонок оставивших коммы
       $avatarSize = 42;   //размер аватарки
       $exceptionEmail = 'эл/почта@ya.ru, эл/почта@yandex.ru, эл/почта@gmail.com';
       $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 = "comment" 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-comments-mihalica'><div class='top-comments-avatar'>".get_avatar($result->comment_author_email,$avatarSize)."</div><div class='top-comments-nameavatar'>";
        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 и пропишите в этот документ стили же ИЗЯЩЕСТВА CSS.

Вот эти полезные стили топ-весёлых…

/*ТОПкомментS*/
.top-comments-block{width:100%;font-size:12px;line-height:22px;margin:0;padding:0}
.top-comments-mihalica{display:block;float:left;margin-right:5px;margin:0;text-align:center;width:100px}
.top-comments-avatar img{width:42px;height:42px/*;float:left*/;padding:2px;background:white;border-image:initial;margin:0px 3px 4px}
.top-comments-nameavatar{}
@media only screen and (max-width:1200px) {
.top-comments-mihalica{width:58px;margin-right:1px}
}
/*@media only screen and (max-width:800px) {
.top-comments-block{
     display:none;
}
}*/
/* =END ......*/

…на этом, собственно, и всё!

Для более подробной инструкции пройдите по ссылке, расположенной в начале поста.

Также хочу сказать тем, которые ещё НЕ задали отработку PHP в виджете (ибо обычно прописывают вывод ТОП в боковую панель), прочтите и установите код… Иначе прописка ТОПА может не заработать… (в зависимости от вашей темы)

…И финальное, перед занавесом…

Ниже строка, отвечающая за вывод самой формы ТОПА, которую и нужно прописать в виджет: (А вот статья о настройке удобного ЗАПРЕТА/ВЫВОДА самих виджетов – как вариант, widget visibility позволит задавать отображение виджетов в определённых разделах сайта widgets-control и widget visibility)

<?php sp_top_commentator();?>

А вот кстати и видео правильного добавления кода рекламы на сайт…