SEO Маяк

Всем привет! Я давно обещал рассказать, как сделать на сайте блок «ТОП комментаторов» без плагина. Ну что же, пришло время выполнить свое общение.

Тем более, после выхода статьи «Сквозные ссылки» меня просто завалили письмами с просьбами объяснить, как закрыть ссылки от индексации в данном блоке. Ну вот заодно и об этом расскажу.

Я написал функцию, в которой можно использовать ссылки с nofollow или активировать скрипт, на Ваш выбор.

Целесообразность размещения ТОПа комментаторов на блогах я бы не ставил под сомнение, так как именно на блогах пользователи оставляют свои комментарии чаще, чем на всех остальных CMS и было бы не лишнем как-то отмечать активность того или иного комментатора, что конечно должно сказаться на количестве желающих высказаться.

Поисковые системы выделяют отдельных роботов для работы с зоной комментирования и тексты комментариев участвуют в поиске наравне с текстами самих постов.

При размещении блока «Топ комментаторов» (обычно в сайдбаре), лучшие комментаторы (обычно от 5 до 10) получает ссылки на свои сайты (если они конечно есть), что и служит своего рода наградой за активность. НО! Многие веб-мастера даже не подозревают, какой вред несут эти ссылки. Почему? Это я подробно описал в статье «Сквозные ссылки».

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

Итак, в данной статье мы разберем функцию, которая выводит аватары комментаторов, а также ссылки на их сайты. Поехали!

Функция вывода блока «ТОП комментаторов»

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

Данную функцию надо вставить в файл funсtions.php, что находится папке с темой.

 // начало формы ТОП-комментаторов 
 function mayak_top_commentator(){
 global $wpdb;
 $mayak_number_of_comments = true;
 $mayak_sorting = false; 
 $mayak_number_of_rows = 1; 
 $mayak_avatar_size = 50; 
 $mayak_number_of_characters = 15;  
 $mayak_number_of_commentators = 5; 
 $mayak_email_exception = 'Ваш e-mail'; 
 $mayak_script = false; 
 $mayak_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 != "" && comment_type = "" && comment_approved = 1 && comment_author_email NOT IN ('.preg_replace('/([\w\d\.\-_]+@[\w\d\.\-_]+)(,? ?)/','"\\1"\\2',$mayak_email_exception).')'.($mayak_sorting  ? '&& month(comment_date) = month(now()) && year(comment_date) = year(now())' : '').'GROUP BY comment_author_email ORDER BY comments_count DESC LIMIT '.$mayak_number_of_commentators);
 $mapping = "<div class='commentator'><table width='100%'><tr align='left' valign='top'>";
 $i = 0;
 foreach($mayak_results as $result){
 if ($i>=$mayak_number_of_rows) {
 $mapping .= "</tr><tr align='left' valign='top'>";
 $i = 0;
 }
 $i++;
 $mapping.= "<td><div class='avatar-author'>".get_avatar($result->comment_author_email,$mayak_avatar_size)."</div><div class='name-author'>";
 if ($mayak_number_of_characters and $mayak_number_of_characters<mb_strlen($result->comment_author)) $result->comment_author = trim(mb_substr($result->comment_author, 0, $mayak_number_of_characters)).'.';
 if ($result->comment_author_url)
 if ($mayak_script)
 $mapping.= "<span class='external-reference' data-link='".$result->comment_author_url."'>".$result->comment_author."</span>";
 else
 $mapping.= "<a target='_blank' rel='nofollow' href='".$result->comment_author_url."'>".$result->comment_author."</a>";
 else
 $mapping.= "<b>".$result->comment_author."</b>";
 if ($mayak_number_of_comments) $mapping .= "(".$result->comments_count.")";
 $mapping.= "<div style='clear:both;'></div></div></td>";
 }
 if ($i<=$mayak_number_of_rows) 
 $mapping.= "</tr>";
 $mapping.= "</table></div>";
 echo $mapping;
}
// конец формы ТОП комментаторов 

Строчка №4:

$mayak_number_of_comments = true;

В этой строчке мы разрешаем (true) или запрещаем (false) показывать количество оставленных комментариев тем или иным пользователем.

Строчка №5:

$mayak_sorting = true; 

В данной строчке мы задаем временные параметры, с учетом которых функция будет обрабатывать комментарии: true — за последний месяц, false — за все время.

Строчка №6:

$mayak_number_of_rows = 1;

Задаем количество колонок в блоке (1 — одна колонка, 2 — две колонки и т.д.).

Строчка №7:

$mayak_avatar_size = 50;

Здесь мы задаем размер аватара комментатора (50 — это размер аватара в пикс).

Строчка №8:

$mayak_number_of_characters = 15;

В данной строчке мы можем задать максимальное число символов в имени комментатора. Если в имени будет больше символов, чем указанно в настройках, то оно обрежется (15 — максимальное количество символов). Понятно, что некоторые имена бывают очень длинными и если их не обрезать, то символы вылезут за рамки блока, что конечно не допустимо.

Строчка №9:

$mayak_number_of_commentators = 5;

В этой строчке мы можем задать количество комментаторов для отображения в блоке (5 — пять комментаторов).

Строчка №10:

$mayak_email_exception = 'Ваш e-mail';

Сюда надо вписать Ваш e-mail, под которым Вы отвечаете на комментарии, т.е. который вписан в настройках WordPress (Пользователи -> Ваш профиль). Надо это для того, чтобы не учитывались комментарии автора сайта, другими словами — это мыло исключения.

Строчка №11:

$mayak_script = false; 

