Вы здесь: Главная » Wordpress » Изменение полей формы комментариев в WordPress

Изменение полей формы комментариев в WordPress

Стандартная форма комментариев WordPress подразумевает вывод полей имя пользователя, его email и url его сайта, а также большое поле для самого комментария. Все поля снабжены метками, в которых указано название поля.

Стандартная форма комментариев WordPress в теме Twenty twenty на странице выглядит так:

Стандартная форма для комментария в теме Twenty twenty

Эта форма выводится стандартной функцией comment_form() и при формировании страницы имеет такую html-разметку:

Как вы можете видеть, все поля (теги <input>), кроме кнопки отправки (submit), снабжены метками (тег <label>) и размещены в абзацах (<p>), для того, чтобы в форме были отступы и переносы строк, т.к. все элементы формы по умолчанию являются строчными (inline) и размещаются рядом друг с другом в одну линию.

Однако дизайн вашего сайта может подразумевать несколько иное расположение полей, а также отсутствие меток. Вместо этого мы будем выводить текст для заполнения полей внутри них самих с помощью атрибута placeholder. Используем для этого фильтры формы комментариев и перезапишем аргументы функции comment_form().

Где выводить код, заменяющий поля стандартной формы?

Данный код желательно записывать в файле, отвечающем за вывод комментариев - comments.php. Это стандартный файл темы, который добавляется в структуру файлов, например, при использовании сервиса Underscores.me для создания заготовки вашей темы. Либо вы создаете его самостоятельно в соответствии с кодексом WordPress.

Поскольку в самом конце кода вы вызываете функцию comment_form($args); с собственным набором аргументов ($args), то нужно найти стандартную функцию comment_form();, которая наверняка будет присутствовать скорей всего в конце файла comments.php и вставить в скобки аргумент $args. Весь приведенный выше код должен быть ДО вызова comment_form($args);.

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

Код в файле comments.phpВ самом низу - закомментированный вывод стандартной функции comment_form() и начало измененного блока кода для вывода кастомного набора полей для формы комментариев.

CSS-стили для полей формы комментариев в WordPress

Стоит добавить некоторое количество css-стилей для того, чтобы форма выглядела красиво, поля размещались в 2 колонки и имели одинаковую ширину. Также можно задать фоновое изображение для полей с именем и email-ом пользователя. В результате вы получите примерно такую форму комментариев:

Wordpressформа для комментариев

Собственно сами CSS-стили:

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

Убираем атрибут novalidate из формы комментариев

Очень часто в файл function.php добавляют поддержку тегов html5, в том числе и для формы комментариев:

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

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

 

Автор: Админ

2 комментария

  1. Нужно очистить форму comments.php и добавить туда весь этот код, я так понял?

    • Не совсем. Вы оставляете весь код в comments.php, связанный с отображением списка комментариев, и добавляете новый код в конец файла до или после вызова функции comment_form();.
      Есть только 2 замечания:
      1. Функция comment_form(); отвечает за вывод формы комментариев со стандартным набором полей. Нужно либо закомментировать, либо убрать эту функцию, так как вы в самом конце нового кода заменяете ее выводом такой же функции, но с вашими аргументами comment_form($args);.
      2. Если у вас стоит какой-либо плагин кеширования, имеет смысл сбросить кэш (Purge All в некоторых плагинах), т.к. можете не увидеть изменений при добавлении нового кода.
      В статье добавлен скриншот файла comments.php с краткими пояснениями блоков представленного в нем кода.

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

Ваш адрес email не будет опубликован. Обязательные поля помечены *