Полный список статей / Юзабилити комментариев, ч.1 / Версия для печати / translit / абракадабра :-)

• Якорь
• Имя и ссылка комментатора
• rel=”nofollow”
• Дата
• Аватары
• Редактирование комментариев

Первая часть о самых скучнейших вещах.

Это первое, на что стоит обратить внимание. Многие шаблонные темы страдают тем, что ссылка на комментарии (вместе с указанием количества) стоит рядом с заголовком, вверху поста. Естественно, при больших размерах последних такое размещение - наихудшее, что можно сделать с точки зрения юзабилити. Если в тлогах еще можно себе это позволить, то здесь пользователю, в первый раз попавшему на ваш сайт и желающему перейти к дискуссии, будет сложно проматывать ленту обратно, чтобы добраться до ссылки (а ведь может статься так, что человек захочет дальше читать, и это опять много-много PageDown’ов).

В таких случаях, ссылка на обсуждение должна стоять в самом внизу. Соответствующая функция в home.php, если кто-нибудь забыл, выглядит так:

<a href="<?php comments_link() ?>"> <?php comments_number(); ?> </a>

Опять банальность (интересное еще впереди) - хороший русифицированный “попап” со склонениями, можно получить, использовав простой плагин Russify Comments Number.

Но у него есть маленькая проблемка - в нем не определена русификация в случае, если комментарии отключены. Ведь некоторые темы используют такой вывод (типа, более простой):

<?php comments_popup_link(); ?>

И появляется текст на буржуйском “Comments off“. Поэтому пользуйте исправленную версию плагина Russify Comments Number от вашего покорного слуги. Да и не забывайте - всегда можно его изменить, чтобы сделать собственную необычную надпись.

Оформление этой надписи остается на долю общего дизайна сайта - можно использовать иконку с метафорой “обсуждение” или балончик, как в комиксах. Главное, на мой взгляд, каким-либо образом выделить этот элемент, чтобы он не казался однородным на фоне предыдущих и следующих элементов. Ведь читатель должен сразу заметить, есть ли уже комментарии к записи, да и искать так куда бы нажать он не будет.

Внутри самого поста комментарии должны также быть выдержаны в общем стиле. Нас интересуют две детали - типографика и юзабилити. Первое определяет, прежде всего, читаемость текста (несмотря на то, что люди, читавшие только опусы Лебедева, неверно воспринимают ее как всякие спецсимволы). Второе - удобность ведения дискуссии.

Например, тот же “конфликт” с Бирзулом у меня родился именно потому, что размер абзаца, равный двойному интерлиньяжу, присутствовал только в комментариях, где он, собственно, выглядел гораздо хуже из-за большого междустрочника.

Комментарии, на мой взгляд, должны подчиняться общему стилю текстовых блоков на странице. Да и, если у вас кто-нибудь пишет огромные комментарии, такие же огромные отступы между абзацами не сделают ровным счетом ничего для читаемости и “отдыха” глаз от текста. Скорее наоборот, от донельзя сжатой простыне мы переходим к расстрелянной из АК стенке.

И все же текст комментариев может быть немного другим, чем основной, потому что у них и функция другая. Нет ничего такого, чтобы сделать их немного меньше, например (но в этом случае точно потребуется шрифт без засечек).

Естественно, ссылки в тексте комментария должны быть подчеркнуты, хотя ссылка на имени автора - необязательно (как и ссылки в навигации).

Про семантику - в следующей главке, а здесб всего одна фраза (большая, как всегда).

Во всех темах, которые я видел, комментарии <div id="comments">...</div> внесены в <div id="content">...</div>. Смысла в этом ноль, лучше вынести его за пределы основного контента поста, хотя, скорее всего, это приведет к тому, что придется прописывать дополнительные CSS-атрибуты. Таким образом мы отделим комментарии от текста.

Плюс это позволит нам провести определенную оптимизацию - в HTML комментарии пойдут после сайдбара. С точки зрения SEO это не очень хорошо, т.к. содержание уходит вглубь. Зато пользователи с медленным Интернетом будут видеть нормальную верстку (несмотря на то, что комментариев еще придется подождать).

<?php get_sidebar(); ?> <?php comments_template(); ?>

Про микроформаты в комментариях я обещаю рассказать попозже, так что сейчас просто пробегусь, какими тегами их все-таки оформлять.

• Самый простой вариант - обычными дивами. Вполне себе вариант, пока нет альтернатив.
• Списком. На некоторых блогах комментарии нумеруются в порядке появления, так что вполне логичный вариант. Хотя иногда это делают средствами php в цикле (даже в таком случае стоит использовать упорядоченный <ol>, а не <ul>, с CSS-свойством list-style-type:none), можно попробовать сделать вывод цифр правильно и с оформлением (картинкой фона или expressions).
• Списком определений dl-dt-dd. Тоже так себе вариант, который использовался на прошлом Хабре. Внутри <dl> лежал один <dt>, определявший имя комментатора, и два <dd> - для даты и самого комментария. Хорош этот способ гибким использованием CSS-свойств, но за семантичность ручаться не могу.
• Интересный, но не семантичный способ - с использованием цитаты <blockquote> для текста комментария и <cite> для авторской ссылки. Однако, несмотря на приятность такого способа, комментарий не является цитатой.

