Пришло время серьезно заняться оформлением внешнего вида комментариев WordPress. Практически во всех темах они настраиваются системными файлами, что в свою очередь, ограничивает редактирование отдельных функций. Думаю, многие с таким сталкивались, когда нужно было вносить изменения в комментарии, но не могли найти где именно это находится. Поэтому будет лучше перенести весь функционал в текущую тему, что даст нам полную свободу управления.
В этой статье я собрал несколько интересных функций, которые помогут улучшить комментарии. Все-таки они позволяют вести диалоги, как с администратором сайта, так и между пользователями. Отвечать на вопросы, заводить разные дискуссии, в общем, ввести полноценное виртуальное общение. Так что необходимо уделить им внимание и привести в должный вид.
Вот что мы сделаем:
- Полная пользовательская настройка
- Оформление внешнего вида
- Нумерация комментариев
- Подсчет сообщений каждого пользователя
- Присвоить статус каждому пользователю
- И прочее мелочи
Разберем каждый пункт в отдельности, а в конце статьи будет уже полностью собраны все функции в один готовый код.
Пользовательская настройка комментариев
В WordPress’e вывод комментариев осуществляется через функцию wp_list_comments
, обычно в файле comments.php. А формирование отдельных функций так же, как и сам цикл, используется из шаблона системного файла comment-template.php. Но в редких случаях бывает, что настройка может находиться в теме WordPress, файл functions.php или comments.php.
Так вот, если ваша тема не попадает в редкий случай и есть необходимости сделать свои настройки, тогда открываем файл functions.php и перед знаком ?>
добавляем следующий код:
if ( ! function_exists( 'my_comment' ) ) : function my_comments( $comment, $args, $depth ) { global $commentnumber; $GLOBALS['comment'] = $comment; switch ( $comment->comment_type ) : case 'pingback' : case 'trackback' : ?> <li class="post pingback"> <p><?php _e( 'Pingback:', 'my_press' ); ?> <?php comment_author_link(); ?></p> <?php edit_comment_link( __( 'Edit', 'my_press' ), '<span class="edit-link">', '</span>' ); ?> </li> <?php break; default : $commentnumber++; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>" class="comment"> <div class="comment-meta"> <div class="comment-author vcard"> <?php $avatar_size = 68; if ( '0' != $comment->comment_parent ) $avatar_size = 39; echo get_avatar( $comment, $avatar_size ); /* translators: 1: comment author, 2: date and time */ printf( __( '%1$s %2$s', 'my_press' ), sprintf( '<span class="fn">%s</span>', get_comment_author_link() ), sprintf( '<a href="%1$s"><time pubdate datetime="%2$s">%3$s</time></a>', esc_url( get_comment_link( $comment->comment_ID ) ), get_comment_time( 'c' ), /* translators: 1: date, 2: time */ sprintf( __( '%1$s %2$s', 'my_press' ), get_comment_date(), get_comment_time() ) ) ); ?> </div><!-- .comment-author .vcard --> <?php if ( $comment->comment_approved == '0' ) : ?> <em class="comment-awaiting-moderation"><?php _e( 'Your comment is awaiting moderation.', 'my_press' ); ?></em> <?php endif; ?> </div> <div class="comment-content"> <span class="commentnumber"><?php echo $commentnumber; ?></span> <?php comment_text(); ?> </div> <div class="reply"> <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Reply', 'my_press' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?> </div><!-- .reply --> <?php edit_comment_link( __( 'Edit', 'my_press' ), '<span class="edit-link">', '</span>' ); ?> </div><!-- #comment-## --> <?php break; endswitch; } endif;
Затем в файле comments.php добавить функцию вызова:
<ul class="commentlist"> <?php wp_list_comments( array( 'callback' => 'my_comments' ) ); $commentnumber = 0; ?> </ul>
После этих манипуляций ваши комментарии будут формироваться по шаблонной функции из файла functions.php текущей темы.
Подсчет комментариев каждого пользователя
С помощью ниже представленной функции мы сможем вывести возле комментатора общее его количество оставленных сообщений. Таким образом, можно наблюдать насколько активный пользователь, да и потом, статистика не бывает лишней, тем более в этом плане.
Открываем уже знакомый нам файл functions.php и прописывает в конце перед знаком ?>
следующий код:
//подсчет сообщений пользователей function bac_comment_count_per_user() { global $wpdb; $comment_count = $wpdb->get_var( 'SELECT COUNT(comment_ID) FROM '. $wpdb->comments. ' WHERE comment_author_email = "' . get_comment_author_email() .'" AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")' ); if ( $comment_count == 1) { echo ' 1 Сообщение'; } else { echo ' ' . $comment_count . ' Сообщений'; } }
Теперь осталось добавить функцию вызова в нужное вам место:
<?php bac_comment_count_per_user();?>
Подсчет сообщений будет происходить на основе e-mail пользователя как зарегистрированных, так и нет. Комментарии учитываются только подтвержденные администратором сайта, а в режиме ожидания и удаленные нет.
Присваиваем статус каждому пользователю в зависимости от количества его комментариев
Вот как раз тот случай, где статистика определенно играет важную роль. Поскольку функция построена за счет количества сообщений, а в итоге достигнутого числа дает пользователю должный статус. Это, по идее, используется на каждом форуме для показа авторитетности юзера на данном ресурсе.
Снова открываем файл functions.php и перед знаком ?>
добавляем следующий код:
//статус пользователя function get_author_class($comment_author_email,$user_id){ global $wpdb; $adminEmail = get_option('admin_email'); $author_count = count($wpdb->get_results( "SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = '$comment_author_email' ")); if($comment_author_email ==$adminEmail) echo '<a class="vp" target="_blank" href="https://wordsmall.ru/" title="Администратор сайта">Админ</a>'; if($user_id!=0 && $comment_author_email !=$adminEmail) echo '<a class="vip" target="_blank" href="" title="Зарегистрированный пользователь">UseR</a>'; if($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo '<a class="vip1" target="_blank" href="" title="Сообщений от 1 до 50">Прохожий</a>'; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo '<a class="vip2" target="_blank" href="" title="Сообщений от 50 до 100">Новичок</a>'; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo '<a class="vip3" target="_blank" href="" title="Сообщений от 100 до 250">Знающий</a>'; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo '<a class="vip4" target="_blank" href="" title="Сообщений от 250 до 400">Опытный</a>'; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo '<a class="vip5" target="_blank" href="" title="Сообщений от 400 до 800">Бывалый</a>'; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo '<a class="vip6" target="_blank" href="" title="Сообщений от 800 до 1200">СуперПупер</a>'; else if($author_count>=1200 && $comment_author_email !==$adminEmail) echo '<a class="vip7" target="_blank" href="" title="Сообщений от 1200 до бесконечности">Профессор</a>'; }
И в желаемом месте выводим функцию вызова:
<?php get_author_class($comment->comment_author_email,$comment->user_id)?>
Объяснение: функция, как и предыдущая, связана с электронной почтой юзера. Только здесь основной задачей является непросто счет сообщений, а количество от и до в зависимости от установленного числа. И как только пользователь достигает его он получает определенную должность. Всего статусов имеется 7, плюс админ и знак отличия для зарегистрированных участников.
Полностью готовый код комментариев
Вот мы и подошли к концу этой статьи. Тут я не поленился, собрав все функции, включая настройку комментариев в один готовый код. Добавил свои стили оформления внешнего вида и в результате получилось что-то вроде мини-форума.
Открываем файл functions.php и в конце перед знаком ?>
добавляем следующий код:
//подсчет сообщений пользователей function bac_comment_count_per_user() { global $wpdb; $comment_count = $wpdb->get_var( 'SELECT COUNT(comment_ID) FROM '. $wpdb->comments. ' WHERE comment_author_email = "' . get_comment_author_email() .'" AND comment_approved = "1" AND comment_type NOT IN ("pingback", "trackback")' ); if ( $comment_count == 1) { echo ' 1 Сообщение'; } else { echo ' ' . $comment_count . ' Сообщений'; } } //статус пользователя function get_author_class($comment_author_email,$user_id){ global $wpdb; $adminEmail = get_option('admin_email'); $author_count = count($wpdb->get_results( "SELECT comment_ID as author_count FROM $wpdb->comments WHERE comment_author_email = '$comment_author_email' ")); if($comment_author_email ==$adminEmail) echo '<a class="vp" target="_blank" href="https://wordsmall.ru/" title="Администратор сайта">Админ</a>'; if($user_id!=0 && $comment_author_email !=$adminEmail) echo '<a class="vip" target="_blank" href="" title="Зарегистрированный пользователь">UseR</a>'; if($author_count>=1 && $author_count<50 && $comment_author_email !==$adminEmail) echo '<a class="vip1" target="_blank" href="" title="Сообщений от 1 до 50">Прохожий</a>'; else if($author_count>=50 && $author_count<100 && $comment_author_email !==$adminEmail) echo '<a class="vip2" target="_blank" href="" title="Сообщений от 50 до 100">Новичок</a>'; else if($author_count>=100 && $author_count<250 && $comment_author_email !==$adminEmail) echo '<a class="vip3" target="_blank" href="" title="Сообщений от 100 до 250">Знающий</a>'; else if($author_count>=250 && $author_count<400 && $comment_author_email !==$adminEmail) echo '<a class="vip4" target="_blank" href="" title="Сообщений от 250 до 400">Опытный</a>'; else if($author_count>=400 &&$author_count<800 && $comment_author_email !==$adminEmail) echo '<a class="vip5" target="_blank" href="" title="Сообщений от 400 до 800">Бывалый</a>'; else if($author_count>=800 && $author_count<1200 && $comment_author_email !==$adminEmail) echo '<a class="vip6" target="_blank" href="" title="Сообщений от 800 до 1200">СуперПупер</a>'; else if($author_count>=1200 && $comment_author_email !==$adminEmail) echo '<a class="vip7" target="_blank" href="" title="Сообщений от 1200 до бесконечности">Профессор</a>'; } //пользовательская настройка комментариев if ( ! function_exists( 'wordsmall_comment' ) ) : function wordsmall_comment( $comment, $args, $depth ) { global $commentnumber; $GLOBALS['comment'] = $comment; switch ( $comment->comment_type ) : case 'pingback' : case 'trackback' : ?> <?php break; default : $commentnumber++; ?> <li <?php comment_class(); ?> id="li-comment-<?php comment_ID(); ?>"> <div id="comment-<?php comment_ID(); ?>" class="comment-body"> <div class="comment-header"> <!-- вывод автора --> <?php printf( '<cite class="fn">%s</cite>', get_comment_author_link() ); ?> <!-- вывод автора (конец) --> <!-- ответ какому пользователю --> <?php if($comment->comment_parent){ $comment_parent_href = htmlspecialchars(get_comment_link( $comment->comment_parent )); $comment_parent = get_comment($comment->comment_parent); ?> <span class="rep-authorcom">@ Ответ для: <?php echo $comment_parent->comment_author;?></span> <?php } ?> <!-- ответ какому пользователю (конец)--> <!-- нумерация комментариев --> <span class="commentnumber"><?php echo '#'.$commentnumber; ?></span> <!-- нумерация комментариев (конец)--> <!-- вывод даты --> <span class="com_date"><?php printf(__('%1$s - %2$s', 'okay'), get_comment_date('d/m/Y'), get_comment_time()) ?></span> <!-- вывод даты (конец)--> </div> <div class="my_comment-author"> <!-- вывод аватара --> <?php $avatar_size = 60; if ( '0' != $comment->comment_parent ) $avatar_size = 60; echo get_avatar( $comment, $avatar_size ); ?> <!-- вывод аватара (конец) --> <!-- вывод статус пользователя --> <span class="commentid"><?php get_author_class($comment->comment_author_email,$comment->user_id)?></span> <!-- вывод статус пользователя (конец) --> <!-- вывод количества сообщений пользователя --> <span class="com_per"> <?php bac_comment_count_per_user();?> </span> <!-- вывод количества сообщений пользователя (конец) --> </div><!-- my_comment-author --> <div class="comment-content"> <!-- вывод сообщения об модерации --> <?php if ( $comment->comment_approved == '0' ) : ?> <em class="comment-awaiting-moderation"><?php _e( 'Ваш комментарий ожидает модерации.', 'wallpress' ); ?></em> <?php endif; ?> <!-- вывод текста комментария --> <?php comment_text(); ?> </div> </div><!-- #comment-## --> <div class="reply"> <!-- кнопки: редактировать , спам, удалить --> <?php edit_comment_link( __( 'Edit', 'wallpress' ), '<span class="edit-link">', '</span>' ); ?> <!-- кнопка ответа --> <?php comment_reply_link( array_merge( $args, array( 'reply_text' => __( 'Ответить', 'wallpress' ), 'depth' => $depth, 'max_depth' => $args['max_depth'] ) ) ); ?> </div><!-- .reply --> <?php break; endswitch; } endif;
Теперь откройте файл comments.php, находим в нем функцию вызова комментариев. Выглядит примерно так:
<ol class="commentlist"> <?php wp_list_comments(); ?> </ol>
Меняем на эту:
<ul class="my_commentlist"> <?php wp_list_comments( array( 'callback' => 'wordsmall_comment' ) ); ?> </ul>
Заключительный шаг. Открываем файл style.css и в конце прописываем следующие стили:
.my_commentlist{ border-top:none; } .my_commentlist .comment{ padding:0 0 15px 0; border:none; } .my_commentlist .pingback{ padding:0 0 15px 0; border:none; } .my_commentlist .comment .children { list-style-type: none; padding:0px; margin-left:0px;/*если нужен отступ для древовидных ком. поставьте 15px*/ } .my_commentlist .comment .children .comment{ margin:15px 0 0 0; border:none; padding: 0; } #comments { background: #fff; } #comments .my_commentlist { margin: 10px 0; padding: 0; list-style:none; background: #ebf0f3; padding: 5px; } #comments .my_commentlist .comment { margin:0; padding: 0 0 10px; background: #fff; } #comments .my_commentlist .my_comment-author { display: inline; border-right: 1px solid #e0e0e0; width: 100px; float: left; margin: 0px 15px 10px 0; } #comments .my_commentlist .commentmetadata { float:left; } #comments .my_commentlist p { clear:none; color: #555; font: 14px arial; line-height: 23px; } #comments .my_commentlist .comment-content { margin-left: 116px; padding-right: 10px; } #comments .my_commentlist .reply { text-align:right; } #comments .my_commentlist .reply a{ background: #f5f5f5; border: 1px solid rgba(0, 0, 0, 0.06); border-radius: 2px; color: #515456; display: inline-block; font-size: 13px; font-weight: normal; line-height: 30px; margin-right: 15px; min-height: 30px; padding: 0 12px; text-align: center; text-decoration: none; } .my_commentlist .avatar{ border: medium none; border-radius: 50%; float: none; margin: 5px auto; padding: 0px; display: table; } .my_commentlist .comment-header{ height: 30px; background: #DEE5EB; margin-bottom: 15px; } .my_commentlist cite.fn{ color: #444; font: bold 13px/30px arial; padding-left: 10px; } .my_commentlist .com_date { color: #8ca0b5; font: normal 13px/30px arial; float: right; padding-right: 15px; } .my_commentlist .commentnumber { color: #8ca0b5; float: right; font: italic 13px/30px arial; padding-right: 15px; } .my_commentlist .comment-body { overflow: hidden; position: relative; background:#fff; } .my_commentlist .rep-authorcom { color: #25394e; font-size: 13px; line-height: 30px; } .my_commentlist .edit-link a { background: none !important; border: none !important; border-radius: 0 !important; color: #999!important; display: inline-block; font-size: 11px !important; font-weight: normal; line-height: 30px; margin-right: 5px !important; min-height: 30px; padding: 0 !important; text-align: center; text-decoration: none; } .com_per { border: medium none; color: #666; display: block; font-size: 11px; text-align: center; } .vip1,.vip, .vp, .vip2, .vip3, .vip4, .vip5, .vip6, .vip7 { border: medium none; font: bold 13px arial; display: block; text-align: center; margin-bottom: 5px; text-decoration: none; } .vp {color: #e82e24;} .vip1 {color: #348be8;} .vip2 {color: #BE005E;} .vip3 {color: #2e517e;} .vip4 {color: #658a18;} .vip5 {color: #00A56D;} .vip6 {color: #e35d28;} .vip7 {color: #99A400;} .vip {color: #4c5176;font-size: 11px;margin: 0;}
Код полностью рабочий и не вызывает ошибок, но могут понадобиться мелкие правки в стилях CSS.
На этом все.
Интересная фишка получилась и главное что рабочая 😮 правда я малость под себя подкорректировал, но за идею респект!
Ссылку для показа напишу, закрой ее или удали, мне чисто тебе показать захотелось trudolove.ru/konkurs-dlya-blogerov-bloger-povar-na-wordpress-2016.html
Что есть, то есть 😉 А весь код не пробовали устанавливать? Вроде, в целом получилось не плохо.
Подскажите, пожалуйста, как сделать так, чтобы нумерация комментариев была не сквозной, а, как бы, вложенной (1,1-1,2-1,3), как на вашем сайте?
Спасибо
Вадим, из этого можно сделать отдельный урок. У меня на сайте нет такой информации, но можете поискать в нете по запросу «нумерация комментариев wordpress». Там давольно легко делается через файл functions.php.
Кстати, загляните в статью «Красивое выделение текста...» я там сбросил пример оформления с шрифтом FontAwesome.
WordSmall, Андрей, я решил задать вопрос здесь, так как в коде есть вывод номера комментариев:
<!-- нумерация комментариев --><span class="commentnumber"><?php echo '#'.$commentnumber; ?></span> <!-- нумерация комментариев (конец)-->
Также, у вас на блоге все написано...скажем так, с пониманием, что очень редко встретишь на других блогах. Где в основном, просто перепечатывают «заезженную» информацию.
из этого можно сделать отдельный урок
Спасибо, я уже видел 🙂
Можно еще рассказать, как у вас реализована штука с обращением по имени/нику, когда нажимаешь кнопку «ответить». А также про то, как добавили кнопки с тегами в форму комментариев?
Вадим, у меня лишь один пример нумерация комментариев, и он, как бы идет в комплекте со всем кодом. Так что, он на половину не в счет 😉 В дальнейшем постараюсь сделать отдельный урок на эту тему.
Насчет остального — ответ тот же. Но, кое-что скоро выложу.
P.S.
Извините за запоздалый ответ, был в отъезде.
WordSmall, Здравствуйте, подскажите как сделать так, чтобы при нажатии на кнопку «Ответить» форма комментирования отцентровывалась по высоте, как у вас, становилась по середине экрана?
Сергей, Здравствуйте! А код комментариев вы брали из моей статьи, или может это в какой-то теме такой недостаток?
Здравствуйте. При нажатии на кнопку ответить выбрасывает на начало статьи. Скопировал полностью готовый код комментариев. Подскажите, что не так делаю.
Спасибо.
Здравствуйте. Это странно. А в исходном коде ссылка пустая получается что ли. Подскажите какая у вас тема, гляну что там.
Тема bellissima-4.4.1
Увы, тема не в открытом доступе, а тем более, она для интернет-магазина. Там хватает своих причуд. Попробуйте просто поменять функцию кнопки ответа.
Андрей, ваш код замечательный, однако у меня возникла небольшая проблема:
не выводится блок кнопок «ответить. редактировать . спам...»
тема дефолтная твентитвелв все вроде установил правильно. но...
помогите если можете плиз...
прилагаю ссылку скриншота на проблему floomby.ru/s2/8gVdaG
вот мой сайт лучшиеинтернетмагазины.рф/joom-internet-magazin-kitayskih-tovarov.html
владимир, спасибо! Добавьте первую часть кода из этой статьи wordsmall.ru/sajtostroeni...e-wordpress.html из части «кнопки быстрого ред...». Тогда должны появиться.
WordSmall, удивлен быстрым ответом... респект вам ...
с админскими кнопками все получилось спс. но вот главная кнопка «ответить» для ответа опр. челу так и не объявилась.
ваш код мне крайне понравился, поэтому прошу еще раз помощи: что не так с кодом??? помогите...
думаю проблема именно в коде, так как я не вижу кода кнопки (хотя я в php слабоват...)
WordSmall, прошу прощения все совсем банально...и просто.
проблему решил а вам еще раз спс. удачи...
Спасибо за отзыв! Не за что)
Здравствуйте, не могу найти, где настраивается отображение имен комментаторов. Аватар, дата, время, текст, кнопка «ответить» есть, имени — нет. Не подскажете?
Здравствуйте. В смысле «где настраивается»??
Просто супер материал, вот такй вопрос можно как-то назначить еще и медальки вместе со званием?
Спасибо! Там у каждого ярлыка есть свой класс. В самом конце кода css можно их найти, пример —
.vp {color: #e82e24;}
. Добавляйте к ним иконку через background, да и все. Отличие админа... даже не знаю. Проверьте еще раз, может перезагрузите страницу ctrl+f5 мало ли.WordSmall, большое спасибо за награды, вот с никовыделением админа неа всё это испробывал нивкакую не хочет показывать, то администратор комментирует или отвечает за комментарий
WordSmall, Тут не через backgruond нужно, а скорей через function добавить каждому званию свою награду 🙂
И ещё нюанс не выводит отличие Администатора как в демке с чего бы это?
И ещё один нюансик, для тех у кого стоит плагин для авторизации через социальные сети тоже бурда получается, так например Вконтакте не все делают привязку к E-mail.
Евгений, на это код не предусмотрен.
WordSmall, И на этом ещё раз огромное спасибище! Очень выручила Ваша статья, со временем сам приколочу выдачу медалей, орденов и награда 🙂 Удачи и успехов Вам! 😉
WordSmall,
С наступающим тебя праздником, если ты с РФ, ну а если нет доброго времени! )
Слушай у меня не выводит админа в комментах, может из-за библиотеки какой в PHP, может быть? Сейчас помогли с ошибками на счёт ZIP
Здравствуйте) Не совсем понял насчет библиотеки, имеете в виду версию PHP? Да нет, вряд ли. А какая у вас тема стоит?
Iconic-one, бесплатная версия, ну WP же перешёл полностью или почти на 7 ку?
Евгений, Все работает, все ярлыки, включая, админа.
WordSmall, Большое спасибо, значит где-то у меня конфликты есть.
WordSmall,
Большое спасибо, буду искать конфликты, всё равно собрался дочернюю делать, и оптимизацию заоодно шаблона.
WordSmall, Проблема решилась большое спасибо нашёл у себя недочёты 🙂
Не за что. В чем же была проблема?