Тонкая настройка формы комментирования

Давненько я ничего не писал про WordPress. Поэтому сегодня я поделюсь с Вами тем, как можно вручную изменить форму комментирования в ВордПрессе. Думаю, что эти знания могут пригодиться любому начинающему блогеру, ведь форма комментирования это, порой, единственное средство общения посетителей и автора. Не проходите мимо :)

Перед тем, как мы начнем какие-либо манипуляции с кодом, хочу Вас заранее предупредить, что мы будем править файлы самого WordPress’a, а не файлы темы. Да, это может-быть покажется кому-то опасным, кому-то бессмысленным, кому-то просто не понравится :) Но Я сделал это именно так и никаких проблем у меня не возникло. Советую перед началом сделать бекап редактируемого файла.
Насчет безопасности предупредил, теперь хочу показать результат, к которому я пришел.
форма комментариев wordpress
Как мы видим, была убрана строчка «Ваш e-mail не будет опубликован. Обязательные поля помечены *». Не нужно считать посетителей безмозглыми идиотами. Они итак понимают что нужно заполнять, а что нет. Так же я спрятал названия полей внутрь самих полей. К чему эти жирные записи? Большинство посетителей уже и без названий полей может «на глаз» определить, какое к чему относится. Но внутренние хинты все таки должны присутствовать. Ну и подпись к полю комментария утратила свою ненужную жирноту. На мой взгляд, так стало гораздо лучше и свободней.

Так давайте же скорее все менять! ;)
Идем в папку своего сайта и находим в нем файл wp-includes/comment-template.php. Ищем в нем строку 1522, да да именно ее. Как я сам ее нашел это целая история, расскажу об этом чуть позже :)
Итак, открываем файл на редактирование и переходим к 1522 строчке. Сейчас она и следующие (до 1529й) примерно такие:

$fields =  array(
		'author' => '<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		            '<input id="author" name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
		'email'  => '<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) .
		            '<input id="email" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
		'url'    => '<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>' .
		            '<input id="url" name="url" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
	);

Как все просто и понятно. Достаточно просто вырезать все лишнее и немного дописать. Дописывать будет параметр

placeholder="Текст подсказки"

Этот параметр позволяет выводить внутри полей любой текст. Используем его для вывода подсказок:

'<input id="author" name="author" placeholder="Имя" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>'

'<input id="email" name="email" placeholder="Электропочта" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>'

'<input id="url" name="url" placeholder="Адрес блога (если есть)" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>'

Удалять же будем строки:

'<p class="comment-form-author">' . '<label for="author">' . __( 'Name' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) 
'<p class="comment-form-email"><label for="email">' . __( 'Email' ) . '</label> ' . ( $req ? '<span class="required">*</span>' : '' ) 
'<p class="comment-form-url"><label for="url">' . __( 'Website' ) . '</label>'

Они отвечают за вывод подписей над полями.
В результате ВСЕХ этих манипуляций, получаем следующее:

$fields =  array(
		'author' => '<input id="author" name="author" placeholder="Имя" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" size="30"' . $aria_req . ' /></p>',
		'email'  => '<input id="email" name="email" placeholder="Электропочта" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) . '" size="30"' . $aria_req . ' /></p>',
		'url'    => '<input id="url" name="url" placeholder="Адрес блога (если есть)" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" size="30" /></p>',
	);

Остается только удалить глупую подсказку «Ваш e-mail не будет опубликован. Обязательные поля помечены *». Для этого удаляем строку (примерно 1537):

'comment_notes_before' => '<p class="comment-notes">' . __( 'Your email address will not be published.' ) . ( $req ? $required_text : '' ) . '</p>',

Вот вроде бы и все, теперь наша форма стала немного более привлекательной. Надеюсь эта информация кому-то пригодится :)

Напоследок хотелось бы поделиться способом, с помощью которого я искал где, в каком файле и на какой строчке нужно вносить изменения. Перед этим я, естественно, пытался гуглить, но таких полезных мелочей нигде не найти. А может я плохо искал, это уже не важно :)
Теперь, если я хочу что-то изменить, то иду в файл русификации, который расположен по адресу wp-content/languages/ru_RU.po и ищу там текст, который мне нужен. Например, «Ваш e-mail не будет опубликован. Обязательные поля помечены *». Находим нужный текст и видим, что это перевод 1537й строки в файле #: wp-includes/comment-template.php:1537. Готово, мы нашли что искали ;)

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

