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


обновлено: 2024-02-13 в теме: Контент, шапка site
Запросто с WordPress создание и продвижение сайтов ATs media

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

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

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

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


 

 

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

 

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

 

 

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

 

 

 

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

 

1 – перенесём код в файлы своего шаблона. 2 –  зададим функции своё уникальное имя…

 

Таким образом, получится как бы собственная форма комментирования – не зависящая ни от каких обновлений движка Вордпресс, и с которой вы  сможете делать всё что захочется. Очень удобно..

 

 

 

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

 

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

 

 

 

 

как изменить стиль формы комментария в 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:

 

 

 

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;
}

 

 

 

как убрать поле url

 

 

 

 

 

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

 

 

 


...вопросы в комментариях - помогу, в чём дюжу...
mihalica.ru !


Михаил ATs - владелец блога запросто с Вордпресс - в сети нтернет давным-давно...

...веб разработчик студии ATs media: помогу в создании, раскрутке, развитии и целенаправленном сопровождении твоего ресурса в сети... - заказы, вопросы... разработка...





Нажатия на кнопочки определяют Ваше высокое гражданское сознание

Поделитесь соображениями: Ваши мысли очень важны!

Внимание! Обязательные поля помечены *

  отныне доступен плагин: ats privacy policy ©


  1. о пользе и вреде комментариев

    читать по ссылке

    //webmee.ru/pljusy-i-minusy-kommentariev-k-postam-wordpress/

    Ответить - Дмитрий

  2. очень полезная информация, спасибо
    www.irmaseo.ru

    Ответить - irmaseo