Блог Stafox'a » комментарии http://stafox.ru О программировании и создании сайтов Mon, 28 May 2012 16:42:56 +0000 en hourly 1 http://wordpress.org/?v=3.3.2 Как сделать древовидные комментарии без плагина http://stafox.ru/kak-sdelat-drevovidnye-kommentarii-bez-plagina/ http://stafox.ru/kak-sdelat-drevovidnye-kommentarii-bez-plagina/#comments Fri, 10 Feb 2012 18:19:12 +0000 Stafox http://stafox.ru/?p=1508
Часто вижу, что некоторые начинающие блоггеры, да и не только начинающие, используют плагин, который позволяет выводить древовидные комментарии на блоге. Пример древовидных комментариев Вы можете увидеть на моём блоге. Так вот, для того, чтобы комментарии отображались в виде дерева, совсем не обязательно ставить плагин.

Всё можно сделать самостоятельно, немного подправив тему блога. Вы ещё не задали себе вопрос «Ну и зачем это»? Дело в том, что любой плагин обращается к базе данных, тем самым создавая дополнительную нагрузку. При большом количестве плагинов, Ваш блог станет медленно загружаться, и может попросту не выдержать и «упасть».

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

if (is_singular() AND comments_open() AND (get_option('thread_comments') == 1)) wp_enqueue_script('comment-reply');

Вставляем этот кусочек кода перед строкой

wp_head();

Далее в файл functions.php добавляем следующий код:

<?php
function mytheme_comment($comment, $args, $depth) {
   $GLOBALS['comment'] = $comment; ?>
   <li <?php comment_class(); ?> id="li-comment-<?php comment_ID() ?>">
     <div id="comment-<?php comment_ID(); ?>">
      <div class="comment-author vcard">
         <?php echo get_avatar( $comment->comment_author_email, 64); ?>
         <?php printf(__('<cite class="fn">%s</cite> <span class="says">пишет:</span>'), get_comment_author_link()) ?>
      </div>
      <?php if ($comment->comment_approved == '0') : ?>
         <em><?php _e('Ваш комментарий появится после проверки') ?></em>
         <br />
      <?php endif; ?>
      <div class="comment-meta commentmetadata"><?php printf(__('<small>%1$s в %2$s</small>'), get_comment_date(),  get_comment_time()) ?><?php edit_comment_link(__('<div class="entry-edit"></div>'),'  ','') ?></div>
	  <div class="comment-text">
      <?php comment_text() ?>
	  </div>
      <div class="reply">
         <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
      </div>
     </div>
<?php } ?>

Замечательно! Теперь открываем файл comments.php и заменяем всё, что хранится между тегами <ul class=»commentlist»> и </ul>на

<?php wp_list_comments('callback=mytheme_comment'); ?>

Теперь всё красиво заворачиваем в CSS. Для этого в файл стилей style.css добавьте следующий код:

#author, #email, #url {
	margin:3px 10px 3px 0;
	float:left;
	height:25px;
	color:#555;
	padding:0 12px 0 12px;
	background-color:#dedede;
	font-size:16px;
	border:1px solid #bbb;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
	width:150px;
	box-shadow:0 1px 1px #fff;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	-o-box-shadow:0 1px 1px #fff;
	-ms-box-shadow:0 1px 1px #fff;
}
#comment {
	width:95%;
	color:#555;
	padding:12px;
	background-color:#dedede;
	border:1px solid #bbb;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
	box-shadow:0 1px 1px #fff;
	-moz-box-shadow:0 1px 1px #fff;
	-webkit-box-shadow:0 1px 1px #fff;
	-o-box-shadow:0 1px 1px #fff;
	-ms-box-shadow:0 1px 1px #fff;
	margin:3px 0 3px 0;
	font-size:16px;
	font-family:Tahoma, Arial;
}
#author:focus, #email:focus, #url:focus, #comment:focus {
	box-shadow:0 0 5px #007efd;
	-moz-box-shadow:0 0 5px #007efd;
	-webkit-box-shadow:0 0 5px #007efd;
	-o-box-shadow:0 0 5px #007efd;
	-ms-box-shadow:0 0 5px #007efd;
	border:1px solid #777;
	color:#555;
}
ul.commentlist { font-size:14px;font-family:arial;list-style:none;padding:0;text-indent:0;margin-bottom:20px;}
ul.commentlist li {
	border:1px dashed #d3d3d3;
	background:#eee;
	padding:5px 5px 5px 5px;
	margin:5px 0 0 0;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
}
ul.commentlist li.comment { padding:10px 10px 10px 10px; }
ul.commentlist li div.comment-author { font-weight: bold; }
ul.commentlist li div.vcard cite.fn a.url { text-decoration: none; }
ul.commentlist li div.vcard cite.fn a:hover.url { color: #313131; text-decoration: none; }
ul.commentlist li div.vcard img.avatar { border:1px solid #d6d6d6;width:50px;height:50px;float:left;padding:3px;background:#f4f4f4;margin-right:10px; }
ul.commentlist li div.comment-meta { font-family:arial;color:#818181;font-style:oblique;text-shadow:0 1px 0 #fff; }
ul.commentlist li p { color:#606060; clear:both;margin:20px 0 10px 0; }
ul.commentlist li ul { list-style:square; }
ul.commentlist li ul.children { list-style:none; text-indent:0; }
ul.commentlist li ul.children li.bypostauthor { background:#e3e3e3;border:1px dashed #aaa;}
ul.commentlist li.pingback { }
ul.commentlist li.bypostauthor { }
ul.commentlist li.thread-odd {
	border:1px dashed #d3d3d3;
	margin:5px 0 5px 0;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
}
.comment-text {
	padding:5px 10px 0 0;
	display:block;
}
.comment-text p {
	padding:5px 10px 0 0;
	display:block;
	font-size:16px;
}
#respond input#submit {
	color:#444;
	font-weight:bold;
	margin:10px 0 10px 0;
	padding:5px 8px 5px 8px;
	border:1px solid #888;
	border-radius:12px;
	-o-border-radius:12px;
	-moz-border-radius:12px;
	-webkit-border-radius:12px;
	-ms-border-radius:12px;
	background: #c1c1c1; /* Old browsers */
	background: -moz-linear-gradient(top, #eeeeee 0%, #c1c1c1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#eeeeee), color-stop(100%,#c1c1c1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* IE10+ */
	background: linear-gradient(top, #eeeeee 0%,#c1c1c1 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#c1c1c1',GradientType=0 ); /* IE6-9 */
}
#respond input#submit:hover {
	color:#666;
	background: #e3e3e3; /* Old browsers */
	background: -moz-linear-gradient(top, #e3e3e3 0%, #ccc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e3e3e3), color-stop(100%,#ccc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* IE10+ */
	background: linear-gradient(top, #e3e3e3 0%,#ccc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e3e3e3', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */
}

Вот и всё. Теперь у Вас есть древовидные комментарии, которые Вы сделали сами, без использования плагина. Выглядеть они у Вас будут, также как и у меня, так как в качестве примера, я выложил стили со своего шаблона. Измените его на свой вкус и цвет, и будет Вам счастье!

Не пропустите, это тоже интересно!

22 коммент.]]> http://stafox.ru/kak-sdelat-drevovidnye-kommentarii-bez-plagina/feed/ 22