Комментарии:

  1. Антон — 08.10.2011 23:10

    Турникмен жарит)))

  2. myblaze — 09.10.2011 09:42

    Согласен =)

  3. SADUKEY — 19.11.2011 16:47

    Точняк относительно файла перевода.

  4. myblaze — 19.11.2011 17:03

    Рад, что информация оказалась полезной ;)

  5. David — 25.05.2012 09:47

    Странно, не хочет поддерживать русский язык :)
    Прописываю например в placeholder Имя, чтобы отображалось в поле, вместо этого появляются квадратики в поле на сайте.
    А если английским пишу, всё нормально. Может я что-то пропустил? :))

    ‘author’ => »,

    ’email’ => »,
    );

    Подозреваю, что необходимо что-то прописать в ru_RU.po , но как не знаю…

  6. myblaze — 25.05.2012 11:15

    Не-не, скорее всего это из за кодировки файла. Перекодируйте в UTF-8 (без BOM). Например, Notepad ++ умеет такое делать. Кстати, если у вас не установлен Нотпад++, то советую обязательно установить. Очень удобно и с подсветкой синтаксиса почти всех языков ;)

  7. David — 25.05.2012 12:07

    Ага, на днях скачал Notepad ++ ^_^
    Вы имеете ввиду прокодировать файл ru_RU.po ?

    К сожалению для меня, не помогает :)

    Ну да ладно, и Name люди думаю поймут ^_^

  8. myblaze — 25.05.2012 12:16

    wp-includes/comment-template.php вот этот файл перекодировать. Но у Вас ресурс об английском языке, так что, действительно, и на английском поймут :) Но на всякий случай, если вдруг на русском все таки захотите, то вот этот файл нужно перекодировать, изменения же в нем производятся )

  9. David — 25.05.2012 12:57

    Спасибо большое за советы и быстрые ответы :)

  10. myblaze — 25.05.2012 13:44

    Не за что! Обращайтесь, помогу чем смогу ;)

  11. Елена — 12.06.2012 22:11

    Спасибо огроменское!!!! Я только сейчас поняла, как мне исправить язык в форме комментирования ( у меня тоже кубики были вместо нормальных слов, дня два мозг ломала, а так все просто оказалось!) И форма комментирования теперь выглядит круто:)

  12. myblaze — 13.06.2012 12:17

    Не за что! Я очень рад, когда мои советы кому-то действительно помогают ;) Приходите еще!

  13. Александр — 09.11.2012 18:27

    Было бы хорошо, если сделать, чтобы надпись в поле пропадала при нажатии, то есть в фокусе. А так она остается, пока не начнешь заполнять поле. Как сделать, не в курсе?

  14. myblaze 09.11.2012 18:48

    Александр, да, действительно, placeholder работает так. Ситуация в следующем: появился плейсхолдер в HTML5, до этого все делалось с помощью JavaScripts, следовательно, если хотим сотворить что-то свое, то возвращаемся к тем же яваскриптам. Но я не знаю, как по мне, так это не должно причинять неудобств. Можно единственное сделать в CSS стиль для контрола в фокусе чтобы он как то подсвечивался, тогда хоть текст плейсхолдера и будет виден, но пользователь все равно будет понимать, что сейчас он именно в этом поле.

  15. Александр — 09.11.2012 22:00

    У меня такое ощущение, что решается это все средствами CSS. Я чуЙствую, но не знаю как.))

  16. Виталий — 26.11.2012 23:58

    И чё, всё зделал, теперь при открытии сайта вот что выбивает:
    Parse error: syntax error, unexpected T_CONSTANT_ENCAPSED_STRING, expecting ‘)’ in /home/u469905086/public_html/wp-includes/comment-template.php on line 1538

    и чё делать..?

  17. Виталий — 27.11.2012 00:03

    всё исправил, скачал wp и поставил старый файл..

  18. myblaze 27.11.2012 16:37

    Проблема решена?

  19. Виталий — 28.11.2012 11:18

    Да, исправил обратно на стандарт, похоже тему нужно менять, ни в какую не могу поменять форму комментариев(

  20. Lilla — 19.12.2012 09:12

    «Как мы видим, была убрана строчка «Ваш e-mail не будет опубликован. Обязательные поля помечены *»

    Тоже была озабочена проблемой, как убрать эту надпись и совершенно неожиданно нашла, наверное, самый простой способ это сделать. В исходные файлы wordpress лезть не нужно. Надо всего лишь прописать с помощью css для этой надписи тот же цвет шрифта, что и цвет фона. Вуаля — раздражающая надпись исчезает! Именно так реализовала на своем сайте, для примера: bosyatka.p.ht/novogodnie-rss-2/

  21. myblaze 19.12.2012 17:12

    Lilla, осторожнее с такими фокусами. Текст, который совпадает с цветом фона страницы очень часто используется в дорвеях. Читайте подробнее про клоакинг и прочее, поэтому лучше полностью убирать ненужные строки, так как поисковики могут неправильно о вас подумать ;)

  22. Lilla — 20.12.2012 06:12

    Спасибо за предупреждение. Но цвет текста совпадает, не с фоном страницы, а фоном самой формы комментирования, где и расположен.

  23. Ольга — 27.12.2012 12:46

    Я не решилась что-то менять в comment-template.php , поэтому изменила такие же строчки в comments.php — результат такой же, зато потом при обновлении не нужно будет снова проделывать эту процедуру. Но Вы дали наводку, за это огромное спасибо!!!

  24. myblaze 27.12.2012 17:18

    Ольга, не за что, рад, что вам пригодилась статья. Да, на самом деле, можно поменять все это в comments.php, просто не во всех темах там есть этот код. В моей, например, не было, приходилось тогда копаться в файлах вордпресса :)

  25. AlexZsoft — 19.01.2013 20:32

    Очень полезная статья!

  26. Spy — 11.04.2013 17:10

    заменил свой код кот был первоначальный такойже как и у вас на ваш конечный

    $fields = array(
    ‘author’ => »,
    ’email’ => »,
    ‘url’ => »,
    );

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

  27. myblaze 11.04.2013 20:52

    Spy, точно в том файле меняли? Может в кеше браузера сохранилась старая версия страницы? А может код уже изменился… статье уже полтора года =) Я после этого переделал форму комментирования с помощью function.php чтобы не трогать системные файлы вордпресса, если будет время то напишу новую статью, я постараюсь.

  28. spy — 11.04.2013 21:02

    да
    в файле z:\home\localhost\www\testblog\wp-includes\comment-template.php свой блок кода заменил ваш конечный вариант

    но ничего даже удалял

    z:\home\localhost\www\testblog\wp-includes\comment.php а тут что-то не нахоожу пожожего блока кода как в предыдущем файле

    а в файле темы бесполезно наверн надо в функции копаться))

    п.с на дату поста не смотрел)) просто понадобилось пробую все варианты))

  29. myblaze 12.04.2013 12:37

    spy, странно, ну я постараюсь написать новую статью)

  30. Саша — 13.06.2013 19:43

    Вот что бы не перекодировать файлы, проще вот так сделать и не будет квадратиков в поле:

    placeholder=»‘. __( ‘Name’ ) .'»

  31. PizzaCompany — 31.07.2013 23:47

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

    «wp-content/languages/ru_RU.po» найти не помог пустой фал.

    Исходный код такой :

    Ваш e-mail не будет опубликован.

    E-mail

    Что делать ? Как выкурить ?

  32. PizzaCompany — 31.07.2013 23:48

    Не смог исходный код в комментарий вставить.
    »

    Ваш e-mail не будет опубликован.

    E-mail «

  33. Ленар — 27.09.2013 00:01

    Доброго времени суток, понимаю, что статья была написана давно, но хотелось бы прояснить. Работает ли такая схема с более новыми версиями ворд преса? заранее спасибо ))

  34. serg — 07.10.2013 23:05

    С файлом это аФтар точно подметил, спс биг за помощь оч выручил

  35. Роман — 22.01.2014 10:07

    Добрый день! Спасибо за статью, помогла, и все работает. Вопрос следующий — если на сайте два языка, то как сделать подписи на двух языках?

  36. вова — 14.03.2014 18:39

    а как в форму вставить свою картинку? заранее благодарен

  37. Tit — 20.04.2014 19:47

    Спасибо вам большое. У меня получился :)

  38. Andrey — 31.05.2014 23:18

    Сделал как вы и написали, первая строка Имя — на русском языке, выскочили ромбики со знаками вопроса.
    Вторая строка Email — на английском, и все ок — без ромбиков!
    Третья строка Сайт — снова с ромбиками!
    Что не так? Как визуализировать русский язык?

  39. myblaze 04.06.2014 07:51

    Сделайте кодировку файла UTF-8 (без BOM) и вообще, возьмите за правило — в первую очередь менять кодировку с ANSII на UTF-8 и только потом начинать работу ;) Notepad++ в помощь.

  40. Заур — 07.06.2014 10:08

    Вы наверно забыли, что wordpress часто обновляется. Что будет с вашими файлами при обновлении cms?

  41. Альберт — 31.07.2014 16:28

    у меня только e-mail появилась надпись, а «ваш сайт» и «имя» не появились. Вместо них бессмысленные символы.

  42. myblaze 31.07.2014 21:07

    Альберт, уже ведь писали, что кодировка файла должна быть UTF-8 без BOM. Воспользуйтесь Notepad++ и задайте нужную кодировку файлу.

  43. СаНеК_47 — 18.09.2014 12:23

    Здравствуйте! Спасибо за полезную статью, всё получилось! Скажите, а как Вы реализовали текущую форму добавления комментариев? Очень красивая.

  44. Дмитрий — 31.05.2015 22:34

    Приветствую!
    «Глупая» надпись исчезла, а вот форма — хоть бы хны! Все как было так и осталось. И как тут быть?

  45. Enrott — 20.06.2015 13:26

    Прелестный ответ

  46. serialmint.ru — 03.07.2015 17:32

    Сделайте кодировку файла UTF-8 (без BOM) и вообще, возьмите за правило в первую очередь менять кодировку с ANSII на UTF-8 и только потом начинать работу ?

  47. Journetoi — 28.08.2015 18:37

    Отличный блог, много полезной информации, интересно было почитать, спасибо

  48. Павел — 09.09.2015 16:21

    Спасибо большое! Очень долго искал, как сделать надписи «Имя» и «Почта» прямо внутри строки. Нашел только у Вас. Очень благодарю! Только действительно, после обновлений вордпресс придется наверно еще раз все исправлять. Ну главное сейчас все работает!

  49. Андрей — 10.09.2015 21:01

    У меня тоже и «глупый» текст исчез, и надписи теперь внутри строк, но сами строки съехали влево.
    Мне бы теперь загнать внутрь формы и слово «Комментарий». Реально?

  50. Мое волшебное чудовище — 15.12.2015 20:54

    Добрый день! В дополнение также сменим название формы на Please give us your valuable comment , а надпись на кнопке на Send My Comment .

  51. Умирающая Земля Умирающая земля — 22.12.2015 16:24

    Есть ли способ «вынести» кнопку «Отменить ответ» из формы, чтобы нажав на кнопку «Ответ» на её месте появлялась кнопка «Отменить ответ»?

  52. andrgame — 21.02.2016 18:32

    Использование следующих классов может изменить поведение текста, когда он появляется внутри полей для ввода. Мы изменим стиль текста для поля имени автора и поля Сайт.

  53. ProAvto — 17.04.2016 20:27

    » и удалите его. В случае с темой twentyten это работает.  В других шаблонах может быть придется делать иначе. Только не забудьте сделать копии редактируемых файлов на всякий случай.

  54. SmolUrist.ru — 10.11.2016 03:44

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

  55. Via-Sexgra — 18.11.2016 22:27

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

  56. stroylab.com.ua — 24.11.2016 15:48

    Сегодня попробовал подключить в page.php там всё срабатывает нормально внизу статических страниц появилась форма комментирования.

  57. mp3-vk.ru — 07.12.2016 03:22

    Добрый день. Пытаюсь в схеме Karma добавить возможность комментирования к страницам. Взяв из single.php строку Спасибо, такой вопрос — как изменить слова на самой кнопке? У вас например написано «Опубликовать!», а как изменить на другую фразу?

  58. mmoguider — 04.01.2017 16:56

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

Добавить комментарий