Красиво оформляем комментарии

Опубликовано 23 декабря 2010 в разделе Новости.

Внешний вид комментариев играет немаловажную роль в восприятии сайта, вместе с тем ни для кого не секрет, что отображение комментариев “по умолчанию” далеко от идеала. В каждой теме WordPress красивому оформлению отзывов к записям уделен немалый кусок кода; в то же время многие начинающие пользователи WordPress, пытающиеся создать собственные шаблоны оформления, частенько спотыкаются на этой стадии. Самым простым вариантом решения может стать copy-paste стилей и кода отображения комментариев из особо понравившейся темы, но разве не приятнее не просто скопировать, а разобраться в том, что, как и зачем вы сделали? В этой заметке я поделюсь своими “исследованиями” в этой области и постараюсь доступным языком рассказать о том, как сделать такое же отображение комментариев, как на этом блоге. Конечный результат вы можете посмотреть на картинке:

Красивое отображение комментариев

Для работы нам понадобятся следующие файлы из папки шаблона: single.php, comments.php, page.php, functions.php и style.css.

Следует заметить, что код, содержащийся в comments.php, можно просто вставить в нужные места single.php и page.php, но у такого размещения есть один минус: фактически у вас появляется 2 независимых описания внешнего вида комментариев и при внесении каких-либо изменений вам придется вносить их сразу в 2 файла. Однако, если вы хотите, чтобы комментарии к записям и страницам отображались по-разному, то этот способ — именно то, что вам нужно.

Если же вы решили последовать моему примеру и использовать отдельный файл comments.php, то вам нужно подключить его к шаблону. Делается это очень просто. Взглянем на код файлов single.php и page.php, он выглядит примерно так:

<?php get_header(); ?>
<div id="content">

    Здесь идет описание отображения записей и всего прочего, вроде сервисов подписки, соцзакладок, похожих записей и т.п.

</div>
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Прямо перед последним закрывающим тегом </div> вставляем следующий кусочек кода:

<div id="comments">
    <?php comments_template(); ?>
</div>

Таким образом, мы очерчиваем область отображения комментариев и, собственно, подключаем comments.php. Теперь надо добавить немного кода в style.css — задать отступы, цвет фона и границ для области, где на странице будут отображаться комментарии.

#comments {
margin-left: 45px;
padding: 10px;
border: 1px solid #dcdcdc;
background: #f4f4f4;
}

Комментарии отображаются в WordPress ненумерованным списком, то есть, если мы ничего не предпримем, то перед каждым комментарием будет стоять маркер пункта списка. Чтобы этого избежать, добавим в файл style.css следующие строки:

#comments ul {
list-style-type: none;
}

В моем оформлении каждый комментарий отделен от других. Для этого я отдельно определила стили для каждого пункта списка:

#comments li {
list-style-type: none;
border: 1px solid #cccccc;
background: #ffffff;
padding: 0px;
margin-bottom: 15px;
min-height: 65px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

Здесь надо обратить внимание на некоторые свойства: min-height мы используем для того, чтобы в случае короткого комментария весь список комментариев отображался корректно, столбиком, а не лесенкой. А набор свойств border-radius служит для создания закругленных уголков.

Теперь разберемся с форматом комментариев.. По умолчанию в Wordress вывод списка комментариев осуществляется функцией wp_list_comments, но далеко не всех она устраивает. Чтобы включить в теме свой формат отображения комментариев, воспользуемся подсказкой Sonik-и. В файле comments.php найдем строчку

<?php wp_list_comments(); ?>

и чуть-чуть ее подправим:

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

Теперь открываем functions.php и добавляем туда следующие строчки:

# Свой формат комментариев
function custom_comment($comment, $args, $depth) {
$GLOBALS['comment'] = $comment; ?>
<li <?php comment_class(); ?> id="li-comment-<?php comment_ID( ); ?>">
	<div id="comment-<?php comment_ID( ); ?>" class="vcard">
		<div id="avatar">
			<?php if ($args['avatar_size'] != 0) echo get_avatar( $comment, $size='55', $args['avatar_size'] ); ?>
		</div>
		<div id="commentmetadata">
			<div class="currentcommentdate">Комментарий оставлен&nbsp;<?php comment_date('d.m.Y') ?> в <?php comment_time() ?></div>
			<div class="authorlink"><?php comment_author_link() ?></div>
		</div>
<?php if ($comment->comment_approved == '0') : ?>
	<span style="color: red;">Ваш отзыв будет опубликован после проверки администратором.</span>
<?php endif; ?>
	<div id="commentstext">
		<?php comment_text() ?>
	</div>
</div>
<?php }

В этом новом шаблоне мы определили отдельные id для аватара и заголовка комментария, а также отдельные классы для содержащихся в заголовке имени комментатора (являющегося под шумок еще и ссылкой на его сайт) и даты добавления комментария. Теперь осталось только определить для всего этого стили:

#avatar {
float: left;
margin: -10px 10px 5px 10px;
border: 2px solid #999999;
background: #f4f4f4;
padding: 3px;
z-index: 10;
box-shadow: 3px 3px 15px -5px #666666;
-moz-box-shadow: 3px 3px 15px -5px #666666;
-webkit-box-shadow: 3px 3px 15px -5px #666666;
}
#commentmetadata {
background: #cccccc;
padding: 4px 0px;
border-top-left-radius: 10px;
-moz-border-radius-topleft: 10px;
-webkit-border-top-left-radius: 10px;
border-top-right-radius: 10px;
-moz-border-radius-topright: 10px;
-webkit-border-top-right-radius: 10px;
}
.currentcommentdate {
color: #666666;
font: 12px Comic Sans MS;
float: right;
text-align: right;
margin: 0px 5px 2px 2px;
}
#comments a, #comments a:visited {
color: #666666;
text-align: center;
font: 14px Comic Sans MS;
text-decoration: none;
}
#comments a:hover, #comments a:active {
color: #333333;
text-decoration: none;
}
.authorlink {
color: #666666;
font: bold 14px Comic Sans MS;
}

А в следующей записи я расскажу, как можно сделать красивую форму отправки комментариев

Метки: рецепты Wordpress.

Также в рубрике:

Желаете оставить комментарий?

К записи оставлено 31 коммент.

ледиольга ответил(а) 23 12 2010

Тёмный лес

Красиво оформляем комментарии

Также в рубрике:

Желаете оставить комментарий?

К записи оставлено 31 коммент.

Коротко о сайте:

Подписка:

Комментарии:

Недавнее:

Кнопочки :)