Вывод последних комментариев в виджете с аватаркой

Приветствую! В сегодняшнем посте (статье) речь пойдет о том, как изменить виджет последних комментариев вордпрес, точнее даже не изменить, сделать собственный. Последние комментарии в вордпресс выводятся виджетом, который можно разместить в правом или левом сайдбаре (зависит от темы, которую вы используете).
В основном вывод данных комментариев только текстовой, это: ник автора, название поста к которому был добавлен комментарий и вырезка с комментария, скучновато как-то.
Я же предлагаю немного приукрасить данный вывод последних комментариев добавив аватарку комментатора.
Чтобы было понятнее, смотрим на скриншоты ниже
Стандартный вывод последних комментариев

Что я предлагаю

Думаю без комментариев, так как разница ощутимая между первым и вариантом, что можно сделать. К, стати для того чтобы выдоилась ваше фото возле комментариев необходимо зарегистрироваться в сервисе граватар, что такое Граватар.

Установить комментарии в виджете с аватаркой

И, так приступим к реализации выше упомянутого. Копируем ниже приведенный код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<?php
    global $wpdb;
    $sql = "SELECT DISTINCT ID, post_title, post_password, comment_ID, comment_post_ID, comment_author_email, comment_author, comment_date_gmt, comment_approved, comment_type,comment_author_url,
    SUBSTRING(comment_content,1,25) AS com_excerpt FROM $wpdb->comments LEFT OUTER JOIN $wpdb->posts ON ($wpdb->comments.comment_post_ID = $wpdb->posts.ID)
    WHERE comment_approved = '1' AND comment_type = '' AND post_password = '' ORDER BY comment_date_gmt DESC
    LIMIT 5";
    $comments = $wpdb->get_results($sql);
    $output = $pre_HTML;
    $output .= "\n<ul class='moilast-com'>";
    foreach ($comments as $comment) {
    $output .= "\n<li>" .get_avatar($comment->comment_author_email, 52 ). "<div class='ccc'>"
    ."<span class='cccont'>" .strip_tags($comment->comment_author)
    ." к статье " . "<a href=\"" . get_permalink($comment->ID) .
    "#comment-" . $comment->comment_ID . "\" title=\"Комментарий к статье " .
    $comment->post_title . "\">" . get_the_title($comment->comment_post_ID) ."</a><br />"
    ."<span>" .strip_tags($comment->com_excerpt)."</span></span></div>" . "</li><li style='clear: both; line-height: 1px;'></li>";
    }
    $output .= "\n</ul>";
    $output .= $post_HTML;
    echo $output;
?>

и размещаем его в виджите «Произвольный текст или HTML-код» сохраняем и просматриваем на работоспособность. Если не работает и не отображается, а получилось абракадабра, не паникуем. Значить ваша тема не поддерживает вставку языка php в текстовом виджетте, это устраняется установкой плагина WP PHP widget – вывести код php в сайдбар.
Также код можно установить в файл sidebar.php в этом случаи плагин не понадобится.

Давайте разберемся с самим кодом, что к чему и где вы можете задать свои параметры
и, так
строка 4 comment_content,1,25 — число 25 показывает количество символов с комментария (можно установить 0).
строка 11 comment_author_email, 52 — число 52 — это размер аватарки (задаем, свой так чтобы вписывался в дизайн сайта).

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

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

ul.moilast-com {
	margin: 0; padding: 0;
	font: 12px Verdana;
	color: #000000;
}
.moilast-com li {
	list-style: none;
        line-height: 18px;
        margin-bottom: 10px;
}
ul.moilast-com img {
	float: left;
	margin: 0 5px 8px 0;
	border: 1px solid #000000;
}
.moilast-com a {
	color: #ccc;
        text-decoration: underline;
}
.moilast-com a:hover {
	color: #000000;
        text-decoration: underline;
}
.moilast-com ccc {
	margin-left: 3px;
}

Сохраняем.
Вот и все, если лень все это проделывать тогда можете, установить плагин Decent Comments реализовывает все-то же самое что было описано выше.

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.moilast-com img {
	transition: all 0.5s;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	-o-transition: all 0.5s;
	-ms-transition: all 0.5s;
}
.moilast-com li:hover img {
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
}

Удачи