WordPress комментарии – полное оформление внешнего вида

Опубликовано: 01.09.2018

Пришло время серьезно заняться оформлением внешнего вида комментариев 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> <?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> <?php edit_comment_link( __( 'Edit', 'my_press' ), '<span class="edit-link">', '</span>' ); ?> </div> <?php break; endswitch; } endif;

Затем в файле comments.php добавить функцию вызова:

<ul class="commentlist"> <?php wp_list_comments( array( 'callback' => 'my_comments' ) ); $commentnumber = 0; ?> </ul>

После этих манипуляций ваши комментарии будут формироваться по шаблонной функции из файла functions.php текущей темы.

Подсчет комментариев каждого пользователя

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

Открываем уже знакомый нам файл functions.php и прописывает в конце перед знаком ?> следующий код:

Теперь осталось добавить функцию вызова в нужное вам место:

<?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="http://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="http://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> <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> <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> <?php break; endswitch; } endif;

Теперь откройте файл comments.php , находим в нем функцию вызова комментариев. Выглядит примерно так:

Меняем на эту:

<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;}

Посмотреть Demo

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

На этом все.