Как добавить иконки в сообщения WordPress комментарии: практическое руководство

Автор: Екатерина Алексеева | Опубликовано: 31.01.2026

Добавление иконок в комментарии WordPress позволяет улучшить визуальное восприятие обсуждений, выделить определённые типы сообщений и сделать интерфейс более привлекательным и удобным. В этой статье мы подробно разберём, как добавить иконки в комментарии WordPress с помощью кода и плагинов, а также рассмотрим примеры реализации.

Почему стоит использовать иконки в комментариях WordPress

Иконки в комментариях помогают:

Отличать комментарии администратора или модератора от обычных пользователей.
Визуально обозначать типы сообщений (например, ответ, вопрос, благодарность).
Улучшать читаемость и структуру комментариев.
Повышать вовлечённость пользователей за счёт более дружелюбного интерфейса.

Теперь рассмотрим, как реализовать добавление иконок в комментарии технически.

Добавление иконок в комментарии через PHP-код

Для начала добавим иконку рядом с именем автора комментария. Предположим, что мы хотим показывать иконку пользователя-администратора.

Фильтр `get_comment_author` для добавления иконки

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

function wpicons_add_icon_to_admin_comment_author($author, $comment_id) {
    $comment = get_comment($comment_id);
    if (user_can($comment->user_id, 'administrator')) {
        // Иконка администратора (например, из FontAwesome)
        $icon = '<i class="fas fa-user-shield" style="color:#0073aa; margin-right:5px;"></i>';
        return $icon . $author;
    }
    return $author;
}
add_filter('get_comment_author', 'wpicons_add_icon_to_admin_comment_author', 10, 2);

Данный код добавляет иконку «user-shield» FontAwesome перед именем администратора. Чтобы иконки отображались корректно, нужно подключить библиотеку FontAwesome в теме или через плагин.

Подключение FontAwesome в тему WordPress

Добавьте следующий код в functions.php вашей темы:

function wpicons_enqueue_fontawesome() {
    wp_enqueue_style('fontawesome', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}
add_action('wp_enqueue_scripts', 'wpicons_enqueue_fontawesome');

Добавление разных иконок в зависимости от роли пользователя

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

function wpicons_add_icon_by_role($author, $comment_id) {
    $comment = get_comment($comment_id);
    if (!$comment->user_id) {
        return $author; // Гость
    }
    $user = get_userdata($comment->user_id);
    if (!$user) {
        return $author;
    }

    $role_icons = array(
        'administrator' => '<i class="fas fa-user-shield" style="color:#0073aa; margin-right:5px;"></i>',
        'editor' => '<i class="fas fa-user-edit" style="color:#28a745; margin-right:5px;"></i>',
        'author' => '<i class="fas fa-user" style="color:#fd7e14; margin-right:5px;"></i>',
        // Добавляйте свои роли и иконки
    );

    foreach ($user->roles as $role) {
        if (isset($role_icons[$role])) {
            return $role_icons[$role] . $author;
        }
    }
    return $author;
}
add_filter('get_comment_author', 'wpicons_add_icon_by_role', 10, 2);

Использование плагинов для добавления иконок в комментарии

Если не хочется писать код, можно воспользоваться готовыми плагинами. Вот несколько полезных:

Author Hat — выводит значки и метки для авторов и ролей.
WP PostRatings — можно добавить рейтинги и значки к комментариям.
Simple Author Box — добавляет блоки с информацией и иконками авторов.

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

Динамическое добавление иконок на основе пользовательских полей ACF

Если вы используете Advanced Custom Fields (ACF), можно добавить пользовательское поле для роли или типа комментария и отображать иконку на его основе.

function wpicons_add_icon_by_acf_field($author, $comment_id) {
    $comment = get_comment($comment_id);
    $icon_class = get_field('comment_icon_class', 'comment_' . $comment_id); // ACF поле
    if ($icon_class) {
        return '<i class="' . esc_attr($icon_class) . '" style="margin-right:5px;"></i>' . $author;
    }
    return $author;
}
add_filter('get_comment_author', 'wpicons_add_icon_by_acf_field', 10, 2);

Так вы получаете максимальную гибкость — можно задавать иконки индивидуально для каждого комментария через админку.

Советы по оптимизации и безопасности

Всегда проверяйте данные перед выводом, чтобы избежать XSS-уязвимостей (используйте esc_attr и wp_kses_post).
Подключайте только необходимые иконки, чтобы минимизировать нагрузку на страницу.
Кэшируйте результат фильтров, если комментариев много.
Тестируйте отображение на разных устройствах и браузерах.

Заключение

Добавление иконок в комментарии WordPress — это отличный способ улучшить UX и визуально структурировать обсуждения. С помощью нескольких строк кода и подключения FontAwesome вы можете легко добавить иконки для разных ролей. Для более сложных задач подойдут плагины или ACF. Экспериментируйте и улучшайте свои комментарии, делая их более информативными и красивыми.

Если хотите расширить функционал сайта, обратите внимание на плагины из магазина WPSHOP.RU, например, Clearfy Pro для оптимизации или Expert Review для расширенных отзывов с иконками и рейтингами.

Как добавить иконки в сообщения WordPress комментарии