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

Пришло время серьезно заняться оформлением внешнего вида комментариев 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;}

Посмотреть Demo

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

На этом все.

62 комментария

‹ Назад 1 2 3

Иван:

10.10.2018 в 22:18

Благодарю. понадобилось

Ответить
1. WordSmall:
  
  10.10.2018 в 23:14
  
  Рад, что материал оказался полезным.
  
  Ответить
Eric:

18.02.2019 в 19:35

Добрый день.
Подскажите, можно ли как-то добавить таким образом код, чтобы появилась еще одна кнопка «Подписаться на комментарии» для зарегистрированных пользователей. Чтобы зарегистрированные пользователи могли, не оставляя комментарий и вводя никак данных, просто подписаться на комментарии к записи?

Ответить
1. WordSmall:
  
  18.02.2019 в 20:03
  
  Добрый день. В этом плагине должно это быть ru.wordpress.org/plugins/...mments-reloaded/
  
  Ответить
Антон:

19.11.2021 в 09:08

Молодец. спасибо

Ответить