Форма комментариев WordPress по умолчанию, это четыре серых поля и скучная кнопка «Отправить». Пользователи видят её десятки раз на разных сайтах и просто прокручивают мимо. А между тем живые комментарии, один из сильнейших сигналов для поисковиков: страница регулярно обновляется, получает свежий UGC-контент и удерживает посетителей дольше.

Проблема в том, что стандартный дизайн формы убивает желание писать. Поля «Имя», «Email», «Website» воспринимаются как бюрократия, а не как приглашение к разговору. Хорошая новость: WordPress даёт полный доступ к разметке формы, через фильтры, хуки и CSS её можно превратить во что угодно, не трогая движок руками.

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

💡 Быстрый обзор:

• Меняем стиль полей ввода через CSS (шрифт, цвет, отступы), без плагинов, файл style.css
• Переделываем кнопку отправки: цвет, скругление, текст, через фильтр comment_form_defaults
• Убираем поле Website, спамерам негде оставлять ссылки, пользователям проще
• Добавляем любые поля (возраст, рейтинг, телефон) через comment_form_default_fields
• Ставим Google reCAPTCHA, боты отсекаются, реальные люди проходят незаметно
• Меняем заголовок блока и порядок полей, текстовая область первой или последней
• Подключаем подписку на ответы, Quicktags и CSS-оформление всего блока
• Расширяем форму плагинами (Disqus, Jetpack, Simple Comment Editing) когда кода мало

Меняем стиль полей ввода через CSS

Самый простой и безопасный способ освежить форму: пара строк в style.css темы. CSS-классы полей комментариев задокументированы и не меняются годами. Это #author для имени, #email для почты, #url для сайта и #comment для текста.

Вот пример, который меняет шрифт внутри полей: автор и email получают засечки с курсивом, а поле URL, моноширинный шрифт, чтобы визуально отличаться:

1
#author, #email {
2
    font-family: "Open Sans", "Droid Sans", Arial;
3
    font-style: italic;
4
    color: #1d1d1d;
5
    letter-spacing: .1em;
6
}
7
 
8
#url {
9
    color: #1d1d1d;
10
    font-family: "Lucida Console", "Courier New", "Courier", monospace;
11
}

Добавьте этот код в конец style.css дочерней темы (или через «Внешний вид → Настроить → Дополнительные стили»), сохраните, и поля сразу изменятся. Никаких плагинов, никакой нагрузки.

Меняем внешний вид и текст кнопки отправки

Стандартная кнопка «Отправить», серый прямоугольник без характера. CSS превращает её в яркий призыв к действию. Вот готовый сниппет с градиентом, скруглением и hover-эффектом:

1
#submit {
2
    background: linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
3
    background-color: #44c767;
4
    border-radius: 28px;
5
    border: 1px solid #18ab29;
6
    display: inline-block;
7
    cursor: pointer;
8
    color: #ffffff;
9
    font-family: Arial;
10
    font-size: 17px;
11
    padding: 16px 31px;
12
    text-decoration: none;
13
    text-shadow: 0px 1px 0px #2f6627;
14
}
15
 
16
#submit:hover {
17
    background: linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
18
    background-color: #5cbf2a;
19
}
20
 
21
#submit:active {
22
    position: relative;
23
    top: 1px;
24
}

CSS меняет внешность, но не сам текст. Когда нужно заменить «Отправить» на «Оставить комментарий», «Поделиться мнением» или что-то тематическое, в дело вступает PHP-фильтр comment_form_defaults. Код ниже ставится в functions.php или сниппет-плагин (Code Snippets):

1
$commenter = wp_get_current_commenter();
2
$req = get_option('require_name_email');
3
$aria_req = ($req ? " aria-required='true'" : '');
4
 
5
$fields = array(
6
    'author' => '<p class="comment-form-author">' .
7
        '<label for="author">' . __('Name') . '</label> ' .
8
        ($req ? '<span class="required">*</span>' : '') .
9
        '<input id="author" name="author" type="text" value="' .
10
        esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
11
 
12
    'email'  => '<p class="comment-form-email">' .
13
        '<label for="email">' . __('Email') . '</label> ' .
14
        ($req ? '<span class="required">*</span>' : '') .
15
        '<input id="email" name="email" type="text" value="' .
16
        esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',
17
);
18
 
19
$comments_args = array(
20
    'fields'       => $fields,
21
    'label_submit' => 'Send My Comment',
22
);
23
 
24
comment_form($comments_args);

