Добавляем древовидные комментарии

После выхода WordPress 2.7 появилось много новых функций, одна из них – древовидные комментарии, а также разбивка комментариев по страницам.

Рассмотрим, как интегрировать их в вашу тему WordPress.

Прежде всего, необходимо заменить файл comments.php (скачать правильный comments.php).

Теперь необходимо убедиться, что вложенные комментарии активированы в настройках WordPress, для этого перейдите на панель управления -> Настройки -> Обсуждение и установите флажок «Включить древовидные комментарии». Установите нужный уровень, например 2 уровня. Там же можно настроить количество комментариев на страницу.

Если Вы вернетесь на страницу сообщений на вашем сайте, вы должны увидеть ссылку на ответ после каждого поста. Но если нажмете на нее, ничего не произойдет, кроме как появления надписи «Нажмите здесь, чтобы отменить ответ». Чтобы решить проблему, нужно добавить следующий код в header.php перед <?php wp_head(); ?>:

<?php if ( is_singular() ) wp_enqueue_script( ‘comment-reply’ ); ?>

Теперь, когда вы нажмете на ссылку «Ответ», появится окно непосредственно под комментарием, на который вы хотите ответить. Эта небольшая функция делает более понятную группировку комментариев для ваших пользователей.

Единственное, осталось поправить стиль комментариев. <?php wp_list_comments(); ?> генерирует множество стилей, поддерживается до 10 уровней вложенности, в примере стили до 5-уровня (изменять их все не обязательно, можно выбрать и вставить в файл style.css только нужные).

ol.commentlist {}
ol.commentlist li {}
ol.commentlist li.alt {}
ol.commentlist li.bypostauthor {}
ol.commentlist li.byuser {}
ol.commentlist li.comment-author-admin {}
ol.commentlist li.comment {}
ol.commentlist li.comment div.comment-author {}
ol.commentlist li.comment div.vcard {}
ol.commentlist li.comment div.vcard cite.fn {}
ol.commentlist li.comment div.vcard cite.fn a.url {}
ol.commentlist li.comment div.vcard img.avatar {}
ol.commentlist li.comment div.vcard img.avatar-32 {}
ol.commentlist li.comment div.vcard img.photo {}
ol.commentlist li.comment div.vcard span.says {}
ol.commentlist li.comment div.commentmetadata {}
ol.commentlist li.comment div.comment-meta {}
ol.commentlist li.comment div.comment-meta a {}
ol.commentlist li.comment * {} — (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.comment div.reply {}
ol.commentlist li.comment div.reply a {}
ol.commentlist li.comment ul.children {}
ol.commentlist li.comment ul.children li {}
ol.commentlist li.comment ul.children li.alt {}
ol.commentlist li.comment ul.children li.bypostauthor {}
ol.commentlist li.comment ul.children li.byuser {}
ol.commentlist li.comment ul.children li.comment {}
ol.commentlist li.comment ul.children li.comment-author-admin {}
ol.commentlist li.comment ul.children li.depth-2 {}
ol.commentlist li.comment ul.children li.depth-3 {}
ol.commentlist li.comment ul.children li.depth-4 {}
ol.commentlist li.comment ul.children li.depth-5 {}
ol.commentlist li.comment ul.children li.odd {}
ol.commentlist li.even {}
ol.commentlist li.odd {}
ol.commentlist li.parent {}
ol.commentlist li.pingback {}
ol.commentlist li.pingback div.comment-author {}
ol.commentlist li.pingback div.vcard {}
ol.commentlist li.pingback div.vcard cite.fn {}
ol.commentlist li.pingback div.vcard cite.fn a.url {}
ol.commentlist li.pingback div.vcard span.says {}
ol.commentlist li.pingback div.commentmetadata {}
ol.commentlist li.pingback div.comment-meta {}
ol.commentlist li.pingback div.comment-meta a {}
ol.commentlist li.pingback * {} — (p, em, strong, blockquote, ul, ol, etc.)
ol.commentlist li.pingback div.reply {}
ol.commentlist li.pingback div.reply a {}
ol.commentlist li.pingback ul.children {}
ol.commentlist li.pingback ul.children li {}
ol.commentlist li.pingback ul.children li.alt {}
ol.commentlist li.pingback ul.children li.bypostauthor {}
ol.commentlist li.pingback ul.children li.byuser {}
ol.commentlist li.pingback ul.children li.comment {}
ol.commentlist li.pingback ul.children li.comment-author-admin {}
ol.commentlist li.pingback ul.children li.depth-2 {}
ol.commentlist li.pingback ul.children li.depth-3 {}
ol.commentlist li.pingback ul.children li.depth-4 {}
ol.commentlist li.pingback ul.children li.depth-5 {}
ol.commentlist li.pingback ul.children li.odd {}
ol.commentlist li.thread-alt {}
ol.commentlist li.thread-even {}
ol.commentlist li.thread-odd {}

Чтобы изменить размер граватар, измените строку 25 в файле comments.php, вместо 48 (размер в пикселях, можно поставить любой другой.

<?php wp_list_comments(‘avatar_size=48′); ?>

Если не хотите использовать для комментариев списки (ul), можете заменить на оформление через div или нумерованный список (ol).

<?php wp_list_comments(‘style=div’); ?>

Если заменяете список на вывод с помощью div, удостовертись, что изменили строки24-26 на что-то типа этого

<div class="commentlist">
<?php wp_list_comments(‘style=div’); ?>
</div>

Если хотите использовать только комментарии, трекбеки или пинги, можете использовать следующий код:

<?php wp_list_comments(‘type=comment’); ?>

Для того, чтобы сделать разбивку комментариев по страницам, необходимо добавить следующий код вместо строк 20-21 и 29-30:

<?php paginate_comments_links() ?> 

Или же если хотите, чтобы использовались ссылки Вперед/Назад (как при постраничной навигации в архивах и рубриках), используйте:

<div class="navigation">
<div class="alignleft"><?php previous_comments_link() ?></div>
<div class="alignright"><?php next_comments_link() ?></div>
</div>

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

<?php wp_list_comments(‘callback=mytheme_comment’); ?>

и в файле functions.php добавьте и измените по своему желанию следующик код:

<?php function mytheme_comment($comment, $args, $depth) {
$GLOBALS[‘comment’] = $comment; ?>
<div class="commentbody">
<div style="float:left;"><?php echo get_avatar($comment,$size=’48’,$default='<path_to_url>’ ); ?></div>

<noindex><?php printf(__(‘<cite class="fn">%s</cite> <span class="says">пишет:</span>’), get_comment_author_link()) ?></noindex>
<?php if ($comment->comment_approved == ‘0’) : ?>
<em><?php _e(‘Спасибо! Ваш комментарий ожидает проверки.’) ?></em>
<br />
<?php endif; ?>

<p><a href="<?php echo htmlspecialchars(get_comment_link( $comment->comment_ID )) ?>">
<small><?php printf(__(‘%1$s в %2$s’), get_comment_date(),get_comment_time()) ?></a><?php edit_comment_link(__(‘(править)’),’ ‘,») ?></small>

<?php comment_text() ?></p>
<?php if($args[‘max_depth’]!=$depth) { ?>
<div class="reply">
<?php comment_reply_link(array_merge($args, array(‘depth’ => $depth, ‘max_depth’ => $args[‘max_depth’]))) ?>
</div>
<?php } ?>
</div>
<?php
}
?>