Стандартная форма комментариев WordPress подразумевает вывод полей имя пользователя, его email и url его сайта, а также большое поле для самого комментария. Все поля снабжены метками, в которых указано название поля.
Стандартная форма комментариев WordPress в теме Twenty twenty на странице выглядит так:
Эта форма выводится стандартной функцией comment_form() и при формировании страницы имеет такую html-разметку:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <form action="http://my-wp/wp-comments-post.php" method="post" id="commentform" class="section-inner thin max-percentage" novalidate=""> <p class="comment-notes"><span id="email-notes">Ваш e-mail не будет опубликован.</span> Обязательные поля помечены <span class="required">*</span> </p> <p class="comment-form-comment"><label for="comment">Комментарий</label> <textarea id="comment" name="comment" cols="45" rows="8" maxlength="65525" required="required"></textarea></p> <p class="comment-form-author"><label for="author">Имя <span class="required">*</span></label> <input id="author" name="author" type="text" value="" size="30" maxlength="245" required="required"></p> <p class="comment-form-email"><label for="email">E-mail <span class="required">*</span></label> <input id="email" name="email" type="email" value="" size="30" maxlength="100" aria-describedby="email-notes" required="required"></p> <p class="comment-form-url"><label for="url">Сайт</label> <input id="url" name="url" type="url" value="" size="30" maxlength="200"></p> <p class="comment-form-cookies-consent"> <input id="wp-comment-cookies-consent" name="wp-comment-cookies-consent" type="checkbox" value="yes"> <label for="wp-comment-cookies-consent">Сохранить моё имя, email и адрес сайта в этом браузере для последующих моих комментариев.</label> </p> <p class="form-submit"> <input name="submit" type="submit" id="submit" class="submit" value="Отправить комментарий"> <input type="hidden" name="comment_post_ID" value="1" id="comment_post_ID"> <input type="hidden" name="comment_parent" id="comment_parent" value="0"> </p> </form> |
Как вы можете видеть, все поля (теги <input>), кроме кнопки отправки (submit), снабжены метками (тег <label>) и размещены в абзацах (<p>), для того, чтобы в форме были отступы и переносы строк, т.к. все элементы формы по умолчанию являются строчными (inline) и размещаются рядом друг с другом в одну линию.
Однако дизайн вашего сайта может подразумевать несколько иное расположение полей, а также отсутствие меток. Вместо этого мы будем выводить текст для заполнения полей внутри них самих с помощью атрибута placeholder. Используем для этого фильтры формы комментариев и перезапишем аргументы функции comment_form().
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | add_filter('comment_form_fields', 'theme_slug_new_comment_fields' ); if(!function_exists('theme_slug_new_comment_fields')){ function theme_slug_new_comment_fields( $fields ){ $new_fields = array(); $new_order = array('author','email','comment'); // нужный порядок foreach( $new_order as $key ){ $new_fields[ $key ] = $fields[ $key ]; unset( $fields[ $key ] ); } if( $fields ) foreach( $fields as $key => $val ){ $new_fields[ $key ] = $val; } return $new_fields; } } $args = array( // изменяем текст кнопки отправки 'label_submit'=>'Submit', // удаляем сообщение со списком разрешенных HTML-тегов из-под формы комментирования 'comment_notes_after' => '', 'comment_notes_before' => '', //текст перед формой комментариев 'title_reply' => __( 'Leave a comment' ), //Меняем разметку полей author и email 'fields' => array ( 'author' => '<div class="comment-author comment-block"><input id="author" name="author" type="text" value="" size="30" placeholder="Your name" /></div>', 'email' => '<div class="comment-email comment-block"><input id="email" name="email" type="email" value="" size="30" placeholder="Your email" /></div>' ), //Меняем разметку поля комментария textarea 'comment_field' => '<div class="comment-form-comment"><textarea id="comment" name="comment" aria-required="true" placeholder="Your text"></textarea></div>', //Меняем разметку кнопки submit 'submit_field' => '<div class="form-submit">%1$s %2$s</div>' ); comment_form($args); |
Где выводить код, заменяющий поля стандартной формы?
Данный код желательно записывать в файле, отвечающем за вывод комментариев - comments.php. Это стандартный файл темы, который добавляется в структуру файлов, например, при использовании сервиса Underscores.me для создания заготовки вашей темы. Либо вы создаете его самостоятельно в соответствии с кодексом WordPress.
Поскольку в самом конце кода вы вызываете функцию comment_form($args); с собственным набором аргументов ($args), то нужно найти стандартную функцию comment_form();, которая наверняка будет присутствовать скорей всего в конце файла comments.php и вставить в скобки аргумент $args. Весь приведенный выше код должен быть ДО вызова comment_form($args);.
На скриншоте ниже показан вид файла, сформированного на основе заготовки с Underscores.me с пояснениями к некоторым блокам кода.
В самом низу - закомментированный вывод стандартной функции comment_form() и начало измененного блока кода для вывода кастомного набора полей для формы комментариев.
В том случае, если вам нужно изменить какие-либо другие данные в полях формы, вы можете использовать весь набор аргументов функции comment_form() из официальной документации. Например, для добавления класса .row для самой формы можно записать строку 'class_form' => 'row'. Обычно этот класс используется для создания колонок в Bootstrap.
CSS-стили для полей формы комментариев в WordPress
Стоит добавить некоторое количество css-стилей для того, чтобы форма выглядела красиво, поля размещались в 2 колонки и имели одинаковую ширину. Также можно задать фоновое изображение для полей с именем и email-ом пользователя. В результате вы получите примерно такую форму комментариев:
Собственно сами CSS-стили:
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 | button, input[type="submit"] { background: #5db849; color: #fff; font-size: 1em; padding: 15px 40px; border: none; font-weight: 600; cursor: pointer; width: 260px; } button:hover, input[type="submit"]:hover { background: #00CFE7; border-color: #00CFE7; color: #fff; } .comment-form { display: -webkit-flex; display: -ms-flex; display: flex; justify-content: space-between; flex-wrap: wrap; } .comment-block { -webkit-flex:0 0 49%; -ms-flex:0 0 49%; flex:0 0 49%; } .comment-block input { background-color: #eaeaea; width: 100%; } .comment-form-comment,.form-submit { flex: 0 0 100%; } .form-submit { text-align: center; } input[type="text"], input[type="email"], input[type="url"] textarea { color: #666; display: inline-block; border: 1px solid #ddd; background-color: #eaeaea; padding: 15px; font-size: 16px; margin-bottom: 15px; outline: none; } textarea { width: 100%; height: 150px; } input[placeholder="Your name"] { background: url(assets/icons/user.svg) no-repeat 15px center; padding-left: 45px; } input[type="email"] { background: url(assets/icons/envelope.svg) no-repeat 15px center; padding-left: 45px; } |
Иконки для оформления полей вы можете скачать с сайта flaticon.com, подобрав тот внешний вид, который вам нужен. Имеет смысл сохранять их в формате SVG, т.к. потом можно добавить ту заливку/обводку, которая нужна вам, просто отредактировав код в файле SVG в вашем любимом текстовом редакторе.
Убираем атрибут novalidate из формы комментариев
Очень часто в файл function.php добавляют поддержку тегов html5, в том числе и для формы комментариев:
| 1 2 3 4 5 6 7 | add_theme_support( 'html5', array( 'search-form', 'comment-list', 'comment-form', 'gallery', 'caption', ) ); |
Однако это приводит к тому, что в форме комментариев появляется атрибут novalidate, и заполнение полей формы не проверяется браузером.
Для того чтобы удалить этот атрибут, можно либо несколько исправить предыдущий код, либо отменить это с помощью функции WordPress remove_theme_support().
| 1 2 3 4 5 6 7 8 9 10 | //убрать 'comment-form' из списка поддерживаемых тегов, переписав предыдущий блок кода add_theme_support( 'html5', array( 'search-form', 'comment-list', 'gallery', 'caption', ) ); //добавить строчку, отменяющую add_theme_support(), если вы не знаете, где ее искать remove_theme_support('html5', 'comment-form'); |
Нужно очистить форму comments.php и добавить туда весь этот код, я так понял?
Не совсем. Вы оставляете весь код в comments.php, связанный с отображением списка комментариев, и добавляете новый код в конец файла до или после вызова функции
comment_form();.Есть только 2 замечания:
1. Функция
comment_form();отвечает за вывод формы комментариев со стандартным набором полей. Нужно либо закомментировать, либо убрать эту функцию, так как вы в самом конце нового кода заменяете ее выводом такой же функции, но с вашими аргументамиcomment_form($args);.2. Если у вас стоит какой-либо плагин кеширования, имеет смысл сбросить кэш (Purge All в некоторых плагинах), т.к. можете не увидеть изменений при добавлении нового кода.
В статье добавлен скриншот файла comments.php с краткими пояснениями блоков представленного в нем кода.