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

Поехали

Приведенный код нужно вставить в то место шаблона где бы Вы хотели чтобы отображался список комментариев:

<?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,30) 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='last-com'>";
    foreach ($comments as $comment) {
    $output .= "\n<li>" .get_avatar($comment->comment_author_email, 32 ). "<div class='cc'>"
    ."<span class='ccont'>" .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;
?>

Давайте разберемся:

  1. Объявляем глобальную переменную $wpdb.
  2. Создаем переменную $sql в которую помещаем запрос к базе данных.
  3. Строкой 6 определяем количество выводимых комментариев.
  4. Задаем переменную $comments в которую помещаем результат запроса к БД.
  5. Определяем язык разметки HTML и создаем вывод ненумерованного списка <ul>.
  6. Запускаем цикл foreach.
  7. Выводим имя и аватар комментатора get_avatar($comment->comment_author_email, 32 ), где 32 это размер аватара в пикселях.
  8. Для вывода имени автора комментария, ссылки на комментарий и собственно начала комментария создадим блок <div class="cc"> (строка 11).
  9. Выводим в строке 13 после имени комментатора слова " к статье " – можете изменить на свое значение.
  10. Выводим название и ссылку на комментарий и задаем значение title=\"Комментарий к статье " – Вы можете написать здесь что Вам нравится (строка 14).
  11. Ну и напоследок в строке 16 задаем сброс выравнивания <li style='clear: both; line-height: 1px;'>.

Придадим стилей нашему списку:

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

Пример

Вы можете увидеть на главной странице в правом столбце «Комментарии».

Добавить комментарий:


Комментарии
  1. Юрий

    Здравствуйте. Спасибо за код.
    Скажите пожалуйста, а как настроить вывод комментариев определенной категории? Буду очень благодарен

  2. Кристина

    Скажите пожалуйста, в какой файл нужно вставить Ваш код, или какой блок, — непонятно (и первый, и второй!)?

  3. JAH

    Кристина, нужно первый кусок кода вставить в sidebar.php (например) а второй в файл style.css/

    Вместо сайдбара можно использовать любой файл шаблона

  4. Антон

    Автору респект за код и доходчивый урок.

  5. Антон

    Вот еще бы аватарки так же крутились было бы совсем замечательно 🙂

  6. JAH

    Антон, чтобы аватарки крутились нужно им прописать в стилях некоторые правила [но они только в современных браузерах будут работать]

    Если за основу брать классы из этой статьи, то правила такие:

    .last-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;
    }
    .last-com li:hover img {
    	transform: rotate(360deg);
    	-webkit-transform: rotate(360deg);
    	-moz-transform: rotate(360deg);
    	-o-transform: rotate(360deg);
    	-ms-transform: rotate(360deg);
    }
    
  7. Антон

    Спасибо отец, ты молодец. Я их сейчас у себя на сайте час крутить буду 🙂

  8. JAH

    Антон, я тоже их долго крутил))

  9. Антон

    Оппа, а комменты с disqus этот хак не поддерживает? Пичалька прям получается.

  10. JAH

    Антон, да не поддерживает 🙁

    но судя по этому http://htmlbook.ru/blog/novye-varianty-povtoreniya-fonovoi-kartinki-v-css3 см там где комментарии disqus то походу есть какаято встроенная функция которая выводит все таки последние(или случайные) комментарии [с disqus не работал]

  11. Макс

    Помогите пожалуйста, нужно чтобы при наведении не аватарка крутилась, а именно как у вас плавно каждый коммент другим фоном выделяется! Как реализовать такое? Заранее спасибо!

  12. JAH

    Макс, нужно добавить правило в стили при наведении (в данном примере на элемент списка li[контейнер комментария])

    .last-com li:hover {
    	background-color: #e8e8e8;
    }
  13. Макс

    Спасибо, но все равно не так как у Вас. Хотелось бы в точности именно как на Вашем сайте, со всеми плавными переходами, с красивыми наклонами при наведении и т.д., а не крутилка аваторов на 360 как у меня сейчас(( подскажите плиз! Можете на мыло если что!

  14. JAH

    Макс, написал тебе пример на почту, сюда долго писать

  15. Дмитрий

    Спасибо! А как можно вывести полный текст комментария с форматированием?

  16. RomanZmeu

    Спасибо. Пригодилось для моего блога

  17. Светлана

    Подскажите, пожалуйста, что можно прописать в код, чтобы комментарии на определенные записи не попадали в список (например, комментарии к странице Спасибо за первый комментарий? Спасибо.

  18. JAH

    Светлана, только такое придумывается поменять:

    $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,180) 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 = '' AND comment_post_ID != '1188' AND comment_post_ID != '517' ORDER BY comment_date_gmt DESC LIMIT $viewNumber";

    Вам нужно добавить id страницы/записи:

     comment_post_ID != '1188'
  19. Светлана

    Спасибо. Получилось.

  20. Светлана

    Добрый день. Извините за наглость, а как можно сделать вывод комментариев к определенной странице? Поясняю. Хочу создать страницу для общения посетителей (форум отпадает, в свое время я от него отказалась). И в сайтбаре отдельно вывести последние комментарии к этой странице (без аватарок). Если отредактировать предложенный Вами код, где можно указать эту страницу?
    Спасибо.

  21. JAH

    Свтелана))
    ну все же просто, вместо
    AND comment_post_ID != '1188' AND comment_post_ID != '517'
    нужно написать
    AND comment_post_ID = '834'
    где 834 — это id записи к которой нужно вывести комментарии

  22. Светлана

    Как всегда, огромное спасибо 🙂

  23. JAH

    Светлана, рад помочь) извини что долго

  24. Светлана

    Добрый день. С прошедшими праздниками.
    У меня к Вам появился вопрос 🙂 Сейчас многие ставят на сайт формы комментариев от соц.сетей (вконтакте, фейсбук). Можно ли включить эти комментарии в код, чтобы оставленные через эти формы комментарии отображались наряду с комментариями вордпресс в виджете?
    Спасибо.

  25. JAH

    Светлана, честно сказать с такой задачей не сталкивался и мне интеграция с соцсетями не нравится, как минус все долго грузиться (я бы и от лайков избавился, но низя)

  26. Светлана

    То есть из-за виджетов соцсетей сайт долго будет грузиться? Хорошо, спасибо, за подсказку. Надо будет понаблюдать.
    Спасибо, что ответили.

  27. Светлана

    Владимир, не знала, куда написать, поэтому пишу здесь 🙂 Недавно я переместила форму комментирования наверх (как у Вас), но заметила, что после этого при нажатии Ответить, загрузка притормаживает, т.е. не сразу открывается поле для комментария. Как Вы думаете, в чем может быть дело? может я код неправильно разорвала (переместила его часть)?

  28. Наталья

    Очень круто! Спасибо большое!!!

  29. Biobiogog

    Аналог wp_list_pages(), только есть возможность добавить ссылку на главную в начало. Выводит облаком меток — список меток.

  30. boxfon.ru

    Аналог wp_list_pages(), только есть возможность добавить ссылку на главную в начало. Выводит облаком меток — список меток.

  31. Akira Tsukizawa

    Огромное спасибо! Работает отлично!

  32. Елена

    Спасибо большое! Воспользовалась кодом! ))) Автору респект! Все встало быстро и без проблем.

  33. Елена

    У меня все отлично получилось, шрифт поменяла, цвет подсветки тоже, под свой сайт, даже крутилочку добавила. Только подскажите, как добавить название этому блоку — КОММЕНТРАРИИ и чтобы типа в виде кнопки было?

  34. Елена

    С кнопкой отпадает, я уже придумала как сделать)

  35. JAH

    Елена, 🙂

  36. Роман

    Большое спасибо за код,все подошло,но интересует как добавить сверху кнопку или название к примеру «Комментарии»??? что было над ним,как у вас на сайте,а то все так идеально подошло а названия нет.

  37. Елена

    Подскажите, а к вашей функции можно сделать так, чтобы был вывод допустим 20 комментариев, но 10 из низ скрывались под строкой: показать еще комментарии. Наверное, это очень сложно, но буду очень благодарна, если подскажите. Конечно, если вы знаете, как это реализовать.

  38. JAH

    Елена, изначально выводите 20 комментариев, а потом с помощью jQuery прячьте и показывайте последние 10 комментариев по клику на кнопку свернуть/развернуть

  39. Chupacabras

    Всем привет. Не выходит решить проблемку. Имеется словарь таксономии с двумя уровнями вложенности. Для вывода первого уровня вложенности создал представление таксономии, указал фильтр родительский термин. Получил список родительских терминов. Как сделать что бы при нажатии на родительский термин появилась страница с дочерними терминами, далее после выбор дочернего показалась нода?

  40. Chupacabras

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

  41. JAH

    Chupacabras, вот это тебе поможет https://gist.github.com/luetkemj/2023628