Ключевая строка: 'label_submit' => 'Send My Comment', именно она переопределяет текст кнопки. Замените строку на свой вариант, и форма заговорит голосом вашего блога.

Убираем поле Website из формы

Поле «Сайт», магнит для спамеров. Они заполняют его ссылками на свои ресурсы, даже если сам комментарий выглядит безобидно. Для обычного читателя это поле не несёт пользы, человек пришёл высказаться, а не рекламироваться.

Удалить поле Website можно без плагинов, через фильтр comment_form_default_fields. Код ниже оставляет только поля имени и email, убирая URL:

1
$commenter = wp_get_current_commenter();
2
$req = get_option('require_name_email');
3
$aria_req = ($req ? " aria-required='true'" : '');
4
 
5
$fields = array(
6
    'author' => '<p class="comment-form-author">' .
7
        '<label for="author">' . __('Name') . '</label> ' .
8
        ($req ? '<span class="required">*</span>' : '') .
9
        '<input id="author" name="author" type="text" value="' .
10
        esc_attr($commenter['comment_author']) . '" size="30"' . $aria_req . ' /></p>',
11
 
12
    'email'  => '<p class="comment-form-email">' .
13
        '<label for="email">' . __('Email') . '</label> ' .
14
        ($req ? '<span class="required">*</span>' : '') .
15
        '<input id="email" name="email" type="text" value="' .
16
        esc_attr($commenter['comment_author_email']) . '" size="30"' . $aria_req . ' /></p>',
17
);
18
 
19
$comments_args = array('fields' => $fields);
20
 
21
comment_form($comments_args);

Массиву $fields мы передали только author и email, ключ url просто отсутствует, WordPress его не рендерит. Пользователю остаётся заполнить два поля вместо трёх, порог входа снижается, а спамерам негде оставлять ссылки. Добавьте код в functions.php и проверьте форму на любой записи.

Добавляем произвольные поля через фильтр

Иногда стандартных полей недостаточно. Нужен рейтинг звёздами, поле «Возраст», чекбокс согласия с правилами, телефон, что угодно. WordPress предоставляет фильтр comment_form_default_fields, который позволяет врезаться в массив полей и добавить своё.

Пример ниже добавляет текстовое поле «Возраст» между стандартными полями и текстовой областью:

1
function add_comment_fields($fields) {
2
    $fields['age'] = '<p class="comment-form-age">' .
3
        '<label for="age">' . __('Age') . '</label>' .
4
        '<input id="age" name="age" type="text" size="30" /></p>';
5
    return $fields;
6
}
7
add_filter('comment_form_default_fields', 'add_comment_fields');

Фильтр гоняет массив $fields через вашу функцию, вы добавляете ключ 'age' с HTML-разметкой, и WordPress рендерит его в форме. Таким же образом можно добавить поле «Телефон» (type="tel"), чекбокс подписки на рассылку (type="checkbox") или выпадающий список с выбором темы обращения (<select>).

Главное преимущество фильтра перед прямым редактированием шаблона: ваш код живёт в functions.php или Code Snippets и не зависит от конкретной темы. Сменили тему, кастомные поля остались.

Подключаем Google reCAPTCHA для защиты от спама

Даже с удалённым полем Website спамеры находят лазейки. Боты научились генерировать осмысленные комментарии и обходить простые капчи. Google reCAPTCHA решает проблему фундаментально: проверка происходит в фоне, без кликов по светофорам.

Плагин Invisible reCAPTCHA for WordPress интегрирует проверку во все стандартные формы сайта, логин, регистрацию, восстановление пароля и, что важно для нас, комментарии. Он отслеживает поведение указателя мыши и паттерны взаимодействия, вычисляя бота без единого вопроса к живому пользователю. Подробнее о настройке читайте в нашем материале как добавить reCAPTCHA в комментарии WordPress.

Короткий алгоритм настройки:

• Перейдите на google.com/recaptcha/admin/create и зарегистрируйте сайт (выберите v3 или v2 Invisible)

• Заполните метку и домен, примите условия и нажмите «Отправить»

• Скопируйте Site Key и Secret Key, они понадобятся для активации плагина
• В админке WordPress перейдите в «Настройки → Invisible reCAPTCHA»

• Вставьте ключи в соответствующие поля и отметьте чекбокс «Enable Comments Protection»
• Сохраните изменения

С этого момента каждый комментарий проходит фоновую проверку. Живой пользователь ничего не замечает, бот получает отказ. Спам-комментарии падают до нуля за один вечер.

