Кнопки «Ответить» и «Цитировать» в комментариях без плагинов

Как вы, наверное, могли заметить, у меня в комментариях появились кнопки "Ответить" и "Цитировать". Теперь вы можете легко и быстро ответить на любой комментарий, а также процитировать слова с любого написанного комментария. Надеюсь, вы будете пользоваться ими. А пока я расскажу как установить на своём блоге такие же кнопки без использования плагинов.

Конечно, есть такой плагин, как jQuery Reply to Comment, с помощью которого можно реализовать кнопки "Ответить" и "Цитировать" в комментариях WordPress, но вы же знаете, что не люблю я плагины. Но тем, кто не хочет возиться с кодом или просто плохо разбирается во всем этом, советую поставить плагин. Он достаточно лёгок, добавляет две небольшие java-функции в код и имеет настройки в админ-панели.

Описанный в данном посту способ не использует библиотеку jQuery. Плюс к этому, подойдет не только для WordPress, но и для любого другого движка, даже для самописного. В общем, поехали. 😉

1. Скачиваем архив twin-comments-reply.zip. Распаковываем его и видим файл twin-comments-reply.js. Открываем его любым удобным для вас текстовым редактором. Видим две функции, которые нуждаются в настройке. Итак, первая функция цитирования CF_Quote. В нём необходимо затронуть только две первые строчки:

var otext = document.getElementById('comment-' + id);
var otextCommentArea = document.getElementById("comment");

1.1. В первой строке необходимо значение в скобках 'comment-' + id заменить на своё, хотя обычно на всех блогах это значение и есть нужное. Вот тут и встает вопрос: "А какое значение своё?". Для того, чтобы это узнать, необходимо открыть исходный код любого поста или страницы с комментариями (Ctrl+U). В нём ищем ваш блок комментариев (блок div с id="comments" обычно) и находим в какой id имеют текст комментариев. Если его нету или в нём нету счётчика (id комментария), то стоит его добавить, чтобы при цитировании не бралась дата комментария и левые данные, а был только сам текст комментария.

Например, мои комментарии заключены в блок li с id="comment-152", где 152 - id комментария. А сам текст комментариев заключен в блок div.class="commenttext". Изменить класс я не могу, так как вёрстка комментариев испортится, а вот добавить id со счётчиком могу запросто. Я к блоку текста комментария после класса добавляю id="commenttext-152" и тем самым получаю нужное значение для первого параметра функции цитирования.

В WordPress это реализуется следующим образом. Возьму в пример свои id и классы. Открываем файл comments.php в вашей теме и ищем в нём блок:

<div class="commenttext"><?php comment_text(); ?></div>

И к этому блоку после класса добавляем id со счётчиком с помощью функции comment_ID(). В итоге получаем такой блок:

<div class="commenttext" id="commenttext-<?php comment_ID(); ?>"><?php comment_text(); ?></div>

Таким образом, в первой строке, в скобки, я вписываю значение 'commenttext-' + id. Фух, с этим надеюсь разобрались.

1.2. Во второй строке необходимо значение в скобках "comment" заменить на своё, но в БОЛЬШИНСТВЕ случаев нужно оставить как есть. Аналогично первому параметру, мы ищем id блока, но только теперь блока textarea, в котором комментатор вписывает текст. Опять же, открываем исходный код любого поста или страницы с комментариями и в блоке комментариев ищем строку типа

<textarea name="comment" id="comment" tabindex="4"></textarea>

ID этого поля и есть нужное нам значение. Это значение и вписываем в скобки во вторую строку.

1.3. Теперь рассмотрим вторую функцию CF_Reply. Здесь всего одна строка, точно такая же, что и для пункта 1.2

var otextCommentArea = document.getElementById("comment");

Здесь в скобки вписываем точно то же значение, что и в пункте 1.2. На этом настройка скрипта заканчивается.

Затем сохраняем файл и заливаем его на хостинг в любое понравившееся вам место.

2. Теперь к страницам, где есть комментарии, подключаем этот js-файл. Для этого в соответствующих страницах добавляем в блок <head></head> строку:

