Как вывести новые комментарии в сайдбаре на 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 2 3

  1. Спасибо! Ваш способ позволил избежать установки очередного плагина. Из минусов (не критичных, но все же) — заданное число знаков режет слова как взбредет, а хотелось бы «умной» обрезки, т.е. по слову... И второе — по клику попадаешь на статью, а не в область данного комментария. Но, повторюсь, решение отличное, уже пользуюсь.

    С наступающим Новым годом! )

    Ответить

    1. Спасибо! Вас так же, С наступающим Новым годом!) Насчет ссылки прям на комментарий, то чуток выше в комментариях я давал код. А то что режет, ничего не поделаешь. Разве что, совсем убрать)

      Или так (формат ссылки)

      <?php echo get_permalink($comment- rel="nofollow">comment_post_ID); ?>#comment-<?php echo $comment->comment_ID; ?>" rel="external nofollow" title="<?php echo $title; ?>"> <?php echo $title; ?>

      Ответить

  2. Скажите, а зачем в данном случае использовать rel="external nofollow" ? Мы же на собственные статьи ссылаемся.

    Ответить

  3. Здравствуйте! что-то у меня только код отображается, а комментарии не отображаются, хотя выбираю «текст» > добавляю в сайдбар и перед вставкой выбираю вкладку «текст» ...ну и сохраняю.

    Ответить

  4. Почему вы сами не используете этот код на своем сайте? У вас аватарки не отображаются...

    Ответить

  6. У вам там орфографическая ошибка: «количество комментариев», а не «комментарий»...

    Ответить

  8. Круто, а можно как нибудь сделать, чтобы выводились последние комментарии из каких то определенных постов, где это указать ?

    Ответить

      1. WordSmall, А можно синтаксис ? ну то есть как точно параметр &post_id= туда вставить ? а то я вставляю

        помоему не правильно что то делаю )))

        у меня даже окно с комментами пропадает, не то что что то дополнительное появляется.

      2. <?php $comments = get_comments('status=approve&number=5&post_id=18'); ?> Число 18 — это идентификатор поста, замените на свой.

  10. Все супер, вроде статье уже сколько лет, а ведь актуальна ! 🙂

    Еще один вопросик, get_comments ('status=approve&number=5&post_id= (2065, 2049)'); ?>

    стали на странице выводиться комменты с двух указанных id постов, а еще комменты со страницы на которой виджет с кодом размещен, это лечится ? 🙂

    Ответить

    1. Думаю, срок не имеет значение, главное, чтоб код был рабочий. И я не совсем понял суть проблемы. То есть выводит еще комментарии страницы? Тогда замените post_id на post__in. А если виджета с комментариями не должно быть на страницах, тогда придется выводить через файл темы, обернув в условие.

      Ответить
1 2 3
Оставить ответ

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