Меняем заголовок над формой

«Добавить комментарий», стандартный заголовок, который WordPress выводит над формой. В большинстве случаев он нейтрален и уместен, но иногда хочется чего-то более живого: «Поделитесь мнением», «Есть что добавить?», «Присоединиться к обсуждению».

Меняется заголовок через тот же массив $comments_args, который мы использовали для кнопки. Параметр title_reply переопределяет текст:

1
$comments_args = array(
2
    'fields'       => $fields,
3
    'title_reply'  => 'Please give us your valuable comment',
4
);
5
comment_form($comments_args);

Код ставится в functions.php вместе с остальными настройками формы. Если вы уже кастомизировали кнопку или удаляли поле Website, просто добавьте 'title_reply' в существующий массив $comments_args, не создавая дублирующий вызов comment_form().

Меняем порядок полей

Начиная с WordPress 4.4 текстовая область по умолчанию идёт первой, перед именем, email и сайтом. Пользователь сразу видит, куда писать. Но если вы привыкли к старому формату (имя → email → сайт → текст), фильтр comment_form_fields даёт полный контроль.

Функция ниже перемещает текстовое поле в конец формы, классический паттерн, знакомый пользователям по старым версиям WP:

1
function wpb_move_comment_field_to_bottom($fields) {
2
    $comment_field = $fields['comment'];
3
    unset($fields['comment']);
4
    $fields['comment'] = $comment_field;
5
    return $fields;
6
}
7
add_filter('comment_form_fields', 'wpb_move_comment_field_to_bottom');

Логика простая: извлекаем элемент comment из массива, удаляем его с текущей позиции и ставим последним. Хотите другой порядок, меняйте очерёдность unset и присваивания. Массив $fields, это обычный PHP-ассоциативный массив. Его стандартные ключи: author (имя), email (почта), url (сайт) и comment (текст). Плюс любые кастомные поля, которые вы добавили ранее.

Подписка на ответы к комментариям

Пользователь оставил комментарий и ушёл. Ему ответили через три дня, он не узнает и не вернётся. Чекбокс «Уведомлять об ответах» решает эту проблему: читатель получает email, когда кто-то отвечает на его комментарий, и возвращается в ветку обсуждения.

За эту функцию отвечает плагин Subscribe to Comments Reloaded. Установите его стандартным способом (Плагины → Добавить новый → поиск по названию), активируйте и перейдите в «Настройки → Subscribe to Comments».

В настройках можно задать:

• текст рядом с чекбоксом;
• дизайн уведомлений (простой текст или HTML);
• возможность подписаться БЕЗ оставления комментария (гости тоже могут следить за обсуждением);
• period между письмами, чтобы не спамить.

Плагин добавляет в форму единственный чекбокс, пользователь отмечает его по желанию. Никакой обязаловки, никакого ухудшения UX. А возвращаемость читателей на сайт растёт ощутимо.

Quicktags: панель форматирования над текстом

Quicktags, это кнопки форматирования, которые WordPress показывает над текстовым полем комментария: Bold, Italic, Link, Quote. По умолчанию они отключены в большинстве тем, а зря: пользователь, который видит знакомую панельку как в Word, чувствует себя увереннее и пишет более структурированные комментарии.

Плагин Comment Form Quicktags одной кнопкой включает эту панель. После установки и активации зайдите в «Настройки → Обсуждение», найдите секцию Quicktags и включите опцию. Сохраните, и панель появится над текстовым полем на всех записях.

Полное CSS-оформление блока комментариев

Когда хочется не просто подкрасить поля, а переработать весь блок, с фоном, тенями, скруглениями, отступами, нужен комплексный CSS. Ниже готовый набор стилей, который превращает серую простыню в аккуратную карточку с границей, тенью и цветным акцентом слева:

1
.comment-respond,
2
.entry-pings,
3
.entry-comments {
4
    color: #444;
5
    padding: 20px 45px 40px 45px;
6
    border: 1px solid #ccc;
7
    overflow: hidden;
8
    background: #fff;
9
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
10
    border-left: 4px solid #444;
11
}
12
 
13
.entry-comments h3 {
14
    font-size: 30px;
15
    margin-bottom: 30px;
16
}
17
 
18
.comment-respond h3,
19
.entry-pings h3 {
20
    font-size: 20px;
21
    margin-bottom: 30px;
22
}
23
 
24
.comment-respond {
25
    padding-bottom: 5%;
26
    margin: 20px 1px;
27
    border-left: none !important;
28
}
29
 
