Онлайн заработок, создание и монетизация сайтов, веб-разработка, SEO и SMO продвижение, фриланс, партнерки, полезные сервисы вебмастерам, блоггинг.

Главная » Web разработка » Древовидные комментарии wordpress, wp_list_comments

Древовидные комментарии wordpress, wp_list_comments

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

Итак, появилась эта фишка в wordpress начиная с версии 2.7., правда далеко не все темы оказались к этому готовы, поэтому львиную часть времени занимает правка шаблона. Но перед этим древовидные комментарии нужно активировать в админке — идем в раздел «Параметры» — «Обсуждение», где ставим галочку напротив поля «Разрешить древовидные (вложенные) комментарии глубиной  уровней» — на английском это «Enable threaded (nested) comments  levels deep». При этом указываем количество уровней, для которого можно отвечать на комментарий.

Если после этого в вашем блоге в комментариях не появилась ссылка «Оветить» (Reply), то, увы, шаблон такой вид комментариев не поддерживает. В таком случае нам придется править файл comments.php. Проще всего найти шаблон, который правильно работает с древовидными комментариям либо поиска и в Интернете нужный фрагмент кода. Я нашел подсказку в этой статье. Если вы хотите создать шаблон для всех версий wordpress, то нужно делать проверку поддерживается ли в той или иной установке функция wp_list_comments — для этого создается 2 варианта шаблона и добавляете условный оператор if в код (см. статью). У меня все гораздо проще — wordpress версии 2.8., поэтому лишние действия смысла делать нет.

В самом начале не забудьте сохранить резервную копию файла comments.php на всякий случай. Дальше заходим в header.php, где перед вызовом функции wp_head() добавляем код:

if ( is_singular() ) wp_enqueue_script( 'comment-reply' );

Это добавит небольшую функциональность с помощью javascript в комментарии — судя по наблюдениям, форма для комментирования будет отображаться сразу после записи, где вы нажали «Ответить». Далее в файл comments.php записываем код:

<div id="comments-wrap">
<?php // Do not delete these lines
	if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME']))
		die ('Please do not load this page directly. Thanks!');
 
	if ( post_password_required() ) { ?>
		<p class="nocomments">This post is password protected. Enter the password to view comments.</p>
	<?php
		return;
	}
?>
 
<!-- You can start editing here. -->
<?php // Begin Comments & Trackbacks ?>
<?php if ( have_comments() ) : ?>
<h6 id="comments-wrap"><?php comments_number('No Comments', 'One Comments', '% Comments' );?> to &#8220;<?php 
 
the_title(); ?>&#8221;</h6>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
	</div>
<ol class="commentlist">
	<?php wp_list_comments(); ?>
</ol>
	<div class="navigation">
		<div class="alignleft"><?php previous_comments_link() ?></div>
		<div class="alignright"><?php next_comments_link() ?></div>
</div>
<?php // End Comments ?>
 
 <?php else : // this is displayed if there are no comments so far ?>
 
	<?php if ('open' == $post->comment_status) : ?>
		<!-- If comments are open, but there are no comments. -->
 
	 <?php else : // comments are closed ?>
		<!-- If comments are closed. -->
		<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
 
	<?php endif; ?>
<?php endif; ?>
 
<?php if ('open' == $post->comment_status) : ?>
 
<div id="respond">
 
<h4 class="postcomment"><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h4>
 
<div class="cancel-comment-reply">
	<small><?php cancel_comment_reply_link(); ?></small>
</div>
 
<?php if ( get_option('comment_registration') && !$user_ID ) : ?>
<p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode
 
(get_permalink()); ?>">logged in</a> to post a comment.</p>
 
<?php else : ?>
 
<form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform">
 
	<?php if ( $user_ID ) : ?>
 
<p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. 
 
<a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out &raquo;</a></p>
 
	<?php else : ?>
 
	<p>
	<input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" 
 
tabindex="1" />
	<label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>
 
	<p>
	<input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" 
 
class="textarea" />
	<label for="email"><?php _e('E-mail'); ?></label> <?php if ($req) _e('(required)'); ?>
	</p>
 
	<p>
	<input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" 
 
