💬 Форма коментарів WordPress: від CSS до reCAPTCHA

Q: Що робити, якщо після додавання коду форма коментарів зламалася?

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

Форма коментарів 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 }

CSS код для стилізації полів коментарів WordPress

Додайте цей код у кінець 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');

Форма коментарів WordPress з доданим полем віку

Фільтр проганяє масив $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)

Форма реєстрації сайту в консолі адміністратора Google reCAPTCHA

Заповніть мітку та домен, прийміть умови й натисніть «Надіслати»

Згенеровані site key та secret key у консолі Google reCAPTCHA

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

Налаштування плагіна Invisible reCAPTCHA в панелі WordPress

Вставте ключі у відповідні поля та позначте чекбокс «Enable Comments Protection»
Збережіть зміни

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

Змінюємо заголовок над формою

«Додати коментар», стандартний заголовок, який WordPress виводить над формою. У більшості випадків він нейтральний і доречний, але іноді хочеться чогось більш живого: «Поділіться думкою», «Є що додати?», «Приєднатися до обговорення».

PHP код зміни заголовка форми коментарів через title_reply

Змінюється заголовок через той самий масив $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 дає повний контроль.

Форма коментарів WordPress з текстовим полем унизу

Функція нижче переміщує текстове поле в кінець форми, класичний патерн, знайомий користувачам за старими версіями 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);
можливість підписатися БЕЗ залишення коментаря (гості теж можуть стежити за обговоренням);
період між листами, щоб не спамити.

Плагін додає у форму єдиний чекбокс, користувач позначає його за бажанням. Жодної обов'язковості, жодного погіршення 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 дочірньої теми або через кастомайзер, працює на будь-якому стеку.

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

Іноді кастомні поля потрібні лише під певним контентом. Наприклад, на сайті-кінотеці виводити поле «Вік» під типом запису «Фільми», а в блозі залишати стандартну форму.

Поле віку відображається лише для типу запису Movies у WordPress

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 для швидкості.

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