В этой строчке, можно включить (true) или отключить (false) привязку скрипта, который скроет от поисковиков ссылки на сайты авторов комментариев. Если поставить false, то ссылки будут выведены в обычном виде с атрибутом nofollow.

Здесь важно понимать, что для успешной активации скрипта, прежде должны быть выполнены все условия, описанные в статье «Как скрыть ссылку с помощью jQuery и AJAX».

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

<div class="top-comments"><?php mayak_top_commentator(); ?></div>

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

Стили для блока «Топ комментаторов»

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

Также в функции задано три класса:

class='commentator' — стили для всей таблицы;
class='avatar-author' — стили для аватаров;
class='name-author' — стили для строчек с именем автора комментариев.

И отдельный класс, который будет воздействовать на весь блок:

class="top-comments">

Далее, открываем файл style.css и вставляем следующие стили для вышеописанных классов:

/*** Стили блока "ТОП комментаторов" ***/
/* Стили для всего блока */
.top-comments {  
width:350px; /* Ширина блока */
height:100%; /* Высота блока */
margin:10px 0 0 10px; /* Внешние отступы */
border:#F5F5F5 solid 1px; /* Рамка вокруг блока */
border-radius:10px 10px 10px 10px; /* Закругляем углы (не обязательно) */
box-shadow:#F5F5F5 2px 4px 5px,#F5F5F5 0 0 5px inset; /* Тень для рамки (не обязательно) */
background:#FFFFFF; /* Цвет фона */
}
/* Стили для таблицы в целом */
.сommentators table {
background:url(images/top5.png) no-repeat left; /* Подключаем изображение */
margin:10px 0px 10px 20px; /* Отступа от таблицы до рамки блока */
}
/* Стили для ячеек таблицы */
.сommentators table td {
padding:0 5px 15px 5px; /* Внутренние отступы */
}
/* Стили для аватаров */
.avatar-author img {
border:1px solid #ffffff; /* Толщина, тип и цвет рамки для аватара (не обязательно)*/
margin-left:120px; /* Внешний отступ от левого края */
box-shadow:3px 3px 3px #464646; /* Тень для аватара (не обязательно) */
-webkit-box-shadow: 5px 5px 15px #464646; /* Размываем тень (не обязательно) */
}
/* Стили для строчек с именам */
.name-author {
margin:-30px -10px 10px 180px; /* Внешние отступы */
}
/* Стили для строчек с именам, когда имя ссылка */
.name-author a {
color:#003964; /* Цвет текста */
font-weight:bolder; /* Жирность текста */
font-size:12px; /* Размер шрифта */
} 
/* Стили для строчек с именам, когда имя текст */
.name-author b {
color:#003964; /* Цвет текста */
font-weight:bolder; /* Жирность текста */
font-size:12px; /* Размер шрифта */
}
/*** Конец стилей блока "ТОП комментаторов" ***/

Вот в принципе и все, должен получиться блок «Топ комментаторов» как у меня на блоге, единственное, что картинка будет другая. Кстати о картинке. Я постарался подробно описать значения каждого селектора, но как мне кажется на одном моменте надо остановиться отдельно.

background:url(images/top5.png) no-repeat left; /* Подключаем изображение */

В этой строчке мы подключаем служебное изображение, которое должно находиться в папке «images» вашей темы.

top5.png — название картинки и ее расширение;
no-repeat — запрет на размножение картинки;
left — прижимаем картинку к левому краю блока.

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

Конечно, не у всех может сразу получится корректно отобразить «ТОП комментаторов» на странице. У кого-то могут мешать особенности шаблона, кому-то просто надо еще набраться знаний, но помните одно: безвыходных ситуаций в сайтостроении не бывает! Впрочем как и в реальной жизни.

На этом можно было бы закончить статью, но мне показалось, что одного варианта блока «ТОП комментаторов» будет недостаточно, поэтому я решил предложить Вам еще один набор стилей. К тому же это послужит неким закреплением материала.

Еще один вариант блока «ТОП комментаторов»

В данном варианте блока я выведу не пять лучших комментаторов, а девять. Для этого надо изменить настройки в функции. В строчке №8 меняем цифру 5 на 9:

$mayak_number_of_commentators = 9;

А также надо задать нужное количество колонок. В строчке №5 меняем 1 на 3:

$mayak_number_of_rows = 3;

Далее, открываем файл style.css и вставляем такие стили:

/*** Стили блока "Топ комментаторов" ***/
.top-comments {
width:350px;
border-radius:10px 10px 10px 10px;
box-shadow:#F5F5F5 2px 4px 5px,#F5F5F5 0 0 5px inset;
border:#F5F5F5 solid 1px;
margin:10px 0 0 10px;
height:100%;
background:#FFFFFF;
}
.сommentators table {
margin:10px 0px 10px 20px;
}
.сommentators  td {
padding:0 5px 15px 5px; 
width:80px;

}
.avatar-author img {
border:1px solid #ffffff;
margin:0 0 10px 0;
-webkit-box-shadow: 5px 5px 15px #464646;
}
.name-author {
width:80px;
}
.name-author a {
color:#003964;
font-weight:bolder;
font-size:12px;
} 
.name-author b {
color:#003964;
font-weight:bolder;
font-size:12px;
}
/*** Конец стилей  блока "Топ комментаторов" ***/

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

В итоге должно получится так:

Так сказать, ближе к стандартному варианту.

Дерзайте, и не примените подписаться на обновления блога, в будущем будет также интересно!

До встречи!

С уважением Виталий Кириллов