Как стилизовать форму комментирования WordPress – визуальное изменение формы…

В статье в подробностях рассмотрим вопрос о том, как можно видоизменить стандартную форму комментирования: поменяем порядок вывода полей для заполнения комментаторами, кардинально изменим стили самой формы комментирования, а также её отдельных блоков (элементов) – в общем, полностью поправим стилистику (дизайн) на свой вкус.

Те админы, которые используют шаблоны из репозитория WP понимают о чём я говорю.

Решения нынешних задач на примере темы Twenty Sixteen. Хотя, в принципе, без разницы – какую бы мы тему ни взяли для своего сайта, в любом случае хочется её немного поправить на свой вкус, ибо вариации “по умолчанию” не всегда удовлетворяют пытливого администратора.

 

 

Как уже многие знают, форма комментирования привязывается к страницам сайта такой, на первый взгляд, простенькой функцией (подробности по ссылкам ниже):

 

…функция для отработки в шаблоне вызывается в документе (в файле) строчкой: comment_form(); после вызова – форма комментирования будет выведена на экран.

 

 

Сама же функция расположена в ядре шаблона по пути: ваш_домен/wp-includes в папке ищем файл comment-template.php а в этом файле требуемый кусок кода: можно вбить в поиск по файлу имя comment_form

 

 

 

 

 

 

А пока узнаем несколько полезных форменных примеров:

 

…в вариантах будем использовать так называемые фильтры.

 

 

 

 

как изменить стиль формы комментария в WordPress

 

 

 

 

Это селекторы CSS формы комментирования WP (по умолчанию). Они везде одинаковые (за исключением каких-то очень кастомных шаблонов)…

 

Как понимаете, если вдруг нам захочется изменить визуальный дизайн формы, то только и потребуется что изменить значения данных селекторов (каждый селектор отвечает за конкретный элемент).

 

 

 

#respond { }
#reply-title { }
#cancel-comment-reply-link { }
#commentform { }
#author { }
#email { }
#url { }
#comment
#submit - кнопка Отправить комментарий
.comment-notes { }
.required { }
.comment-form-author { }
.comment-form-email { }
.comment-form-url { }
.comment-form-comment { }
.comment-form-cookies-consent { }
.form-allowed-tags { }
.form-submit { }

 

 

 

 

как изменить форму (дизайн) кнопки Отправить комментарий

 

 

 

 

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

 

 

 

#submit {
background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
background-color:#44c767;
-moz-border-radius:28px;
-webkit-border-radius:28px;
border-radius:28px;
border:1px solid #18ab29;
display:inline-block;
cursor:pointer;
color:#ffffff;
font-family:Arial;
font-size:17px;
padding:16px 31px;
text-decoration:none;
text-shadow:0px 1px 0px #2f6627;
}

#submit:hover {
background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
background-color:#5cbf2a;
}
#submit:active {
position:relative;
top:1px;
}

 

 

 

После прописки значений CSS, так будет выглядеть НОВАЯ кнопка “Отправить комментарий” в оригинальной WordPress теме Twenty Sixteen:

 

 

 

 

 

 

 

 

К сведению:

 

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

 

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

 

Плагин для скачивания и установки доступен  в репозитории вордпресс WordPress.org.

 

Описание плагина ats privacy policy на этой странице – далее по ссылкам: плагин имеет понятные настройки! управление из админки.

К тому же, для пытливых, плагин возможно сделать своими руками – как? описано в статье Как добавить чекбокс политики конфиденциальности к форме комментирования.?. privacy policy.

 

 

примерно так будет выглядеть работаа плагина – то есть выведенный посредством него чекбокс:

 

 

 

 

 

 

 

 

 

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

 

 

 

 

В итоге: получится примерно так:

 

 

 

 

 

 

Добавьте следующие варианты кодов в файл functions.php активной темы:

 

 

add_filter('comment_form_defaults', 'sixteen_comment_text_before');
function sixteen_comment_text_before($arg) {
$arg['comment_notes_before'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='https://имя_домена.com/comment-policy-page/'>правилами комментирования</a>.</p>";
return $arg;
}

 

 

CSS для элемента “Правил комментирования” может выглядеть примерно так:

 

 

p.comment-policy {
border: 1px solid #ffd499;
background-color: #fff4e5;
border-radius: 5px;
padding: 10px;
margin: 10px 0px 10px 0px;
font-size: small;
font-style: italic;
}

 

 

 

Если вдруг нам потребуется отображать ссылку “правил комментирования” после текстовой области комментария, тогда используйте такой вариант кода:

 

 

add_filter('comment_form_defaults', 'sixteen_comment_text_after');
function sixteen_comment_text_after($arg) {
$arg['comment_notes_after'] = "<p class='comment-policy'>We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href='https://имя_домена.com/comment-policy-page/'>правилами комментирования</a>.</p>";
return $arg;
}

 

 

 

Естественно !! неплохо бы изменить язык текста в строчках кода.

 

 

Например, было так: “We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our”.

 

 

…стало так: “Мы рады, что вы решили оставить свой комментарий. Пожалуйста, имейте в виду, что комментарии модерируются в соответствии с нашими”.

 

…таким же образом измените (если требуется) ИМЯ ссылки на страницу правил…

 

 

 

 

как переместить текстовое поле комментария в самый конец формы

 

 

 

 

В обновлении WordPress 4.4 было внесено такое изменение: теперь по умолчанию в форме комментирования WordPress ПЕРВЫМ отображается область ввода текста комментария, а уж затем поле для имени комментатора, адрес электронной почты и поле для добавления веб-сайта комментатора.

 

Это изменение для многих пользователей не пришлось по вкусу (непривычно как-то, говорят товарищи.!.))

 

Всё это дело – порядок вывода элементов формы комментирования – легко поправить, то есть чтобы сначала отображались поля имени… электронной почты и веб-сайта… а уж затем – текстовое поле.

 

 

…добавьте следующий код в файл функций активной темы.

 

 

 

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

 

 

…как только код будет прописан, текстовое поле переместится вниз формы – после полей ввода данных пользователя.

 

 

 

 

 

 

 

 

как удалить поле URL из формы комментирования

 

 

 

 

Если поле для ввода сайта (url) комментатора кажется вам лишнем, то это поле запросто убрать таким способом:

 

…пропишите в плагин или файл функций следующий ниже код. (как сделать собственный плагин, описано в этой статье… а также расписаны все преимущества вспомогательных плагина, или файла функций)!

 

 

 

add_filter('comment_form_default_fields', 'sixteen_remove_comment_url');
function sixteen_remove_comment_url($arg) {
$arg['url'] = '';
return $arg;
}