Как вывести новые комментарии в сайдбаре на WordPress без плагина

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

Мы создадим собственный функциональный шорткод, который поможет нам легко и красиво вывести новые комментарии на нашем сайте. Никаких плагинов — только чистый и оптимизированный код для отображения актуальных комментариев прямо в сайдбаре сайта. Для создания собственного шорткода нам потребуется лишь немного кода.

Первым делом откройте файл functions.php и поместите в него наш шорткод.

function wordsmall_comments_shortcode() {
    ob_start();

    $comments = get_comments('status=approve&number=5'); ?>
    <ul class="ws_wrap_widget_comm">
        <?php foreach ($comments as $comment) { ?>
            <li class="ws_content_widget_comm">
                <div class="auther_comm_ava">
            <?php $title = get_the_title($comment->comment_post_ID);
                echo get_avatar( $comment, $size = '35');
                echo '<span>' . ($comment->comment_author) . ''; ?> к посту: </span>
        </div>
        <div class="ws_text_comm_title">
            <a href="<?php echo get_permalink($comment->comment_post_ID); ?>#comment-<?php echo $comment->comment_ID; ?>" title="<?php echo $title; ?>"> <?php echo $title; ?></a>
            <?php echo  '<span class="ws_text_comm">' . '"' . wp_html_excerpt( $comment->comment_content, 75 ) . '.."' .'</span>'; ?>
        </div>
        <div class="ws_data_comm_num">        
            <span class="ws_comm_data"><?php $d = "M d, Y";
                $comment_ID = $comment->comment_ID;
                $comment_date = get_comment_date( $d, $comment_ID );
                $comment_PID = $comment->comment_post_ID;
                echo $comment_date; ?></span>                                        
            <span class="ws_comm_number"><?php  echo 'Комментариев:'.get_comments_number($comment_PID) ?></span>
        </div>
            </li>
        <?php }  ?>
    </ul>
    <?php
    return ob_get_clean();
}
add_shortcode('ws_recent_comments', 'wordsmall_comments_shortcode');

Параметры функции

('status=approve&number=5'); — Количество комментарий
$size = '35' — Размер аватарок
$comment->comment_content, 35 — Количество символов сообщения

На следующем этапе мы обеспечим поддержку шорткодов в сайдбаре. Для этого достаточно добавить следующую строку в файл functions.php:

//поддержка шорткода в сайдбаре
add_filter('widget_text', 'do_shortcode');

Теперь отправляемся в админку и выбираем раздел «Внешний вид — Виджеты». Затем добавляем новый виджет «HTML-код». В открывшемся окне нам нужно вставить зарегистрированный нами ранее шорткод, который выглядит так: [ws_recent_comments].

Приближаемся к финальному этапу. Добавьте стили в файл style.css, и смело можете редактировать их под дизайн своего сайта.