class="textarea" />
	<label for="url"><?php _e('<acronym title="Uniform Resource Identifier">URI</acronym>'); ?></label>
	</p>
 
	<?php endif; ?>
 
	<p>
	<label for="comment"><?php _e('Your Comment'); ?></label>
	<br />
	<textarea name="comment" id="comment" cols="60" rows="10" tabindex="4" class="textarea"></textarea>
	</p>
 
	<p>
	<input name="submit" id="submit" type="submit" tabindex="5" value="<?php _e('submit'); ?>" class="Cbutton" />
	<?php comment_id_fields(); ?>
	</p>
	<?php do_action('comment_form', $post->ID); ?>
</form>
<?php endif; ?>
</div>
<?php else : // Comments are closed ?>
<p><?php _e('Sorry, the comment form is closed at this time.'); ?></p>
<?php endif; ?>
</div>

Еще нужно будет добавить в файл стилей несколько строк:

.alt {margin: 0;padding: 10px;}
#comments ol {list-style-type: none;line-height: 18px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 5px;}
#comments ul li {list-style-type: none;list-style-image: none;list-style-position: outside;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 5px;padding-top: 5px;padding-right: 0px;padding-bottom: 0px;padding-left: 0pt;}
.commentlist {padding: 0;text-align: justify;}
.commentlist li {margin: 15px 0 10px;padding: 5px 5px 10px 5px;list-style: none;}
.commentlist li ul li { margin-right: -5px;margin-left: 10px;list-style: none;}
.commentlist li li {background:none;border:none;list-style:none;margin:3px 0 3px 20px;padding:3px 0;}
.commentlist li .avatar {border:1px solid #ccc;margin:15px 8px 6px 0;float: right;padding:2px;width:45px;height:45px;}
.commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;font-size: 1.1em;}
.commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none; margin: 10px 5px 10px 0;}
#commentform p {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;}
.commentmetadata {font-weight: normal; margin: 0;display: block; color: #ca5433;}
.commentmetadata a, .commentmetadata a:visited {color: #fa7703;}
.commentmetadata a:hover{ color: #333333;}
.children { padding: 0; }
.thread-alt {background-color: #f8f8f8;}
.thread-even {background-color: white;}
.depth-1 {border: 1px solid #ddd;}
.even, .alt {border-left: 1px solid #ddd;}

Понятно, что их можно изменять и подправить под дизайн вашего блога. После сохранения все должно работать. У Дмитрия Донченко есть статья про древовидные комментарии, где он подробно разбирает некоторые части кода для comments.php, что может прояснить некоторые моменты, если это очень интересно для вас.

Функция wp_list_comments

В версиях wordpress старше 2.7 данная функция отвечает за вывод списка комментариев.

<ol class="commentlist">
<?php wp_list_comments(); ?>
</ol>

Проблема в том, что править формат вывода через шаблон оказалось не так просто. Тем не менее, есть 2 варианта решения данной проблемы — во-первых, вы можете указывать стиль вывода комментариев — с помощью div, ol или ul, а через CSS уже внедрять свои фантазии офомления. Например:

<div class="commentlist">
<?php wp_list_comments(array('style' => 'div')); ?>
</div>

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

<ol class="commentlist">
<?php wp_list_comments('callback=mytheme_comment'); ?>
</ol>

А в файле  functions.php его необходимо определить. Вот пример из одного блога.

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
     <div id="comment-<?php comment_ID(); ?>" class="mycomment">
      <table><tbody><tr><td width="80" valign="top" >
	  <div class="comment-author vcard">
         <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?>       
      </div>
	  </td><td width="100%" valign="top" style="padding-left: 10px;">
 
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Your comment is awaiting moderation.') ?></em>
         <br />
      <?php endif; ?>
 
      <div class="comment-meta commentmetadata"> <?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?> пишет <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(),  get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),'  ','') ?></div>
 
      <?php comment_text() ?>
 
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
	  </td></tr></table>
     </div>
 
<?php
        }
?>

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

P.S. Постовой. Заходми в блог юного SEOшника и читаем про Фарму, дорвеи, black seo!

18.08.09

Категории: Web разработка, WordPress.

Теги: , , , , ,

43 Comments
  1. Nathaly

    А можно ли на Blogger’e сделать подобное? Очень не удобно то, что невозможно отвечать (как в ЖЖ) определенным комментаторам. Приходится вводить имена. Да и сами читатели видят потом всю переписку. Хотя должны, по идее, получать только ответ на свой вопрос…

  2. Tod

    Nathaly, можно попробовать реализовать с помощью стороннего сервиса — intensedebate.com

  3. Александр

    Часто бывает когда хочешь откомментировать какую-то статью, новость или фотку, то натыкаешься на фразу «Чтобы иметь возможность комментировать нужно зарегистрирроваться». А часто вам хочется оставлять свой мейл на случайном сайте? Так и уходишь с него…

    Для таких случаев рекомендую новый бесплатный сервис, который позволяет комментировать все, что угодно сразу на сайте. Адрес — http://saiter.ru

    Никакой модерации и регистрации. Заходите на любой сайт, пишите свои соображения и они автоматически прикрепляются к странице. Также можно прочитать все, что думают про данный сайт или страницу другие люди. Сервис этот, как бы над сайтами и поэтому вам не нужно спрашивать разрешения админа оставить свой отзыв. Вы, например, можете отправить гневное письмо Биллу Гейтсу прямо на сайте Микрософта и рассказать в нем все, что вы думаете про него и его продукты ;). Нужно ли еще приводить примеры?

    Действительно открываются новые горизонты для общения!!!! Пробуйте и не жалейте!

  4. inna

    Как сделать размером их по меньше?

  5. Tod

    inna, посмотрите стили в CSS.

  6. ravkoff

    спасибо автору. статья ооочень помогла мне!

  7. Режиссер киноблога

    Здравствуйте. У меня проблема. Поисковики на моем блоге индексируют каждую ссылку «Ответить» у всех комментов. Получаются несколько дубликатов одной страницы. Как можно заключить в noindex эту ссылку просто?

  8. Tod

    Режиссер киноблога, найти в коде шаблона эти ссылки и заключить в noindex.

  9. Сергей

    Здравствуйте!

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

  10. Krasdee

    почему то не работает на wp 2.9.2

  11. Сергей

    Krasdee, пиши мне на chashenkov@mail.ru и я вышлю тебе рабочий вариант комментариев…

  12. Life-trip

    А где фунция wp_list_comments описывается? в каком файле ее искать?

  13. Tod

    Life-trip, без понятия, можно погуглить, я не знаю где именно эта функция находится.

  14. Artin

    Сначало я пользовался плагином WordPress Thread Comment, но потом подумал, ведь функция вывода древовидных комментариев уже встроена в WordPress. Просто нужно что-то поменять в comments.php. Спасибо, что подсказали как это сделать.

  15. lev

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

  16. Эрик

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

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

  17. Tod

    Эрик, выводятся только комментарии к текущей записи, объединять не получится.

  18. Эрик

    жаль…оочень жаль =(
    спасибо.

  19. Наталья Кузнецова

    А я мучилась с плагином WordPress Thread Comment, а всего-то надо было галочку поставить в разделе «Параметры» – «Обсуждение»!! Спасибо, отличный пост, очень помог!

  20. art

    Ура — у меня все заработало!!!
    Автор — спасибо большое

  21. Алекс

    А как можно изменить стиль и текст вот у этих строчек?
    «Комментариев к записи: 3 комментария»
    «Оставить комментарий»

  22. Tod

    Алекс, добавить для них стили и прописать их в CSS потом, то есть находим в шаблоне места где выводятся эти фразы, вокруг них ставим что-то вроде

    <div class="style1"> ... </div>

    после чего в файле стиля прописываем шрифт для .style1

  23. Аленка

    Не совсем по теме, но… Столкнулась с непонятным багом: после отправки комментария пропадает шапка сайта. Не подскажете, где эту проблему копать?

  24. Дмитрий

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

  25. Femil

    В который раз вы (точнее опубликованный у вас материал) очень выручили.
    Очень-очень…
    Теперь у меня в бложике тоже имеются древовидные комментарии.
    Спасибо вам =)
    Единственное неудобство — пришлось переводить стандартные тексты: «количество комментариев», «оставить комментарий» и т.д.

  26. Паша

    Не подскажете, куда может быть запрятано оформление системы комментирования. Мне бы перевести некоторые реплики.
    Часть нашёл в comment.php, думал, остальное в functions.php, но там ничего нету.

  27. Tod

    Паша, форма комментирования обычно находится именно в comments.php, хотя если шаблон какой-то специфический, то нужно искать во всех файлах.

  28. Паша

    Дело в том, что то, что было доступно в comments.php, я перевёл
    http://i.imgur.com/6WDuC.png
    а остальное вообще найти не могу.

  29. Tod

    Паша, может это какой-то плагин для комментирования и там нужно править тексты. можно еще глянуть в single.php может там что есть, отображение также задается в function.php как вы правильно заметили. Где еще может быть — даже не знаю.

  30. Паша

    Tod, искал долго и упорно, но нашёл. Видимо, в теме свои прибабахи. Текст правил в wrap_functions.php Может кому-то поможет: вышел на данный файл через en_US.po — в коде нашёл знакомые строчки и наводку на нужный файл =) Скоро все добро можно будет увидеть на iPanel.by

  31. Максим

    Не подскажете, как изменить стандартный граватар в комментариях?

  32. Tod

    Максим, насколько я знаю, в настройках wordpress в разделе «Параметры» — «Обсуждение» есть несколько вариантов граватаров. Есть какая-то опция для подключения своей стандартной картинки — нужно погуглить как это добавить в шаблон.

  33. Максим

    Tod, спасибо за ответ. Я уже давно добавил функцию (установки своего дефолтного аватара) о которой вы говорите. Но проблема в том, что этот аватар отображается везде (в списках пользователей и т.п.) кроме комментариев. В файле comment.php пробовал разные варианты, но аватар по прежнему 0.gravatar.com.

  34. Kseniya

    Добрый день, Александр!
    А можно к вам обратиться за помощью в доработке моей темы, чтобы комменты выглядели как на картинке в начале поста (аватарки, древовидность)? Тему менять не хочу, она мне нравится, к тому же куча всего туда уже добавлена :)
    Я хоть и ковыряюсь сама в кодах, но такую штуку, боюсь, не осилю самостоятельно ;)
    Стоимость Вашей работы могу оплатить на Яндекс кошелёк.
    Отпишитесь, плиз, возьмётесь за такое дело али нет! ;)

  35. Tod

    Kseniya, к сожалению, нет времени заниматься доработками. Вы можете скачать на компьютер тот или иной файл шаблона, который собираетесь править, а потом, если что-то пойдет не так, загрузите его на ФТП — то есть сделать резервную копию файла.

  36. Максим

    Спасибо за статью, — все получилось, правда так и не понял зачем wp_list_comments… — вызывает комментс.пхп, а поставил
    ‘div’)); ?>
    и вообще все работать перестало))). В общем где-то чего-то я не понял, но работает)))

  37. RomanZmeu

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

  38. Наталия

    Спасибо за статью. А подскажите, пожалуйста, как с учетом этого показанного файла comments.php можно изменить слова в оформлении комментариев на русские? Чтобы запись вида:
    Mr WordPress says:
    01/02/2014 at 13:35 (Edit)
    Hi, this is a comment…
    Reply

    стала такой:
    Mr WordPress пишет:
    01/02/2014 at 13:35 (Редактировать)
    Hi, this is a comment…
    Ответить

    В файле comments.php я могу изменить слова на русские, а в самих комментариях как это сделать?
    Спасибо!

  39. Tod

    Наталия, как только вы поменяете английские слова на русские, то они также будут отображаться и в комментариях.

  40. Наталия

    Я же не спрашивала — как писать коммент по-русски. Я спросила — где, в каком из файлов можно изменить Edit на «Редактировать», says — на «пишет», at — на «в», Reply — на «Ответить»..

  41. Tod

    Наталия, просматриваете все файлы шаблона и ищете в них «says», «Edit» и т.п., заменяя на русские аналоги. Как правило, они находятся в comments.php. Как только там поменяете, в комментариях будут отображается нужные вам слова.

  42. Катя

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

  43. Tod

    Катя, в админке вордпресс заходите в раздел «Настройки» — «Обсуждение», там есть пункт «Комментарий должен быть одобрен вручную» — для проверки всех записей. По умолчанию отмечена только опция «Автор должен иметь ранее одобренные комментарии», что позволяет проверять записи от пользователей только первый раз.

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *