Внешний вид комментариев в WordPress

Дата публикации:Август 21, 2010

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

Наиболее важные требования, которые обычно выставляются к комментариям:

1. Между началом области комментариев и концом записи должна прослеживаться четкая граница разделения.
2. Комментарии должны быть читабельными, как и весь остальной контент сайта.
3. Комментарии не должны сливаться в одну кучу.
4. Автор комментария должен четко прослеживаться.
5. Форма для комментариев должна быть четко структурирована, в ней должен применяться шрифт читабельного размера.

По возможности нужно решить следующие вопросы:

1. Поддерживается ли в комментариях HTML-код? Если поддерживается, то какие именно теги?
2. Проходят ли комментарии премодерацию? Если да, то нужно как-либо уведомить об этом читателей.
3. Какие пользователи могут комментировать запись? Только зарегистрированные?

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

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

Древовидные комментарии были введены в WordPress начиная с версии 2.7. Их активация осуществляется посредством панели администратора (раздел Параметры — Обсуждение). Любая тема, которая поддерживает тег шаблона wp_list_comments(), поддерживает и древовидные комментарии.

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

Если вы решили активировать древовидные комментарии, то вам обязательно нужно будет дать четкий ответ на следующие вопросы:

1. Насколько глубоко можно опускаться вниз по дереву комментариев? (Количество уровней вложенности задается через панель администратора).
2. Каким образом будет стилизована ссылка «Ответить»?
3. Каким образом будет стилизована ссылка «Закончить ответ»?.

Иерархия комментариев обычно выглядит следующим образом:

<li>
[ The top level comment content ]
<ul class="children">
<li>
[ First level reply ]
<ul class="children">
<li>
[ Second level reply ]
</li>
</ul>
</li>
</ul>
</li>
<li>
[ Next comment on the top level ]
</li>

Количество элементов ul с классом children определяется глубиной вложения комментариев, заданной через панель администратора. Стандартное значение глубины — 5. Поскольку концепция построения древовидных комментариях базируется на иерархии, нужно обязательно установить в стилевых таблицах значения отступов или краев (padding, margin) для класса children. Тем самым будет достигнуто четкое разграничение между родительским и дочерним комментариями.

Стилизация ссылки «Ответить» осуществляется еще проще. Все, что необходимо сделать, это изменить стиль блока div с классом reply. Например:

div.reply { float:right; font-size: 12px; }

Стилизация применима и к ссылке «Закончить ответ»:

div.cancel-comment-reply { font-weight:bold; }

Если вас по каким-либо причинам не устраивает стандартное размещение ссылки «Закончить ответ», вы всегда можете сменить его, воспользовавшись тегом шаблона cancel_comment_reply_link(). Чтобы не дезориентировать посетителя, ни в коем случае не следует отдалять ссылку от исходной формы. Ссылка определяется следующим блоком div:

<div class="cancel-comment-reply">
    <?php cancel_comment_reply_link(); ?>
</div>  

Если на вашем сайте частенько разгораются длинные дебаты, древовидные комментарии — то, что вам необходимо!

Поделиться

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

  1. Я вот изучаю шаблоны ворпресс. У меня появился большой интерес в создании тем для ворпресс.

    Во время верстки у меня возник такой вопрос, которого я никак не могу решить. Надеюсь на вашу консультацию.

    Во время работы с comments.php, я я столкнулся с такой проблемой:

    Нужно придать красивый дизайн к выводу комментариев с их авторами. В ворпресс, для вывода, насколько я понял, используется код wp_list_comments()

    Пожалуйста, подскажите как можно изменить вид вывода списка комментариев. Спасибо

  2. Architect Of Ruin says:

    Чтобы изменить внешнее представление, используются стили, которые можно найти в style.css. Ну а про параметры самой функции есть хорошая инфа в кодексе: http://codex.wordpress.org/Function_Reference/wp_

    • Ресурс оказался полезным, все детально показано. Но один минус, язык английский.Не знал, что роль functions.php тоже велика.

      У меня возник еще такой вопрос:

      Как можно добавить каждому комменту ссылку цитировать и ответить, чтобы когда нажимаете на них, в textarea появились кого вы цитируете и сам цитируемый текс или же когда нажимаете на ссылку ответить, в textarea появляется @имя комментатора.

      Очень интересно узнать и внедрить в свой шаблон.

  3. Понятно, спасибо. Иду устанавливать плагин. О результатах работы плагина напишу.

  4. Спасибо, нужно будет это запомнить…

  5. Попогите пожалуйста изменить вид коментариев на моем сайте http://invest-max.ru/ … Они дурацкие… хочется сделать так же красиво как у вас

    • andrus says:

      Здравствуйте!

      Скажите пожалуйста, как вы убрали слово «говорит» в комментах (например: Architect Of Ruin говорит), очень уж мозолит глаза… Насколько понимаю, это предустановлено в самих файлах Вордпресса а не в теме… Уже второй день ищу в интернете, ничего хорошего… Может статья есть? Может подскажите какой файл (файлы) править? у WP 3.5.1 Заранее благодарен!

      • Architect Of Ruin says:

        Здравствуйте, смотря как именно вы хотите удалить. Можно быстро:

        .says {display:none;}

        Добавить это в стилевые таблицы. Его не будет видно, но физически он все равно будет создаваться.

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

  6. Architect Of Ruin says:

    А чем у вас плохи комментарии? Удобные. Попробуйте просто с CSS стилями их поиграться.

  7. Спасибо, будем учиться делать стили для коментов

  8. Alcest says:

    Что есть «The top level comment content» или «Next comment on the top level»? Взялись писать, пишите по русски пожалуйста, если не для китайцев писали эту свою публикацию.

    • Architect Of Ruin says:

      «The top level comment content» — комментарий верхнего уровня, «Next comment on the top level» — комментарий, следующий за верхним, [ First level reply ] — ответ первого уровня, [ Second level reply ] — ответ второго уровня.

  9. Здравствуйте! Я совсем-совсем начинающий сайтостроитель, и мне не хватает в статьях пошаговых инструкций (вот чтоб прям все разжевали до мелких деталей) с демонстрацией примеров, например «форма комментария до и после внесения изменений». А сейчас для меня главный вопрос — как изменить размеры полей формы комментариев, их цвет (а возможно — и местоположение на странице), размер и вид шрифта. Такие вот у меня простенькие вопросы.

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Получать новые комментарии по электронной почте. Вы можете подписаться без комментирования.

Предыдущая запись:

Следующая запись: