Стилизация древовидных комментариев в WordPress
Вдогонку к статье о создании темы с древовидными комментариями расскажу как можно эти комментарии оформить. Если вы знакомы с “помощниками” всех веб разработчиков (например Firebug для FF, IE Developer Toolbar для IE, DOM Inspector для Opera), то вам не составит труда узнать какие именно классы использует при выводе комментариев функция wp_list_comments(). А для тех, кто не знаком с такими замечательными плагинами или попросту нет желания тратить время на “изучение внутренностей” я приведу несколько примеров стилизации.
Заранее хочу предупредить, что цвета подбирались быстро и без особых заморочек исходя из того, что при использовании предложенных вариантов цветовая гамма будет “переопределена”. Цель статьи – раскрыть список классов и показать примеры визуального форматирования древовидных комментариев.
Для оформления нам понадобится файл со стилями (style.css). Собственно говоря, почти все наши изменения будут именно в этом фале. Начнем.
Чтобы не пришлось лишний раз заглядывать в предыдущую статью, привожу код файла комментариев (comments.php):
[sourcecode language='php']войти, чтобы оставить комментарий.'), get_option('siteurl')."/wp-login.php?redirect_to=".urlencode(get_permalink()));?>
[/sourcecode]
Рассмотрим несколько вариантов и начнем с более понятного (нужно будет внести совсем немного изменений).
Вариант 1 (простой)
Вам нужны комментарии, отделенные друг от друга линиями. Для достижения этой цели в файл style.css добавляем следующие стили:
[sourcecode language='css']
/* styles for comments with border */
.commentlist {list-style: none; padding: 0px; border-bottom: 1px dotted #edb844; }
.vcard *{margin: 10px 10px 0px 0px; float: left;}
.fn {padding-top: 5px; font: normal bold 16px Georgia; color: #edb844;}
.says {padding-top: 9px; font: italic 12px Arial; color: #8e8361;}
.comment { padding: 10px 0px 0px 20px;}
.children { margin-top: 10px; list-style: none; padding: 0px;}
.children .comment {border-top: 1px dotted #edb844; padding-left: 25px; }
.depth-1 {border-top: 1px dotted #edb844;}
.commentmetadata {clear: left; padding-top: 10px;}
.commentmetadata a {text-decoration: none; font: 12px Arial; color: #8e8361;}
.reply {padding-bottom: 10px;}
[/sourcecode]
.commentlist - список комментариев (в теге <ol></ol> – см. comments.php выше);
.vcard – обертка для автора;
.fn - собственно автор;
.says – текст “Сказал”;
.comment – каждый комментарий лежит в теге <li></li> с таким классом;
.children – вложенный комментарий в теге <ul></ul>;
.depth-1 – комментарий верхнего (первого) уровня (в теге <li></li>);
.commentmetadata – контейнер для даты и времени;
.reply - ссылка “Ответить”;
Страничка с комментариями теперь выглядит вот так:
Оформление комментариев. Вариант 1
Если вам нужна постраничная разбивка, то заходим в админку, меню “Настройки”, пункт “Обсуждение” и ставим галочку напротив “Разбивать комментарии на страницы по 50 на каждой и по умолчанию отображать последнюю страницу. Сверху отображать старые комментарии “, где можно вместо 50 указать любое число (хоть 1 поставьте ;) ). Если вы не хотите отображать аватары, то этом пункте выберите в “Отображение аватара” - “Не показывать аватары”.
Если вдруг после того, как вы поставили постраничную разбивку комментариев, вы видите список комментариев полностью (т.е. не по страницам), возможно в вашем файле comments.php не хватает функций <?php previous_comments_link() ?> и <?php next_comments_link() ?>. Добавьте их после
<ol class=”commentlist”>
<?php wp_list_comments(); ?>
</ol>
и вы увидите ссылки “Старые комментарии” и “Новые комментарии” (или что-то похожее по смыслу).
Вариант 2 (немного сложнее)
Каждый комментарий в своем блоке с фоном и границей. Изменяем стили из предыдущего варианта (классы используются те же)
[sourcecode language='css']
/* styles for comments in block with background and border */
.commentlist {border-right: 2px solid #edb844; border-bottom: 2px solid #edb844; list-style: none; padding: 0px; }
.vcard *{margin: 10px 10px 0px 0px; float: left;}
.fn {padding-top: 5px; font: normal bold 16px Georgia; color: #edb844;}
.says {padding-top: 9px; font: bold 12px Arial; color: #333;}
.comment { border-top: 2px solid #edb844; border-left: 2px solid #edb844; background-color: #6e5f31; padding: 10px 0px 0px 20px;}
.comment p {margin-top: 0px; padding-right: 10px;}
.children { margin-top: 10px; list-style: none; padding: 0px;}
.children .comment {background-color: #7e6f41; border: 2px solid #edb844; border-bottom: 0px; border-right: 0px; padding-left: 25px; }
.commentmetadata {clear: left; padding-top: 10px;}
.commentmetadata a {text-decoration: none; font: bold 12px Arial; color: #333;}
.reply {padding-bottom: 10px;}
.reply a {color: #333;}
[/sourcecode]
и смотрим на страницу с комментариями
Оформление комментариев. Вариант 2
Для отображения даты и времени в формате “18.02.2009 в 21:30″, а не “18 Февраль 2009 21:30″ нужно открыть файл “..\wordpress\wp-includes\comment-template.php”, найти в нем блок
[sourcecode language='php'] [/sourcecode]
и немного подкорректировать, чтобы в результате получилось так:
[sourcecode language='php'] [/sourcecode]
Обратите внимание на функции get_comment_date(‘d.m.Y’), get_comment_time(‘G:i’), где d.m.Y – это день.месяц.год, а G:i – Часы:минуты (21:30). Регистр G:i имеет значение, если вы напишете g:i, то время будет отображаться в формате 12 часов (9:30).
Вариант 3 (еще немного сложнее, но все возможно)
Нужно сделать для каждого комментария свой бекграунд – зебра для родителей и для детей. Поскольку скопировать и вставить стили быстрее, чем править страшный и непонятный файл comment-template.php – значит применяем оформление:
[sourcecode language='css']
/* styles for tree comments with different background for each comment */
.commentlist {padding: 0px 0px 0px 20px; }
.commentlist li * {list-style: none; }
.reply * {float: right; display: inline; margin : 5px; color: #584621;}
.fn {padding-top: 5px; font: normal bold 16px Georgia; color: #edb844;}
.vcard *{margin: 0px 10px 0px 0px;}
.comment p {margin-top: 0px; padding-bottom: 5px;}
.commentmetadata a {text-decoration: none; color: #584621;}
.comment {border: 1px solid #584621; padding: 5px;}
.fon {background-color: #6e5f31;}
.fon2 {background-color: #8e6306;}
.thread-odd {background-color: #6e5f31;}
.thread-even {background-color: #8e6306;}
[/sourcecode]
Многие из вышеописанных классов уже встречались в предыдущих вариантах. А вот четыре последних требуют некоторых пояснений.
.thread-odd и .thread-even – заложенные в вордпрессе классы, в которых можно прописать стилизацию для четных и нечетных комментариев (используются для первого уровня вложенности).
.fon и .fon2 - добавленные мною классы, которые определяют фон комментариев начиная со второго уровня.
Что нужно добавить в comment-template.php? Совсем немного. Открываем его (т.е. файл “..\wordpress\wp-includes\comment-template.php”) и находим функцию “get_comment_class“, в ней строки
[sourcecode language='php']
// Alt for top-level comments
if ( 1 == $comment_depth ) {
if ( $comment_thread_alt % 2 ) {
$classes[] = 'thread-odd';
$classes[] = 'thread-alt';
} else {
$classes[] = 'thread-even';
}
$comment_thread_alt++;
}
[/sourcecode]
заменяем на
[sourcecode language='php']
// Alt for top-level comments
if ( 1 == $comment_depth ) {
if ( $comment_thread_alt % 2 ) {
$classes[] = 'thread-odd';
$classes[] = 'thread-alt';
$GLOBALS['oddcomt'] = 'fon';
} else {
$classes[] = 'thread-even';
$GLOBALS['oddcomt'] = 'fon2';
}
$comment_thread_alt++;
}
[/sourcecode]
$GLOBALS['oddcomt'] = ‘fon’; – добавляем класс “fon”, который устанавливает цвет фона такой же как и в классе “thread-odd”;
$GLOBALS['oddcomt'] = ‘fon2′; – класс “fon2″ и класс “thread-even” задают одинаковый цвет фона для комментариев;
Что это нам дает? Теперь мы знаем отправную точку (т.е. цвет, прописанный в классе для первого уровня комментариев), нам нужно задать “противоположный” цвет (т.е. класс, устанавливающий фон для комментариев нижних уровней). Много слов, не очень понятно, но еще немного и все прояснится :)
Далее находим в этом же файле функцию “start_el” и переставляем, убираем, добавляем некоторые строки, чтобы получилось вот так:
[sourcecode language='php']
function start_el(&$output, $comment, $depth, $args) {
$depth++;
$GLOBALS['comment_depth'] = $depth;
global $backg;
if ("2" == $depth){
$backg = $GLOBALS['oddcomt'];
}
if (strcmp($depth,"1")>0) {
if ("fon" == $backg ) $backg = "fon2";
else $backg = "fon";
}
if ( ! e m p t y ($args['callback']) ) {
call_user_func($args['callback'], $comment, $args, $depth);
return;
}
$GLOBALS['comment'] = $comment;
extract($args, EXTR_SKIP);
if ( 'div' == $args['style'] ) {
$tag = 'div';
$add_below = 'comment';
} else {
$tag = 'li';
$add_below = 'div-comment';
}
?>
< id="comment-">
$add_below, 'depth' => $depth, 'max_depth' => $args['max_depth']))) ?>
comment_approved == '0') : ?>
$backg - задает цвет фона комментариев, начиная со второго уровня вложенности;
$depth - как видно из названия это глубина вложенности;
Получаем класс, если находимся на втором уровне вложенности комментариев:
if ("2" == $depth){
$backg = $GLOBALS['oddcomt'];
}
Если не первый уровень, то меняем класс (устанавливаем "противоположный" цвет):
if (strcmp($depth,"1")>0) {
if ("fon" == $backg ) $backg = "fon2";
else $backg = "fon";
}
После всех совершенных действий вы увидите такие комментарии:
Оформление комментариев. Вариант 3
Вы можете скачать архив styling-tree-comments-files, в котором находятся отредактированные файлы comments.php, comment-template.php и style.css. В последнем "активными" являются стили для последнего варианта оформления, остальные закомментированы.
Приведенные выше способы стилизации древовидных комментариев наглядно демонстрируют только три из множества вариантов оформления.
Возможно, в скором времени плагины для древовидных комментариев будут больше "окрылять" блогеров (и не только) и не придется им вручную подкручивать и дорабатывать, а достаточно будет установить и немного настроить "для себя".