30
.comment-header {
31
    color: #adaeb3;
32
    font-size: 14px;
33
    margin-bottom: 20px;
34
}
35
 
36
.comment-header cite a {
37
    border: none;
38
    font-style: normal;
39
    font-size: 16px;
40
    font-weight: bold;
41
}
42
 
43
.comment-header .comment-meta a {
44
    border: none;
45
    color: #adaeb3;
46
}
47
 
48
li.comment {
49
    background-color: #fff;
50
    border-right: none;
51
}
52
 
53
.comment-content {
54
    clear: both;
55
    overflow: hidden;
56
}
57
 
58
.comment-list li {
59
    font-size: 14px;
60
    padding: 20px 30px 20px 50px;
61
}
62
 
63
.comment-list .children {
64
    margin-top: 40px;
65
    border: 1px solid #ccc;
66
}
67
 
68
.comment-list li li {
69
    background-color: #f5f5f6;
70
}
71
 
72
.comment-list li li li {
73
    background-color: #fff;
74
}
75
 
76
.comment-respond input[type="email"],
77
.comment-respond input[type="text"],
78
.comment-respond input[type="url"] {
79
    width: 50%;
80
}
81
 
82
.comment-respond label {
83
    display: block;
84
    margin-right: 12px;
85
}
86
 
87
.entry-comments .comment-author {
88
    margin-bottom: 0;
89
    position: relative;
90
}
91
 
92
.entry-comments .comment-author img {
93
    border-radius: 50%;
94
    border: 5px solid #fff;
95
    left: -80px;
96
    top: -5px;
97
    position: absolute;
98
    width: 60px;
99
}
100
 
101
.entry-pings .reply {
102
    display: none;
103
}
104
 
105
.form-allowed-tags {
106
    background-color: #f5f5f5;
107
    font-size: 16px;
108
    padding: 24px;
109
}
110
 
111
.comment-reply-link {
112
    cursor: pointer;
113
    background-color: #444;
114
    border: none;
115
    border-radius: 3px;
116
    color: #fff;
117
    font-size: 12px;
118
    font-weight: 300;
119
    letter-spacing: 1px;
120
    padding: 4px 10px;
121
    text-transform: uppercase;
122
    width: auto;
123
}
124
 
125
.comment-reply-link:hover {
126
    color: #fff;
127
}
128
 
129
.comment-notes {
130
    display: none;
131
}

Этот CSS стилизует не только форму, но и список уже опубликованных комментариев: аватарки становятся круглыми и выезжают влево, ответы выделяются фоном и рамкой, ссылка «Ответить» превращается в компактную кнопку, а надпись «Ваш email не будет опубликован» скрывается.

Добавляется в style.css дочерней темы или через кастомайзер, работает на любом стеке.

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

Иногда кастомные поля нужны только под определённым контентом. Например, на сайте-кинотеке выводить поле «Возраст» под типом записи «Фильмы», а в блоге оставлять стандартную форму.

WordPress позволяет привязать фильтр к конкретному post type через условный тег is_singular():

1
function add_comment_fields($fields) {
2
    if (is_singular('Movies')) {
3
        $fields['age'] = '<p class="comment-form-age">' .
4
            '<label for="age">' . __('Age') . '</label>' .
5
            '<input id="age" name="age" type="text" size="30" /></p>';
6
    }
7
    return $fields;
8
}
9
add_filter('comment_form_default_fields', 'add_comment_fields');

Функция та же, что в разделе про добавление полей, но обёрнута в if (is_singular('Movies')). Поле «Возраст» рендерится ТОЛЬКО когда текущая страница, одиночная запись типа Movies. В блоге, на страницах и в других custom post types форма остаётся стандартной.

Плагины для продвинутой кастомизации

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

Jetpack Comments

Jetpack от Automattic, это не просто плагин комментариев, а целый набор модулей (больше 20 штук). Ключевая фича именно в комментариях: пользователь может авторизоваться через соцсети (Google, Twitter, Facebook) и публиковать комментарий без заполнения полей вручную. Форма становится короче, порог входа снижается. При этом никто не отменяет классический вариант, поля для ручного ввода остаются доступны.

Disqus Comment System

Disqus, самая известная альтернатива стандартным комментариям. Ключевые плюсы: сортировка по новым/старым/популярным, возможность «заапвойтить» чужой комментарий, рекомендации похожих записей с вашего же сайта, синхронизация комментариев обратно в базу WordPress (можно в любой момент откатиться на стандартную форму без потери данных). Для пользователя с аккаунтом Disqus комментирование становится бесшовным на любом сайте, где стоит этот плагин, увидел уведомление об ответе, перешёл, ответил.

Из минусов: обязательная регистрация в Disqus (в отличие от стандартной формы, где достаточно имени и email), рекламные ссылки, которые нужно отключать в настройках, и вопросы к конфиденциальности, плагин собирает данные посетителей для показа рекомендаций. В пару к Disqus обязательно поставьте Disqus Conditional Load: он откладывает загрузку скриптов до момента, когда пользователь доскроллил до комментариев, и заметно ускоряет страницу.

Simple Comment Editing

Simple Comment Editing решает одну конкретную задачу: даёт пользователю 5-минутное окно на редактирование только что отправленного комментария. Опечатка в имени, кривая ссылка, грамматическая ошибка, увидел, исправил, сохранил. Исследования показывают, что большинство пользователей замечают ошибки именно после отправки, и возможность быстро поправить текст снижает тревожность и повышает вовлечённость.

Lazy Load for Comments

Lazy Load for Comments не добавляет новых функций, но делает важное: откладывает загрузку всего блока комментариев до момента прокрутки. Поскольку комментарии всегда в самом низу страницы, их HTML и скрипты не должны грузиться с основным контентом. Плагин срезает лишние запросы на старте, ускоряет Largest Contentful Paint и в целом делает сайт быстрее по метрикам Core Web Vitals.

Видео: кастомизация формы комментариев на практике

В этом 10-минутном туториале показан полный процесс настройки формы комментариев WordPress, от добавления кастомных полей до стилизации CSS:

⁉️🤔 Частые вопросы

Можно ли настроить форму комментариев без правки файлов темы?

Да, и это даже рекомендуется. Кастомный CSS вставляется через «Внешний вид → Настроить → Дополнительные стили», а PHP-код, через плагин Code Snippets (бесплатный, в репозитории WordPress). Оба способа переживают смену темы и обновления без потери. Единственное исключение, если вы точно знаете, что работаете с дочерней темой и контролируете её functions.php и style.css.

Какой способ защиты от спама лучше: reCAPTCHA или удаление поля Website?

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

Что делать, если после добавления кода форма комментариев сломалась?

Первое: проверьте, что PHP-код вставлен в functions.php ДО закрывающего тега ?> (если он есть) и что сниппет не содержит синтаксических ошибок. Второе: если вы редактировали functions.php напрямую, всегда делайте бэкап перед правкой, белый экран смерти лечится восстановлением файла по FTP. Третье: если форма просто исчезла визуально, проверьте CSS на наличие display: none в селекторах .comment-respond или .comment-notes.

Работает ли этот код с блочными темами (FSE)?

CSS-стили работают в любой теме, включая блочные (Twenty Twenty-Three, Twenty Twenty-Four и производные). PHP-фильтры comment_form_defaults и comment_form_default_fields тоже универсальны, они являются частью ядра WordPress и не зависят от темы. Единственный нюанс: в блочных темах шаблон комментариев может быть переопределён через редактор сайта (Site Editor), и CSS-классы могут отличаться, проверяйте фактические селекторы через инспектор браузера.

Можно ли полностью отключить комментарии на всём сайте?

Да: «Настройки → Обсуждение» → снимите галочку «Разрешить оставлять комментарии к новым записям». Для уже существующих записей, выберите все в «Записи → Все записи», действие «Изменить», применить, в выпадающем списке «Комментарии» выберите «Запрещено». Плагины вроде Disable Comments делают то же самое одной кнопкой, но для разовой операции плагин избыточен.

Что ставить и в каком порядке: итоговый чек-лист

Порядок действий, который даст максимум результата с минимумом возни:

• Удалите поле Website, спамерам негде оставлять ссылки, пользователям проще.
• Поставьте reCAPTCHA v3, боты отсекаются на уровне поведения, без капчи.
• Освежите CSS, шрифт, отступы, цвет кнопки, тень на блоке; пять минут и форма выглядит как часть дизайна, а не как чужеродный элемент.
• Добавьте подписку на ответы, каждый второй вернувшийся комментатор приходит именно по уведомлению.
• Включите Quicktags, панель форматирования повышает уверенность пользователя и качество текста.

Если после этих шагов форма всё ещё не дотягивает до желаемого, переходите к продвинутым техникам из руководства: кастомные поля под конкретные типы записей, Disqus для сообщества, Lazy Load для скорости.

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