ul.ws_wrap_widget_comm {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.ws_wrap_widget_comm br {
    display: none;
}

.auther_comm_ava {
    margin-bottom: 15px;
}

.auther_comm_ava span {
    font-weight: 500;
}

.auther_comm_ava img {
    border-radius: 50%;
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
}

.ws_text_comm_title a {
    margin-bottom: 15px;
    display: inline-block;
}

.ws_text_comm_title .ws_text_comm {
    padding: 13px;
    background: #fff;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 15px;
}

.ws_data_comm_num {
    margin-bottom: 2rem;
}

.ws_data_comm_num span {
    font-size: 14px;
    color: #777;
    display: inline-block;
}
.ws_data_comm_num span.ws_comm_data {
    margin-right: 10px;
}

Старый способ

Сделайте поддержку php в сайдбаре WordPress

Зайдите в админ-панель на вкладку «Внешний вид – Виджеты». Добавьте текстовый виджет и в поле ввода вставьте код:

<?php $comments = get_comments('status=approve&number=5'); ?>
<ul class="ws_wrap_widget_comm">
    <?php foreach ($comments as $comment) { ?>
    <li class="ws_content_widget_comm">
        <div class="auther_comm_ava">
            <?php $title = get_the_title($comment->comment_post_ID);
                echo get_avatar( $comment, $size = '35');
                echo '<span>' . ($comment->comment_author) . ''; ?> к посту: </span>
        </div>
        <div class="ws_text_comm_title">
            <a href="<?php echo get_permalink($comment->comment_post_ID); ?>#comment-<?php echo $comment->comment_ID; ?>" title="<?php echo $title; ?>"> <?php echo $title; ?></a>
            <?php echo  '<span class="ws_text_comm">' . '"' . wp_html_excerpt( $comment->comment_content, 75 ) . '.."' .'</span>'; ?>
        </div>
        <div class="ws_data_comm_num">        
            <span class="ws_comm_data"><?php $d = "M d, Y";
                $comment_ID = $comment->comment_ID;
                $comment_date = get_comment_date( $d, $comment_ID );
                $comment_PID = $comment->comment_post_ID;
                echo $comment_date; ?></span>                                        
            <span class="ws_comm_number"><?php  echo 'Комментариев:'.get_comments_number($comment_PID) ?></span>
        </div>
    </li>
    <?php }  ?>
</ul>

Откройте файл style.css и добавьте в него следующие стили:

ul.ws_wrap_widget_comm {
    padding: 0;
    margin: 0;
    list-style: none;
}

ul.ws_wrap_widget_comm br {
    display: none;
}

.auther_comm_ava {
    margin-bottom: 15px;
}

.auther_comm_ava span {
    font-weight: 500;
}

.auther_comm_ava img {
    border-radius: 50%;
    vertical-align: middle;
    display: inline-block;
    margin-right: 10px;
}

.ws_text_comm_title a {
    margin-bottom: 15px;
    display: inline-block;
}

.ws_text_comm_title .ws_text_comm {
    padding: 13px;
    background: #fff;
    display: inline-block;
    font-size: 14px;
    border-radius: 5px;
    border: 1px solid #eee;
    margin-bottom: 15px;
}

.ws_data_comm_num {
    margin-bottom: 2rem;
}

.ws_data_comm_num span {
    font-size: 14px;
    color: #777;
    display: inline-block;
}
.ws_data_comm_num span.ws_comm_data {
    margin-right: 10px;
}

Вот и все, стили изменяйте на свое усмотрение.

48 комментариев
  1. Спасибо! Всё работает отлично. Скажи пожалуйста, как ещё в код добавить функцию вывода количества комментариев и дату?

    1. Количество комментарий в статье указано как изменить. Насчет даты, я обновил код просто скопируйте заново и будет вам дата.

      1. Вы маленько не поняли меня, я имел в виду не количество отображаемых коментов в сайдбаре, а общеее количество комеентов к выводимому посту.

        Например так — Комментарии: 100 | Дата: 18.10.2014

        Заранее Огромное Спасибо!

  2. Перед закрывающим тегом </li> добавьте следующее:

    <?php echo 'Комментарий: '.get_comments_number($comment_PID) ?> И оберните дату с кол. комментарий в блок div, задайте какой-нибудь класс, пропишите желаемые стили. Но, это пожеланию)

    1. Спасибо дружище! Помоги ещё пожалуйста, как можно сделать, что бы загружать изображения в отдельную папку для каждого поста, а то когда все картинки в одной папке uploads не очень удобно?

      1. Рад был помочь! Попробуйте воспользоваться плагином Custom Upload Dir.

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

  3. И оберните дату с кол. комментарий в блок div, задайте какой-нибудь класс, пропишите желаемые стили. Но, это пожеланию)

    Вот не задача, что то я и не заметил сразу, в общем получается так, что после каждого последнего добавленного комментария общее количество комментариев меняется на цифру последнего коммента. Как быть?

    1. Не совсем понял? Выводится количество комментарий комментируемого поста.

      1. Выводится количество комментарий комментируемого поста, то есть выводится одинаковая цифра для всех других комментариев к другим постам.

  4. Сергей

    Где вам нужно выводить количество комментариев? Если на единичной странице записи — код нужно добавлять в single.php или в скрипт, отвечающий за вывод поста.

  5. В общем получается так, если посетитель оставил один комментарий, то эта же цифра, то есть «1 комментарий» отображается для всех остальных оставленных комментариев к другим постам.

      1. Вот код, проверь

        comment_post_ID); echo get_avatar( $comment, $size = '38'); echo '' . ($comment->comment_author) . ''; ?> к посту: <a class="auth" href="comment_post_ID); ?>" rel="external nofollow" title=""> </a> <?php echo '' . wp_html_excerpt( $comment->comment_content, 130 ) . ''; ?>........ | Дата: comment_ID; $comment_date = get_comment_date( $d, $comment_ID ); echo $comment_date;?>

  6. comment_post_ID); echo get_avatar( $comment, $size = '38'); echo '' . ($comment->comment_author) . ''; ?> к посту: <a class="auth" href="comment_post_ID); ?>" rel="external nofollow" title=""> </a> <?php echo '' . wp_html_excerpt( $comment->comment_content, 130 ) . ''; ?>........ | Дата: comment_ID; $comment_date = get_comment_date( $d, $comment_ID ); echo $comment_date;?>

  7. Я понял из за чего такое получается, из за того, что я меняю функцию вывода даты и количество комментариев. Скажи как сделать, что бы выводилось вот так Комментарии: 30 | Дата: 23.06.2014

  8. Вроде сделал, спасибо ещё раз тебе за терпение и помощь, удачи тебе и процветания!!!

  9. Спасибо за код! Подскажите, как сделать так, чтобы ссылка вела не на статью, а на комментарий (hnml#comment-000).

    1. Вадим, Не за что 😉 Измените формат ссылки на этот:

      <a class="auth" href="<?php echo get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID ?>

      1. WordSmall, Спасибо большое, все получилось.

  10. Здравствуйте. А как необходимо изменить код, чтобы текст комментария был кликабельным и вёл на сам комментарий на странице?

    1. Здравствуйте. Оберните в тег ссылки с адресом

      <?php echo get_permalink($comment->comment_post_ID).'#comment-'.$comment->comment_ID ?>

      1. Спасибо! Реализовал задуманное 😉

Оставить ответ

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