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

gerurd:

01.04.2019 в 23:24

Да, с синтаксисом я намудрил, просто не знаю как правильно указать сразу несколько post_id откуда будут выводиться комменты. И почему то перестал видеть отправленные в вашей теме комментарии 0_о.

Ответить
gerurd:

01.04.2019 в 23:34

В общем если указывать один конкретный post_id=2049, то комментарии именно с него и выводит. А если несколько, то получается все равно берет комментарии со всех страниц сайта, я это не сразу понял потому что тестовые комменты вбивал именно на интересующих меня страницах. Пробовал так указывать get_comments ('status=approve&number=5&post_in= (2049,2065)'); ?> или так get_comments ('status=approve&number=5&post_in= array (2049,2065)'); ?>. Все равно выводит комменты со всех страниц 🙂

Ответить
gerurd:

01.04.2019 в 23:51

мда, дело было не в бабине. Разница между post_in и post__in все таки ощутимая. ВСЕ, ЗАРАБОТАЛО. ТЫ БОГ.

Ответить
Антон:

08.04.2019 в 17:32

А параметр category_name сюда можно вставить? Чтобы выводил по рубрикам комменты, а то добавляю &category_name=news и ни чего не меняется .

Ответить
1. WordSmall:
  
  09.04.2019 в 09:56
  
  Вот все параметры codex.wordpress.org/Funct...nce/get_comments функции get_comments
  
  Ответить
Nai:

28.10.2020 в 16:52

Отлично!

Ответить

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

Читайте также: