Стилизируем форму комментариев в WordPress. Эпизод 1

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

Изменяем внешний вид формы комментариев в WordPress

Каждая ваша страница сайта содержит стандартные WordPress классы css стилей. В большинстве тем WordPress существует шаблон под названием comments.php, который используется для вывода комментариев и непосредственно формы комментирования на страницах и записях блога. Форма комментариев WordPress генерируется с помощью функции

<?php comment_form(); ?>

По-умолчанию эта функция создает вашу форму комментирования с тремя текстовыми полями (Имя, Email и Сайт), а также текстовым полем для самого комментария и кнопкой Отправить. Вы легко можете изменить каждое из этих полей, просто изменив стандартные классы CSS. Ниже список стандартных CSS классов, которые WordPress добавляет к каждой форме комментирования.

#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 { } 
.form-allowed-tags { } 
.form-submit

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

Для начала сделаем подсветку активного поля формы. Подсветка текущего активного поля сделает вашу форму более «понятной» для пользователей с особыми потребностями, а также сделает ее более «живой».

#respond { 
background: #ececec;
padding:0 5px 0 5px;
}

/* Подсветка активного поля формы */

#respond input[type=text], textarea {
  -webkit-transition: all 0.30s ease-in-out;
  -moz-transition: all 0.30s ease-in-out;
  -ms-transition: all 0.30s ease-in-out;
  -o-transition: all 0.30s ease-in-out;
  outline: none;
  padding: 3px 0px 3px 3px;
  margin: 5px 1px 3px 0px;
  border: 1px solid #DDDDDD;
}
 
 
#respond input[type=text]:focus, textarea:focus {
  box-shadow: 0 0 5px rgba(81, 203, 238, 1);
  margin: 5px 1px 3px 0px;
  border: 1px solid rgba(81, 203, 238, 1);
}

Вот так будет выглядеть форма в теме Twenty Twelve:

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

#author { 
font-family: Lobster, "Lobster 1.4", "Droid Sans", Arial;
font-size: 16px;
color:#1d1d1d; 
letter-spacing:.1em;
} 

#url  { 
color: #21759b;
font-family: "Luicida Console", "Courier New", "Courier", monospace; 
} 

Обратите внимание на скриншоте ниже, что поле Имя, а конкретно шрифт в нем, отличается от остальных. Также текст в поле Сайт теперь голубого цвета.

Вы также можете изменить стиль кнопки Отправить для формы комментариев WordPress. Вместо стандартной кнопки, давайте применим ей градиент на CSS3 и box shadow.

#submit {
font-family: Arial;
color: #ffffff;
font-size: 20px;
padding: 10px;
text-decoration: none;
box-shadow: 0px 1px 3px #666666;
-webkit-box-shadow: 0px 1px 3px #666666;
-moz-box-shadow: 0px 1px 3px #666666;
text-shadow: 1px 1px 3px #666666;
background: -webkit-gradient(linear, 0 0, 0 100%, from(#006ad4), to(#003366));
background: -moz-linear-gradient(top, #006ad4, #003366);
} 

#submit:hover {
  background: -webkit-gradient(linear, 0 0, 0 100%, from(#003366), to(#006ad4));
  background: -moz-linear-gradient(top, #003366, #006ad4)
}

Продолжение статьи смотрите по ссылке Стилизируем форму комментариев в WordPress. Эпизод 2