Сегодня я добрался до формы комментариев своего блога и слегка над ней поиздевался: добавил поле для указания аккаунта в Twitter и автоматическое увеличение поля для ввода сообщения. Посмотрел на всё это дело и понял, что у меня вполне симпатичные комментарии, отчего захотелось показать вам, как сделать такие же.

За всю историю блога я успел сотворить с комментариями следующее.

• Разделил комментарии и трекбеки. Очень наглядно это представлено на странице конкурса на «7 лучших советов начинающим блоггерам».
• Добавил возможность указать свой аккаунт в Твиттере, ссылка на который вместе с иконкой появляется под текстом комментария.
• Убрал гадость под названием «nofollow» — это такой тег, который делает из блоггера жадину в глазах его читателей.
• Установил простенький антироботовый заборчик.
• Сделал комментарии древовидными, отчего они и смотрятся симпатично, и искать в них информацию удобно.
• Добавление происходит с помощью технологии Ajax, которая позволяет не перезагружать страницу, когда в этом нет необходимости.
• Научил поле для ввода сообщения самоувеличиваться в зависимости от широты слога комментатора.

Теперь я подробно опишу свои действия и в качестве примера буду использовать свой сайт для «Тестирования разных штук», который постепенно обрастает всякими разностями.

Отделение трекбеков от комментариев

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

В вашем шаблоне откройте файл comments.php и после

<?php foreach ($comments as $comment) : ?>

вставьте

<?php $comment_type = get_comment_type(); ?><br />
<?php if($comment_type == 'comment') { ?>

перед

<?php endforeach; ?>

добавьте

<?php } else { $trackback = true; } /* End of is_comment statement */ ?>

перед

<?php else : // If there are no comments yet ?>

вставьте

<?php if ($trackback == true) { ?></p>
<h3>Trackbacks</h3>
<ol>
<?php foreach ($comments as $comment) : ?><br />
<?php $comment_type = get_comment_type(); ?><br />
<?php if($comment_type != 'comment') { ?></p>
<li><?php comment_author_link() ?></li>
<p><?php } ?><br />
<?php endforeach; ?>
</ol>
<p><?php } ?>

Это пересказ коротенькой статьи «Separating Trackbacks from Comments», и этот метод сработает у вас только если вы используете старый шаблон комментариев, а не функцию wp_list_comments ().

В новых версиях WordPress (например 2.9.1) в шаблоне Default используется как раз эта функция. Я решил не заморачиваться и заменил файл comments.php на аналогичный из другого стандартного шаблона Classic, где всё сделано почти так, как нам необходимо.

Чтобы всё было полностью хорошо, замените

<ol id="commentlist">

на

<ol class="commentlist">

Посмотреть результат можно, например, на этой странице.

Древовидные комментарии

Для этого мы используем замечательный плагин WordPress Thread Comment, который заодно обеспечит нам добавление комментариев с помощью Ajax. Скачаем, установим и приступим к настройкам.

Перейдём на страницу Настройки → Древовидные комментарии. Для примера включим «Использование поддержки AJAX» и в поле «Информировать комментатора о появлении новых комментариев» выберем «Commenter choose to do so (default checked)».

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

Captcha

Чтобы роботы-спамеры нас не мучали, установим какой-нибудь плагин, предназначенный для их отпугивания. Это может быть, например, Quiz или Amcaptcha от Алексея Московского.

Избавление от nofollow

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

@Twitter

Чтобы нашим читателям было ещё интереснее комментировать наш блог, предоставим им возможность оставлять ссылки на свои аккаунты в системе микроблогинга Twitter. Для этого используем плагин Twitterlink Comments. Скачаем, установим и приступим к настройкам.

Перейдём на страницу Настройки → TwitterLink Settings и в поле «Add Twitter Field Automatically?» выберем «No». В поле «Twitter Link Position» я выбрал «End of Comment Text», что позволит обображать ссылку на твиттер пользователя под его комментарием.

Link Format

HTML before link — здесь я отметил «No» для «Use NoFollow?» и в текстовое поле вставил следующий код, содержащий иконку Твиттера:

<p class="twi"><img src="http://seogad.ru/twi.png" />

Иконку я взял из замечательной французской коллекции иконок.

HTML after link — здесь я закрыл тег:

</p>
<p>

Модификация шаблона

Теперь сохраним настройки (Save changes) и перейдём к редактированию шаблона. Для начала откроем файл style.css и добавим туда стили для нашей иконки со ссылкой.

p.twi {<br />
line-height:16px;<br />
}<br />
p.twi img {<br />
float:left;<br />
margin-right:5px;<br />
}

Это только пример, можете задизайнить как вам больше нравится.

В ручную добавим текстовое поле в форму отправки комментария. Для этого откроем файл comments.php и после

<label for="url"><small><?php _e('Website'); ?></small></label></p>
<p><?php endif; ?>

добавим

<br />
<input type="text" name="atf_twitter_id" id="atf_twitter_id" value="" size="22" tabindex="3" />
<label for="atf_twitter_id"><small><?php _e('Имя в Twitter (без http:// и @)'); ?></small></label></p>
<p>

Модификация поля для сообщений

С Твиттером мы разобрались, и если есть желание, можем добавить последнюю вкусность для нашей формы добавления комментария — автоматически расширяемое поле для сообщения, для создания которого понадобится скачать и активировать плагин Comment Autogrow. К сожалению, на моём тестовом блоге этот плагин пришлось отключить, так как он мешал корректной демонстрации моего урока по созданию каталога песен на WordPress, но он активирован на этом блоге.

На этом урок окончен. Надеюсь, вам понравилось украшать комментарии на WordPress вместе со мной.

До новых встреч. Желаю всего самого интересного.
Артём Савельев.

P.S. Не забываем, что Аббат Кальне проводит конкурс для блоггеров, в рамках которого просит рассказать участников, чем для них является блоггинг. Работы принимаются до 20 февраля.