Янв

Перестановка полей в форме комментариев WordPress

Недавно совершенно случайно узнал, что начиная с новой версии WordPress 4.4 разработчики переместили поле комментариев в начало формы. Теперь там в самом верху находится большой блок (textarea) для размещения коммента пользователя, а уже после него идут «Имя автора», «E-mail» и «Ссылка на сайт».

Изменения будут заметны для веб-проектов, где соответствующая форма реализована через стандартную функцию системы comment_form. Если данный элемент страницы выводится с помощью HTML кода в файле comments.php, то ничего нового вы не увидите. Как бы там ни было, сегодня рассмотрим хаки позволяющие изменить порядок полей в форме комментариев WordPress.

Первым делом хочу сказать пару слов о том зачем разработчиками была сделана данная модификация. Все дело в небольшом «косяке» при использовании древовидных комментариев, когда люди могут отвечать на записи друг друга. После нажатия кнопки «Ответить» пользователь перенаправляется в начало поля для ввода текста комментария. Если он посещает сайт на стационарном компьютере, то наверняка выше увидит наличие обязательных полей «Имя» / «E-mail», но на смартфоне их можно не заметить.

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

Размещаем поле комментариев внизу формы

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

Код добавляете в файл функций functions.php либо через модуль Code Snippets или свой плагин.

function bottom_commentfield( $fields ) {
	$comment_field = $fields['comment'];
	unset( $fields['comment'] );
	$fields['comment'] = $comment_field;
	return $fields;
}
 
add_filter( 'comment_form_fields', 'bottom_commentfield' );

После использования сниппета варианты «до» и «после» для формы комментариев на скриншоте выше поменяются местами. Что же касается самого кода, то здесь логика работы простая:

сначала сохраняем в переменную $comment_field содержимое поля комментариев;
затем удаляем поле с помощью функции unset;
присваиваем новому полю комментариев значение переменной из первого шага.
фильтр comment_form_fields выполняет нашу функцию перед выводом формы.

Перестановка любых полей в форме

Рассмотренный выше прием вы можете применить для изменения порядка вообще всех полей в форме комментариев WordPress. Алгоритм аналогичный — сначала записываем значения полей в переменные, потом удаляем их и заново в нужном порядке добавляем в форму.

Сниппет вставляете в functions.php или через модуль.

function all_commentfields( $fields ) {
	//var_dump($fields); // просмотр всех полей в переменной $fields
 
	// сохраняем значение всех полей формы
	$mycomment_field = $fields['comment'];
	$myauthor_field = $fields['author'];
	$myemail_field = $fields['email'];
	$myurl_field = $fields['url'];
 
	unset( $fields['comment'], $fields['author'], $fields['email'], $fields['url'] );
 
	// заново добавляем поля в форму в нужном порядке
	$fields['url'] = $myurl_field;
	$fields['comment'] = $mycomment_field;
	$fields['author'] = $myauthor_field;
	$fields['email'] = $myemail_field;
 
	return $fields;
}
 
add_filter( 'comment_form_fields', 'all_commentfields' );

Сохраняете и проверяете вывод / работу формы на сайте. В принципе, ничего сложного нет. Если будут какие-то замечания или дополнения по теме перестановки полей, пишите в комментариях.

P.S. Дополнительные WP модули позволяют расширить функциональность вашего веб-проекта. Магазин WordPress плагинов содержит парочку интересных решений для: внедрения разных калькуляторов на сайте, управления рекламой и ссылками.

Оцените статью:

(голосов - 5, средний балл: 5,40 из 7)

Загрузка...

Категории: Хаки и секреты;

Теги: wordpress формы, дизайн, комментирование, оформление блога, сниппеты, юзабилити.

комментариев 14 к статье “Перестановка полей в форме комментариев WordPress”

Дмитрий 17.01.2017
Действительно Вы правы… а я заметил что что-то изменилось, но только сейчас заметил разницу. Можно поинтересоваться как у Вас реализовано красивая вставка кода на страницу. С помощью плагина или кодом? Я пробовал несколько плагинов, но как-то коряво работают.
Tod 17.01.2017
Дмитрий, это плагин WP-Syntax, тоже пробовал несколько подсветок кода, с этим уже лет 5 работаю.
Дмитрий 17.01.2017
у меня тоже стоит WP-Syntax, но замечен глюк, если после вставки кода (не сохраняюсь) переходите в визуальный редактор, то появляются лишние символы. Это хорошо когда статья готова и всего один кусок кода надо вставить, а если много частей кода в разных местах текста то засада какая-то…
Tod 20.01.2017
Дмитрий, после вставки кода нельзя переходить в визуальный редактор, а нужно сохранять только в HTML режиме. С редактированием постов — такая же история. Когда нужно вставить несколько блоков кода, то действительно не особо удобно, но другого выхода нет.
Puloin 13.02.2017
Вообще не замечал, что поля в форме поменялись местами) Однако логика разработчиков вполне понятна. Надо будет глянуть как вообще выглядит мобильная версия моего блога)
Альберт 27.02.2017
Спасибо за статью. Очень помогло.
Алексей 30.08.2017
Привет, за статью спасибо. Я даже не заметил данных изменений.

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

При скроле получается просто какая абракадабра + какие-то артефакты ))

https://image.prntscr.com/image/7USvG36bSb_lnveBsdSdaQ.png – Ссылка на скриншот с вашего сайта, как у меня отображается код на вашем сайте.

Для сведения:
Браузер: Google Chrome Версия 60.0.3112.113 (Официальная сборка), (64 бит)
OC: Mac OS High Sierra
Tod 31.08.2017
Алексей, спасибо за замечание, там по нормальному вместо темных полос должны быть светло серые (типа для удобства читания кода). У вас в браузере случайно не установлены модули переорпеделения стилей?
Алексей 02.09.2017
Нет, модулей не стоит дополнительных.
Проверил в других браузерах, проблема не наблюдается. Может быть это и правда только у меня такая проблема в хроме.
Tod 02.09.2017
Алексей, может это какой-то локальный глюк только с этой версией хрома. Ну, там вместо темный полос должны быть просто светло серые, косяк в стилях. Как автор модуля обновит его, переустановлю.
Леонид 08.12.2017
Если честно, я так и не понял, зачем и для чего эти поля надо переставлять! Объясните мне, пожалуйста, «чайнику» более понятно и доходчиво!)
Tod 08.12.2017
Леонид, в статье сказано зачем это сделали разработчики системы. А что касается приведенных хаков/кодов, то они позволяет все вернуть к начальному виду, если кому-то он кажется более логичным или привычным. Это делать вовсе не обязательно.
Ivan 06.02.2020
Здравствуйте. Подскажите, как в теме Jarida сам блок комментариев переместить сразу под текст, или в любую область поста Благодарю
Tod 10.02.2020
Ivan, смотрите файл шаблона single.php или подобный ему — нужно понять где именно вызывается функция или файл с шаблоном comments. Для разных тем это могут быть разные места вывода, поэтому нет какого-то универстального совета, кроме как «смотреть код» для понимания логики работа темы.

Оставить комментарий

Перестановка полей в форме комментариев WordPress

Размещаем поле комментариев внизу формы

Перестановка любых полей в форме

Похожие статьи:

комментариев 14 к статье “Перестановка полей в форме комментариев WordPress”