Собственно, все что приходит в ум на данный момент. В пост призывается Дин!

Под мета я понимаю всю сопровождющую комментарий информацию об авторе, ссылке на его блог, времени появления и т.п.

Еще одним из классов мета можно назвать последние посты автора комментария, появляющиеся с помощью, например, commentluv. Практику эту не поддерживаю и не одобряю. То же самое о всплывающем окошке с подробной информацией о комментаторе от Comment Info Tip - такое решение подходит большим и серьезным проектам, но не блогам.

Следует заметить, что при использовании div-блоков комментариев, метаинформацию нельзя засовывать в p-параграф с классом (и вообще их не стоит использовать вне блоков текста поста и комментариев, а также дополнительной информации в элементах), лучше уж тогда создать еще один внутренний div. Потому что, на мой взгляд, параграфы все же служат для отображения текстов.

Первое о чем стоит задуматься, так о “чистоте” этой области. Например, чем мне не нравится IntenseDebate - загромождением функциональными элементами всего и вся вокруг. Disqus в этом деле лучше, но не намного. В стандартных же темах часто присутствует множество лишних слов вроде “Comments on” или “Вася Пупкин сподобился написать такой комментарий:”. Все это лишнее, к тому же, повторяющееся в каждой строчке, т.е. избыточное.

Идеал - имя автора и дата. Возможно использовать “написал:” или краткие предлоги, но не более.

Якорь. Якорь - это ссылка со специального элемента в комментарии на сам этот комментарий. Надо сказать, элемент это важный и им не стоит пренебрегать. Даже если ваш блог мало комментируют и вам жалко размера HTML, подумайте о том, что именно этот якорь позволяет делать две вещи. Во-первых, на него могут ссылаться (да и вы в ответе можете указать, что отвечаете именно на этот комментарий). А во-вторых - именно такая ссылка должна приходить по почте подписанным, а не простой #comments.

В качестве управляющего (видимого) элемента выбирается что-то простое и логичное. Часто используется дата, но меня этот способ не особо впечатляет, т.к. лишен подоплеки. Лучше использовать простую решетку (как созданный стандарт) или самый настоящий якорь в стиле ярушечки.

Языком Wordpress+PHP это будет представлено так:

<a id="comment- undefined undefined" href="#comment- undefined undefined">#</a>

Что, соответственно, выведет такой HTML:

<a id="comment-196" href="#comment-196">#</a>

Ссылка на автора комментария как мотивация и средство фидбека очень важна, что не говори. И только селебритиз могут позволить себе ее отключить. Ну, или люди, желающие видеть в своем блоге только друзей.

Опять же, этот пункт может вызывать определенные проблемы. Бывают кривые темы, в которых, если человек не оставил свой урл, будет отображаться ссылка на http:/// или, что не лучше, на сам пост.

Решение простое и зависит от структуры вашего кода.

Обычно это:

<?php if(get_comment_author_url()!="") : ?> <a href="<?php comment_author_url() ?>" rel="external"> <?php comment_author() ?> </a> <?php else : ?> <?php comment_author() ?> <?php endif ?>

или

<?php if(get_comment_author_url()!="") : ?> <a href=" undefined undefined" rel="external"> <?php endif ?> <php comment_author() ?> <?php if(get_comment_author_url()!="") : ?> </a> <?php endif ?>

Что, в общем, имеет значение только для последующих модификаций, типа выделения авторского комментария.

Здесь небольшое отступление о глупости оптимизаторов (которые SEO, да). Это тех самых, которые советуют пихать rel="nofollow" куда не следует. Про любителей <noindex> я, пожалуй, промолчу.

Речь не о ссылках на именах авторов, пожалуй. Использование нофоллоу и ноиндекс здесь еще может быть хоть чем-то оправдано. Хотя я и предпочитаю полную открытость, которая должна принести мне много-много говнокомментаторов.

Но всего хуже - совет закрывать “повторяющиеся” ссылки на пост - с катом #more и на комментарии #comments, анкоры на комментарии и т.п. Ведь поисковики прекрасно склеивают подобные ссылки и знают, что это всего лишь анкор на странице.

По привязке комментов ко времени кратко - она должна быть записана по правилам русской типографики (28.10.08 или 28/X/08; время - 22:21, через точку редко). Смысл иметь дату в комментариях есть точно - чтобы было по чему ориентироваться тем, кто хочет откомментировать. Про время тоже самое.

<?php comment_date('d.m.y'); ?> undefined 

undefined

Для вывода русифицированных дат в постах используют обычно плагин Russian Date, но в комментариях это избыточно. Впрочем, если нужно использовать какой-то необычный шаблон, то эта функция использует стандартные PHP-шные символы-”маски”:

j

День месяца без ведущих нулей

d

День месяца, 2 цифры с ведущими нулями

z

Порядковый номер дня в году (нумерация с 0)

w

Порядковый номер дня недели

