Здравствуйте дорогие друзья! Продолжаем оптимизировать WordPress без использования плагинов. На эту тему уже написал 2 статьи: социальные кнопки без плагинов и форма обратной связи без плагинов. Сегодня я пишу про то, как реализовать древовидные комментарии на WordPress без плагинов.
Для древовидных комментариев есть специальные плагины, но можно их сделать гораздо легче. Для этого в WordPress уже есть специальная функция, про которую многие забывают. Но в этой функции есть один недостаток – не все шаблоны ее поддерживают. Это мы и попытаемся осуществить. Сразу скажу, у меня на блоге стоит плагин, и в дальнейшем планирую отказаться от него.

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

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

Но вставлять нужно не абы где, а перед

 <?php wp_head(); ?>

. Так мы подключили, функцию в шаблон. Возможно, у вас уже есть этот код, тогда этого вам проделывать не надо, а нужно проделать последний шаг.
Идем дальше, теперь нужно задать оформление как будут выводиться комментарии. Заходим в functions.php и в самом низу пропишем:

 <?php
  // Ваш формат комментариев
   function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="comment-<?php comment_ID() ?>">
	<div id="div-comment-<?php comment_ID(); ?>" class="commentdiv">
		<div class="comment-author vcard">
			<?php echo get_avatar($comment, $size='32'); ?>
			<?php printf(__('<cite class="fn">%s</cite> <span class="says">says:</span>'), get_comment_author_link()) ?>
			<div class="commentmetadata"><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)'),'&nbsp;&nbsp;','') ?></div>
		</div>
		<div class="ctext">
			<?php if ($comment->comment_approved == '0') : ?>
			<em><?php _e('Your comment is awaiting moderation.') ?></em>
			<?php endif; ?>
			<?php comment_text() ?>
		</div>
		<div class="reply">
			<?php comment_reply_link(array_merge( $args, array('add_below' => 'div-comment', 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
		</div>
	</div>
<?php }
?>

Пока еще комментарии будут выводиться как и прежде. Теперь самое главное. Заходим в comments.php, находим код

 <div class="commentlist">

и все что внутри этого тега содержится, меняем на

 <?php wp_list_comments(); ?>

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

 .comments {
	float: right;
}
.commentlist {
	margin: 18px 0 0;
}
.commentlist li {
	list-style: none;
}
.commentlist li .commentdiv {
	margin: 0 0 25px;
	height: 1%;
}
li.bypostauthor .commentdiv {
	padding: 3px 3px 7px;
	border: 1px solid #AAA;
}
.commentlist ul.children {
	margin: 13px 0 0 18px;
}
.comment-author {
	background: #F2F2F2;
	border: 1px solid #E9E9E9;
	padding: 4px 4px 3px 4px;
	min-height: 39px;
	height: auto !important;
	height: 39px;
}
.fn {
	font-style: normal;
	font-weight: bold;
}
.avatar {
	border: 1px solid #DDD;
	padding: 2px;
	float: left;
	background: #FFF;
	margin: 0 5px 0 0;
}
.commentmetadata {
	font-size: 11px;
	color: #888;
	padding: 3px 0 0;
}
.commentmetadata a {
	color: #888;
  text-decoration: none;
}
.commentmetadata a:hover {
	color: #AA0001;
  text-decoration: underline;
}
.ctext {
	padding: 10px 7px 0;
}
.reply {
	width: 100%;
	overflow: hidden;
	text-transform: lowercase;
	margin: -3px 0 0 7px;
}
.reply a {
	background: #00C;
	float: left;
	color: #fff;
	text-decoration: none;
	padding: 0 6px 2px;
	border: 1px solid #CCC;
	font-size: 13px;
	line-height: 16px;
}
.reply a:hover {
	background: #0CF;
	color: #FFF;
	border: 1px solid #E60000;
}
#cancel-comment-reply {
	float: right;
	position: relative;
	top: -43px;
}
#cancel-comment-reply small {
	font-size: 13px;
}

#respond h3 {
  margin-top: 35px;
}

#commentform {
	padding: 0 0 20px;
}
#commentform p {
	margin: 0 0 7px;
	white-space: nowrap;
}
#author, #email, #url, #comment, #submit {
	font: 13px "Trebuchet MS", Tahoma, Arial, Sans-Serif;
	padding: 3px 5px;
	width: 200px;
	border: 1px solid #CCC;
}
#author:focus, #email:focus, #url:focus, #comment:focus, #submit:focus {
	border-color: #999;
}
#comment {
	width: 97%;
	height: 150px;
}
#submit {
	width: 128px;
	height: 26px;
	padding: 0;
	background: #00F;
	cursor: pointer;
	border: none;
	color: #FFF;
  font-weight: bold;
}

#submit a:hover{
	background:#000;
} 

И еще что будет нужно, так это включить отображение древовидных комментариев. Заходим в админку-Параметры-Обсуждение-Разрешить древовидные (вложенные) комментарии глубиной (…) уровней. Вместо (…) вы должны выбрать уровень вложенности комментариев.

Важно! Как писал Денис, автор блога Webliberty.ru, данная функция, при оставлении новых комментариев, создает новую страницу вида http://www.apisklov.ru/news/example_page/?replytocom=12042
, которая индексируется поисковиками – этого нам не нужно. Поэтому в robots.txt прописываем Disallow: /*?replytocom. Это запретит поисковикам индексировать страницы вида ?replytocom

Постовой: А перед тем, как делать древовидные комментарии, сделайте блог
на WordPress строго по этой инструкции.

Толстая ссылка: dtf.ru/ (тИЦ=1500, PR=5) – для получения обратной ссылки регистрируемся и оставляем ссылку в профиле.

Похожие записи:

1. Оптимизируем форму комментариев в WordPress. Часть 4
2. Оптимизируем форму комментариев в WordPress. Часть 1
3. Создаем панель с социальными кнопками и подпиской на email
4. Социальные кнопки WordPress без плагинов
5. Форма обратной связи на WordPress без плагинов