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

Tuesday, 18 Aug 09 в 23:42

древовидные комментарии 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!

Понравился пост? Подпишись на обновления блога по RSS для блоггеров и вебмастеровRSS, RSS для блоггеров и вебмастеровEmail или twitter для блоггеров и вебмастеровtwitter!
Добавить комментарий

Комментариев - 14 для данного поста

  1. @ Nathaly Пишет:

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

  2. Tod Пишет:

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

  3. @ Воскресный обзор блогов. 23.08.2009 | Леднёв.ру Пишет:

    [...] свои посты на форумах и социальных сетях. Tod – Древовидные комментарии – плагин для [...]

  4. Александр Пишет:

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

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

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

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

  5. inna Пишет:

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

  6. Tod Пишет:

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

  7. ravkoff Пишет:

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

  8. Режиссер киноблога Пишет:

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

  9. Tod Пишет:

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

  10. @ Сергей Пишет:

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

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

  11. @ Krasdee Пишет:

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

  12. @ Сергей Пишет:

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

  13. @ Life-trip Пишет:

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

  14. Tod Пишет:

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

Оставить комментарий (правила комментирования)