Древовидные комментарии wordpress, wp_list_comments
Пришлось на днях столкнуться с этой задачей и установить в один из wordpress блогов древовидные комментарии. Понятно, что о теме сказано достаточно много, в том числе и в рунете, тем не менее, постараюсь опубликовать что-то вроде дайджеста из небольших моментов (задач), которые пригодятся для древовидных комментариев.
Итак, появилась эта фишка в wordpress начиная с версии 2.7., правда далеко не все темы оказались к этому готовы, поэтому львиную часть времени занимает правка шаблона. Но перед этим древовидные комментарии нужно активировать в админке — идем в раздел «Параметры» — «Обсуждение», где ставим галочку напротив поля «Разрешить древовидные (вложенные) комментарии глубиной уровней» — на английском это «Enable threaded (nested) comments levels deep». При этом указываем количество уровней, для которого можно отвечать на комментарий.
Если после этого в вашем блоге в комментариях не появилась ссылка «Оветить» (Reply), то, увы, шаблон такой вид комментариев не поддерживает. В таком случае нам придется править файл comments.php. Проще всего найти шаблон, который правильно работает с древовидными комментариям либо поиска и в Интернете нужный фрагмент кода. Я нашел подсказку в этой статье. Если вы хотите создать шаблон для всех версий wordpress, то нужно делать проверку поддерживается ли в той или иной установке функция wp_list_comments — для этого создается 2 варианта шаблона и добавляете условный оператор if в код (см. статью). У меня все гораздо проще — wordpress версии 2.8., поэтому лишние действия смысла делать нет.
В самом начале не забудьте сохранить резервную копию файла comments.php на всякий случай. Дальше заходим в header.php, где перед вызовом функции wp_head() добавляем код:
if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); |
Это добавит небольшую функциональность с помощью javascript в комментарии — судя по наблюдениям, форма для комментирования будет отображаться сразу после записи, где вы нажали «Ответить». Далее в файл comments.php записываем код:
<div id="comments-wrap"> <?php // Do not delete these lines if (!empty($_SERVER['SCRIPT_FILENAME']) && 'comments.php' == basename($_SERVER['SCRIPT_FILENAME'])) die ('Please do not load this page directly. Thanks!'); if ( post_password_required() ) { ?> <p class="nocomments">This post is password protected. Enter the password to view comments.</p> <?php return; } ?> <!-- You can start editing here. --> <?php // Begin Comments & Trackbacks ?> <?php if ( have_comments() ) : ?> <h6 id="comments-wrap"><?php comments_number('No Comments', 'One Comments', '% Comments' );?> to “<?php the_title(); ?>”</h6> <div class="navigation"> <div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div> </div> <ol class="commentlist"> <?php wp_list_comments(); ?> </ol> <div class="navigation"> <div class="alignleft"><?php previous_comments_link() ?></div> <div class="alignright"><?php next_comments_link() ?></div> </div> <?php // End Comments ?> <?php else : // this is displayed if there are no comments so far ?> <?php if ('open' == $post->comment_status) : ?> <!-- If comments are open, but there are no comments. --> <?php else : // comments are closed ?> <!-- If comments are closed. --> <p><?php _e('Sorry, the comment form is closed at this time.'); ?></p> <?php endif; ?> <?php endif; ?> <?php if ('open' == $post->comment_status) : ?> <div id="respond"> <h4 class="postcomment"><?php comment_form_title( 'Leave a Reply', 'Leave a Reply to %s' ); ?></h4> <div class="cancel-comment-reply"> <small><?php cancel_comment_reply_link(); ?></small> </div> <?php if ( get_option('comment_registration') && !$user_ID ) : ?> <p>You must be <a href="<?php echo get_option('siteurl'); ?>/wp-login.php?redirect_to=<?php echo urlencode (get_permalink()); ?>">logged in</a> to post a comment.</p> <?php else : ?> <form action="<?php echo get_option('siteurl'); ?>/wp-comments-post.php" method="post" id="commentform"> <?php if ( $user_ID ) : ?> <p>Logged in as <a href="<?php echo get_option('siteurl'); ?>/wp-admin/profile.php"><?php echo $user_identity; ?></a>. <a href="<?php echo wp_logout_url(get_permalink()); ?>" title="Log out of this account">Log out »</a></p> <?php else : ?> <p> <input type="text" name="author" id="author" class="textarea" value="<?php echo $comment_author; ?>" size="28" tabindex="1" /> <label for="author"><?php _e('Name'); ?></label> <?php if ($req) _e('(required)'); ?> </p> <p> <input type="text" name="email" id="email" value="<?php echo $comment_author_email; ?>" size="28" tabindex="2" class="textarea" /> <label for="email"><?php _e('E-mail'); ?></label> <?php if ($req) _e('(required)'); ?> </p> <p> <input type="text" name="url" id="url" value="<?php echo $comment_author_url; ?>" size="28" tabindex="3" class="textarea" /> <label for="url"><?php _e('<acronym title="Uniform Resource Identifier">URI</acronym>'); ?></label> </p> <?php endif; ?> <p> <label for="comment"><?php _e('Your Comment'); ?></label> <br /> <textarea name="comment" id="comment" cols="60" rows="10" tabindex="4" class="textarea"></textarea> </p> <p> <input name="submit" id="submit" type="submit" tabindex="5" value="<?php _e('submit'); ?>" class="Cbutton" /> <?php comment_id_fields(); ?> </p> <?php do_action('comment_form', $post->ID); ?> </form> <?php endif; ?> </div> <?php else : // Comments are closed ?> <p><?php _e('Sorry, the comment form is closed at this time.'); ?></p> <?php endif; ?> </div> |
Еще нужно будет добавить в файл стилей несколько строк:
.alt {margin: 0;padding: 10px;} #comments ol {list-style-type: none;line-height: 18px;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 0px;padding-top: 0px;padding-right: 0px;padding-bottom: 10px;padding-left: 5px;} #comments ul li {list-style-type: none;list-style-image: none;list-style-position: outside;margin-top: 0px;margin-right: 0px;margin-bottom: 0px;margin-left: 5px;padding-top: 5px;padding-right: 0px;padding-bottom: 0px;padding-left: 0pt;} .commentlist {padding: 0;text-align: justify;} .commentlist li {margin: 15px 0 10px;padding: 5px 5px 10px 5px;list-style: none;} .commentlist li ul li { margin-right: -5px;margin-left: 10px;list-style: none;} .commentlist li li {background:none;border:none;list-style:none;margin:3px 0 3px 20px;padding:3px 0;} .commentlist li .avatar {border:1px solid #ccc;margin:15px 8px 6px 0;float: right;padding:2px;width:45px;height:45px;} .commentlist cite, .commentlist cite a {font-weight: bold;font-style: normal;font-size: 1.1em;} .commentlist p {font-weight: normal;line-height: 1.5em;text-transform: none; margin: 10px 5px 10px 0;} #commentform p {font-family: 'Lucida Grande', Verdana, Arial, Sans-Serif;} .commentmetadata {font-weight: normal; margin: 0;display: block; color: #ca5433;} .commentmetadata a, .commentmetadata a:visited {color: #fa7703;} .commentmetadata a:hover{ color: #333333;} .children { padding: 0; } .thread-alt {background-color: #f8f8f8;} .thread-even {background-color: white;} .depth-1 {border: 1px solid #ddd;} .even, .alt {border-left: 1px solid #ddd;} |
Понятно, что их можно изменять и подправить под дизайн вашего блога. После сохранения все должно работать. У Дмитрия Донченко есть статья про древовидные комментарии, где он подробно разбирает некоторые части кода для comments.php, что может прояснить некоторые моменты, если это очень интересно для вас.
Функция wp_list_comments
В версиях wordpress старше 2.7 данная функция отвечает за вывод списка комментариев.
<ol class="commentlist"> <?php wp_list_comments(); ?> </ol> |
Проблема в том, что править формат вывода через шаблон оказалось не так просто. Тем не менее, есть 2 варианта решения данной проблемы — во-первых, вы можете указывать стиль вывода комментариев — с помощью div, ol или ul, а через CSS уже внедрять свои фантазии офомления. Например:
<div class="commentlist"> <?php wp_list_comments(array('style' => 'div')); ?> </div> |
Во-вторых, можно полностью изменить структуру вывода с помощью внедрения своего шаблона. Для этого функция вызывается со специальным параметром:
<ol class="commentlist"> <?php wp_list_comments('callback=mytheme_comment'); ?> </ol> |
А в файле functions.php его необходимо определить. Вот пример из одного блога.
<?php function mytheme_comment($comment, $args, $depth) { $GLOBALS['comment'] = $comment; ?> <div id="comment-<?php comment_ID(); ?>" class="mycomment"> <table><tbody><tr><td width="80" valign="top" > <div class="comment-author vcard"> <?php echo get_avatar($comment,$size='48',$default='<path_to_url>' ); ?> </div> </td><td width="100%" valign="top" style="padding-left: 10px;"> <?php if ($comment->comment_approved == '0') : ?> <em><?php _e('Your comment is awaiting moderation.') ?></em> <br /> <?php endif; ?> <div class="comment-meta commentmetadata"> <?php printf(__('<cite class="fn">%s</cite>'), get_comment_author_link()) ?> пишет <a href="<?php echo htmlspecialchars( get_comment_link( $comment->comment_ID ) ) ?>"><?php printf(__('%1$s at %2$s'), get_comment_date(), get_comment_time()) ?></a><?php edit_comment_link(__('(Edit)'),' ','') ?></div> <?php comment_text() ?> <div class="reply"> <?php comment_reply_link(array_merge( $args, array('depth' => $depth, 'max_depth' => $args['max_depth']))) ?> </div> </td></tr></table> </div> <?php } ?> |
Кстати, описание функции wp_list_comments и примеры использования можно найти также на официальном сайте системы. Кроме того, насколько мне известно, для древовидных комментариев также существуют плагины wordpress, но и полезно знать как вручную эту фишку установить без них.
P.S. Постовой. Заходми в блог юного SEOшника и читаем про Фарму, дорвеи, black seo!
А можно ли на Blogger’e сделать подобное? Очень не удобно то, что невозможно отвечать (как в ЖЖ) определенным комментаторам. Приходится вводить имена. Да и сами читатели видят потом всю переписку. Хотя должны, по идее, получать только ответ на свой вопрос…
Nathaly, можно попробовать реализовать с помощью стороннего сервиса — intensedebate.com
Часто бывает когда хочешь откомментировать какую-то статью, новость или фотку, то натыкаешься на фразу «Чтобы иметь возможность комментировать нужно зарегистрирроваться». А часто вам хочется оставлять свой мейл на случайном сайте? Так и уходишь с него…
Для таких случаев рекомендую новый бесплатный сервис, который позволяет комментировать все, что угодно сразу на сайте. Адрес — http://saiter.ru
Никакой модерации и регистрации. Заходите на любой сайт, пишите свои соображения и они автоматически прикрепляются к странице. Также можно прочитать все, что думают про данный сайт или страницу другие люди. Сервис этот, как бы над сайтами и поэтому вам не нужно спрашивать разрешения админа оставить свой отзыв. Вы, например, можете отправить гневное письмо Биллу Гейтсу прямо на сайте Микрософта и рассказать в нем все, что вы думаете про него и его продукты ;). Нужно ли еще приводить примеры?
Действительно открываются новые горизонты для общения!!!! Пробуйте и не жалейте!
Как сделать размером их по меньше?
inna, посмотрите стили в CSS.
спасибо автору. статья ооочень помогла мне!
Здравствуйте. У меня проблема. Поисковики на моем блоге индексируют каждую ссылку «Ответить» у всех комментов. Получаются несколько дубликатов одной страницы. Как можно заключить в noindex эту ссылку просто?
Режиссер киноблога, найти в коде шаблона эти ссылки и заключить в noindex.
Здравствуйте!
Сделал все, как в статье, но у меня все комментарии и ответы к ним выводятся в один столбик, без отступов. А хотелось бы, чтобы у ответов на комментарии был отступ от главного комментария. Как это можно устроить?
почему то не работает на wp 2.9.2
Krasdee, пиши мне на chashenkov@mail.ru и я вышлю тебе рабочий вариант комментариев…
А где фунция wp_list_comments описывается? в каком файле ее искать?
Life-trip, без понятия, можно погуглить, я не знаю где именно эта функция находится.
Сначало я пользовался плагином WordPress Thread Comment, но потом подумал, ведь функция вывода древовидных комментариев уже встроена в WordPress. Просто нужно что-то поменять в comments.php. Спасибо, что подсказали как это сделать.
А этот код предусматривает выделение комментария админа др. цветом? Если нет, то что добавить к этому коду?
извините за то, что может быть не в тему коммент оставлю…но я уже отчаялся в поисках ответа на мой вопрос….быть может здесь мне кто-нить поможет?
Столкнулся с такой задачей и надеюсь получить совет на этом сайте
Ситуация такая: есть сайт о кино в котором выкладываются анонсы фильмов и на некоторые из них еще и рецензии.
Можно ли сделать так, чтобы на те записи у которых есть и анонс и рецензия, были объединенные комментарии, потому что када зритель заходит и видет инфу о фильме комментирует ее, в одной из записей фильма(например в анонсе) и не видет комментариев к этому же фильму из другой темы (например из рецензии)
Есть ли решение этой задачи?
Эрик, выводятся только комментарии к текущей записи, объединять не получится.
жаль…оочень жаль =(
спасибо.
А я мучилась с плагином WordPress Thread Comment, а всего-то надо было галочку поставить в разделе «Параметры» – «Обсуждение»!! Спасибо, отличный пост, очень помог!
Ура — у меня все заработало!!!
Автор — спасибо большое
А как можно изменить стиль и текст вот у этих строчек?
«Комментариев к записи: 3 комментария»
«Оставить комментарий»
Алекс, добавить для них стили и прописать их в CSS потом, то есть находим в шаблоне места где выводятся эти фразы, вокруг них ставим что-то вроде
после чего в файле стиля прописываем шрифт для .style1
Не совсем по теме, но… Столкнулась с непонятным багом: после отправки комментария пропадает шапка сайта. Не подскажете, где эту проблему копать?
Так, и у мне нужно, чтобы все заработало, спасибо, буду изучать, а то бегло пробежался и не понял толком..
В который раз вы (точнее опубликованный у вас материал) очень выручили.
Очень-очень…
Теперь у меня в бложике тоже имеются древовидные комментарии.
Спасибо вам =)
Единственное неудобство — пришлось переводить стандартные тексты: «количество комментариев», «оставить комментарий» и т.д.
Не подскажете, куда может быть запрятано оформление системы комментирования. Мне бы перевести некоторые реплики.
Часть нашёл в comment.php, думал, остальное в functions.php, но там ничего нету.
Паша, форма комментирования обычно находится именно в comments.php, хотя если шаблон какой-то специфический, то нужно искать во всех файлах.
Дело в том, что то, что было доступно в comments.php, я перевёл
http://i.imgur.com/6WDuC.png
а остальное вообще найти не могу.
Паша, может это какой-то плагин для комментирования и там нужно править тексты. можно еще глянуть в single.php может там что есть, отображение также задается в function.php как вы правильно заметили. Где еще может быть — даже не знаю.
Tod, искал долго и упорно, но нашёл. Видимо, в теме свои прибабахи. Текст правил в wrap_functions.php Может кому-то поможет: вышел на данный файл через en_US.po — в коде нашёл знакомые строчки и наводку на нужный файл =) Скоро все добро можно будет увидеть на iPanel.by
Не подскажете, как изменить стандартный граватар в комментариях?
Максим, насколько я знаю, в настройках wordpress в разделе «Параметры» — «Обсуждение» есть несколько вариантов граватаров. Есть какая-то опция для подключения своей стандартной картинки — нужно погуглить как это добавить в шаблон.
Tod, спасибо за ответ. Я уже давно добавил функцию (установки своего дефолтного аватара) о которой вы говорите. Но проблема в том, что этот аватар отображается везде (в списках пользователей и т.п.) кроме комментариев. В файле comment.php пробовал разные варианты, но аватар по прежнему 0.gravatar.com.
Добрый день, Александр!
А можно к вам обратиться за помощью в доработке моей темы, чтобы комменты выглядели как на картинке в начале поста (аватарки, древовидность)? Тему менять не хочу, она мне нравится, к тому же куча всего туда уже добавлена :)
Я хоть и ковыряюсь сама в кодах, но такую штуку, боюсь, не осилю самостоятельно ;)
Стоимость Вашей работы могу оплатить на Яндекс кошелёк.
Отпишитесь, плиз, возьмётесь за такое дело али нет! ;)
Kseniya, к сожалению, нет времени заниматься доработками. Вы можете скачать на компьютер тот или иной файл шаблона, который собираетесь править, а потом, если что-то пойдет не так, загрузите его на ФТП — то есть сделать резервную копию файла.
Спасибо за статью, — все получилось, правда так и не понял зачем wp_list_comments… — вызывает комментс.пхп, а поставил
‘div’)); ?>
и вообще все работать перестало))). В общем где-то чего-то я не понял, но работает)))
Спасибо. Пригодилось для моего блога
Спасибо за статью. А подскажите, пожалуйста, как с учетом этого показанного файла comments.php можно изменить слова в оформлении комментариев на русские? Чтобы запись вида:
Mr WordPress says:
01/02/2014 at 13:35 (Edit)
Hi, this is a comment…
Reply
стала такой:
Mr WordPress пишет:
01/02/2014 at 13:35 (Редактировать)
Hi, this is a comment…
Ответить
В файле comments.php я могу изменить слова на русские, а в самих комментариях как это сделать?
Спасибо!
Наталия, как только вы поменяете английские слова на русские, то они также будут отображаться и в комментариях.
Я же не спрашивала — как писать коммент по-русски. Я спросила — где, в каком из файлов можно изменить Edit на «Редактировать», says — на «пишет», at — на «в», Reply — на «Ответить»..
Наталия, просматриваете все файлы шаблона и ищете в них «says», «Edit» и т.п., заменяя на русские аналоги. Как правило, они находятся в comments.php. Как только там поменяете, в комментариях будут отображается нужные вам слова.
Как сделать так, чтоб я могла как админ отклонять или публиковать комментарии на моем сайте?
Катя, в админке вордпресс заходите в раздел «Настройки» — «Обсуждение», там есть пункт «Комментарий должен быть одобрен вручную» — для проверки всех записей. По умолчанию отмечена только опция «Автор должен иметь ранее одобренные комментарии», что позволяет проверять записи от пользователей только первый раз.