D

Сокращенное наименование дня недели, 3 символа

l

Полное наименование дня недели

n

Порядковый номер месяца без ведущих нулей

m

Порядковый номер месяца с ведущими нулями

M

Сокращенное наименование месяца, 3 символа

F

Полное наименование месяца

Y

Порядковый номер года, 4 цифры

y

Номер года, 2 цифры

g

Часы в 12-часовом формате без ведущих нулей

h

Часы в 12-часовом формате с ведущими нулями

a

am или pm

A

AM или PM

G

Часы в 24-часовом формате без ведущих нулей

H

Часы в 24-часовом формате с ведущими нулями

O

Разница с временем по Гринвичу в часах

i

Минуты с ведущими нулями

s

Секунды с ведущими нулями

Размещать же саму дату можно как угодно, помня о “чистоте” пространства и думая о читаемости мета-информации - автор комментария должен быть наиболее видим. Поэтому предпочтительно либо выделить имя комментатора, либо убрать дату вправо по float:right.

Еще одна фишка, немного связанная с датой - закрытие возможности комментировать к старым постам. Стоит делать только тогда, когда смысл обсуждения со временем исчезает (новостная тема). Делает это плагин Comment Timeout.

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

Есть неплохой вариант с подставлением фавиконки блога комментатора в качестве авы - Favatars. Вот эта идея даже более интересная.

Ну и совсем кратко. Этой функции в некоторых темах нет вовсе.

Это практически тот же аналог функции, выдающей ссылку на редактрирование поста:

<?php edit_post_link('edit', '[', ']'); ?>

Ссылка на редактирование видна только залогиненному админу и позволяет переходить к редактированию в один клик.

<?php edit_comment_link('edit', '{', '}'); ?>

Соответственно, в аргументах - текст ссылки, текст до и после.

Мне не особо нравится то, как в Вордпрессе парсится и типографится текст комментария (нет, все практически нормально). Но т.к. этому надо посвятить отдельную публикацию, да еще дописать плагин, то тут просто перечислю пару хитростей.

<php comment_text() ?>

Если же воспользоваться выводом get_comment_text(), то фильтры не будут применяться.

Что же нам надо?

• Во-первых, чтобы все абзацы был в параграфах p. Причем, вне зависимости от количества нажатий Enter (по умолчанию, один раз - это перенос <br />, что полный отстой, выражаясь языком забытого детства). Ну не нравятся мне <br />.
• Выделение ссылок с http:// или просто www (к сожалению, что без них, пока будут обрезаться), причем надо учитывать многие косяки, например, отсутствие захвата точки в конце. При этом сам из анкора такой “живой” ссылки будем вырезать начальное “http://”.

Ну, это такой минимум бойца - на самом деле, нужна поддержка тегов, типографика и прочее-прочее, что будет позже. Применять совет этой главки строго не советуется. Плохо то, что обработка, таким образом, находится в шаблоне.

Суть - в использовании временной переменной и регулярных выражений.

<?php $comm=get_comment_text(); $comm=preg_replace("#(https?)://(S+)([^s.,>)];'"!?])#", '<a href="\0">\2\3\4</a>',$comm); $comm=preg_replace( "#^(?!(https?)://)www.(S+)([^s.,>)];'"!?])#", '<a href="http://\0">www.\1\2\3-</a>',$comm); $comm=str_replace(" - ",'— ',$comm); $comm=preg_replace('/n?(.+?)(?:ns*n*|z)/s', "<p>$1</p>n", $comm); echo $comm; ?>

В случае же, если нам нужно все-таки поддерживать <br />, но в особых случаях (например, в списках, вручную отбиваемых дефисами с новой строки), можно сделать такой опыт. Заменяем пред-пред-последнюю строку на:

$comm=preg_replace('/n?(.+?)(?:ns*n*|z)(?!-)/s', "<p>$1</p>n", $comm); $comm=preg_replace('/n?(.+?)(?:ns*n*|z)-/s', "\1<br />n-", $comm); 

Ну, это чисто умозрительный опыт, чисто для того, чтобы публикация сожрала больше вашего трафика.

Форма комментария должна быть. Рассусоливать о “вписывании” в стиль и прочем я уже не буду. Преимущество сжатой формы с подписью внизу перед обычной также мало, как и в случае “зебры”. Я, например, на автомате заполняю поля автор-мыло-ссылка первыми всегда, и галочки сразу ставлю.

Тут главное, чтобы эти три поля имели правильное наименование, чтобы браузер знал, где автоподстановку выполнить и что подставлять. Комментаторы - ленивые люди.

И помним, что

<?php do_action('comment_form', $post->ID); ?>

надо ставить до кнопки <input type="submit"..., чтобы галочка подписки, капча и все другое, что к этому действию привязано, не уплывало вниз от комментатора.

Предварительный просмотр (например, с помощью Ajax Comment Preview, или Live Comments Preview или Filosofo Comments Preview) - не нужен совершенно.

Редактирование комментариев самим пользователем (например, при помощи Edit Comments XT) также вещь лишняя(обоснование by Смирнов).

Фтопку.