<script type='text/javascript' src='ПУТЬ_К_ФАЙЛУ_twin-comments-reply.js'></script>

Для WordPress могу предложить следующий вариант. В файл header.php в тот же блок добавляем следующие строки:

<?php if ( is_single() || is_page() )
  echo "<script type='text/javascript' src='ПУТЬ_К_ФАЙЛУ_twin-comments-reply.js'></script>\n";
?>

Сохраняем изменения и двигаемся дальше. ➡

3. Осталось только добавить кнопки "Ответить" и "Цитировать" в нужное место комментариев. Отдельно их коды выглядят следующим образом.

Кнопка "Ответить":

<a href="#comment" onclick="CF_Reply('ID_комментария','Имя_автора'); return false;">Ответить</a>

Кнопка "Цитировать":

<a href="#comment" onclick="CF_Quote('ID_комментария','Имя_автора'); return false;">Цитировать</a>

Здесь можно проявить свою фантазию и вставить эти коды куда хочется. Но если вам хочется увидеть это на примере, то я расскажу куда я вставлял этот код и как настраивал его оформление на WordPress.

Во-первых, я эти ссылки заключил в блок <p></p> с определенным классом. Во-вторых, между двумя ссылками поставил "|". Затем вставил это всё сразу после блока с текста комментария и настроил оформление. Конкретно блок с кнопками "Ответить" и "Цитировать" имеет примерно следующий код:

<p class="twin-comments-reply">
  <a href="#comment" onclick="CF_Reply('<?php comment_ID(); ?>','<?php comment_author(); ?>'); return false;">Ответить</a> |
  <a href="#comment" onclick="CF_Quote('<?php comment_ID(); ?>','<?php comment_author(); ?>'); return false;">Цитировать</a>
</p>

Вставил я его после следующей строки:

<div class="commenttext" id="commenttext-<?php comment_ID(); ?>"><?php comment_text(); ?></div>

А в файл стилей (в WordPress это style.css) добавил соответствующий стиль с такими свойствами:

.twin-comments-reply {
  font: 12px Arial, Helvetica, sans-serif;
  margin: -8px 0 15px 0;
  text-align: right;
}

И вот теперь вы можете видеть результат работы в любом посту, где есть комментарии.

На первый взгляд может показаться, что сложновато это всё настраивается, но на самом деле это дело пяти минут. Главное хоть чуток понимать о чём я говорю. А у кого возникают проблемы с настройкой или установкой кнопок - пишите в комментариях о проблемах, помогу чем смогу. Удачи Вам!

Постовой: заболел домашний питомец? ветеринарная клиника Биоконтроль поможет вам!

CMS Разработка сайта

Июль 7, 2010 Метки: css, jquery reply to comment, верстка, комментарии, мои наработки, настройка, плагины

22 комментариев

Leo Craft:

Июль 7, 2010 в 16:13

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

Ovsyannikoff:

Июль 7, 2010 в 16:16

Всё четко, подробно и понятно. Спасибо. Опыты надо мной ставил

Сергей Фещуков:

Июль 7, 2010 в 16:27

@ Leo Craft, единственное, что мне там не нравится, что вид комментариев нельзя под дизайн сайта ПОЛНОСТЬЮ настроить, а остальное всё устраивает. Но всё-равно я сторонник стандартных комментариев WordPress.

@ Ovsyannikoff, угу, в онлайн-фотошопе. Принципиально не устанавливаю фотошоп на компьютер, так как не нравится вес программы и загруженность. Да и вообще графическими редакторами пользуюсь не часто. А онлайн-фотошоп для меня ни чем не хуже, Paint’а иногда не хватает для целей.

Supaman:

Июль 7, 2010 в 17:46

Хорошая татейка. Полезная. Сам пытаюь избавляться от плагинов — нагрузку дают большую

Павел:

Июль 13, 2010 в 22:41

Supaman писал(а):

.twin-comments-reply {
font: 12px Arial, Helvetica, sans-serif;
margin: -8px 0 15px 0;
text-align: right;
}

Да,мне тоже понравилось…ИМХО Полезно!

Шах:

Июль 14, 2010 в 04:22

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

Сергей Фещуков:

Июль 14, 2010 в 10:07

@ Шах, оказалось, что такие плагины тоже надо подгонять под верстку (структуру страниц) сайта, к сожалению.

Василий:

Октябрь 21, 2010 в 14:41

Здравствуйте, не получается поставить данные кнопки, но очень хотелось бы.

Пункт 1.1.

В WordPress это реализуется следующим образом. Возьму в пример свои id и классы. Открываем файл comments.php в вашей теме и ищем в нём блок:

Такой строчки у меня нету в comments.php Более менее похожая на эту у меня:

Куда ставить счетчик?

Сергей Фещуков:

Октябрь 21, 2010 в 18:04

@ Василий, нужно найти следующее

<?php comment_text(); ?>

и посмотреть в какой блок он обрамлен. Если обрамления тегами нету, то можно вместо этой строки написать так:

<span id="commenttext-<?php comment_ID(); ?>"><?php comment_text(); ?></span>

Должно сработать.

2web:

Ноябрь 14, 2010 в 19:57

спасибо за статью.
искал что-то подобное для своего блога.

Анна:

Ноябрь 15, 2010 в 13:42

Добрый день!
У меня почему-то ничего не работает. Появляются ссылки Ответить/Цитировать, но при нажатии ничего не происходит… Пробовала в разных браузерах.
Кстати, почему-то плагины смайликов и форматирования тоже почти все не работают:(

Сергей Фещуков:

Ноябрь 15, 2010 в 18:05

@ Анна, здравствуйте. Плагин указанный в посте подходит для одной структуры стандартного (вроде как) шаблона комментариев. Советую использовать Comment Toolbar, вроде с ним конфликтов не возникали. Плагины смайликов и форматирования, честно говоря, ни одного не знаю и не пробовал пользоваться, поэтому в этом вопросе, увы, помочь не могу.

Анна:

Ноябрь 15, 2010 в 18:53

@ Сергей Фещуков, спасибо большое! Попробую…

strikestar:

Декабрь 5, 2010 в 02:04

А у меня на разных страницах разный свой код (id) в исходном коде страницы ‘comment-‘ + id
Вот вы пишете что у вас 152, неужели на каждой странице он одинаковый? У меня например он разный… В итоге я вставлял все как есть, ссылки ответить и цитировать появились, но при нажатии ничего не происходит.. (

Сергей Фещуков:

Декабрь 5, 2010 в 10:17

@ strikestar, он у меня также, как и у всех, везде разный. 152 я взял в пример, потому как после формирования страницы в исходном html-коде стоит не функция, а реальная цифра. Для того, чтобы вывести ID комментария, используйте функцию comment_ID() или get_comment_ID(). Первая сразу выводит ID комментария, а вторая возращает в качестве результата, но не выводит его.

strikestar:

Декабрь 5, 2010 в 12:23

То есть ‘comment-’ + id нужно заменить на ‘comment_ID()‘ ? Дело в том что у меня даже при установке плагинов ничего не происходит, пробовал разные и единственный выход — сделать вручную, как написано у вас.

Сергей Фещуков:

Декабрь 5, 2010 в 23:46

@ strikestar, стоп, java — это java, а php — это php.
В ява файле id задается при вызове функции, то есть в яве файле ид комментария и будет просто id. А когда добавляете ссылки в шаблоне (п.3) используйте comment_ID() для вывода ид комментария. Если вы говорите про свой блог, то у вас текст комментариев не имеет блока с ид, поэтому кнопка и не работает, потому как не может найти блок с текстом. Попробуйте текст комментария засунуть в блок < span id="comment-< ? php comment_ID() ? > » > < / span > (лишние пробелы уберёте).

strikestar:

Декабрь 5, 2010 в 23:56

@ Сергей Фещуков, Оставил как у вас написано :), но немного подредактировал. Убрал значок @ перед ссылкой на комментатора. А вот цитату так и не удалось сделать Пришлось ее удалить. Цитата даже в постах у меня не вставляется и на тег quote вообще нет никакой реакции, вероятно проблема в моем шаблоне. А кнопку ответить поставил, все работает, спасибо!