Форма комментариев wordpress: используем HTML5 и микроформаты

Известно, что с появлением стандарта HTML5 CSS3 появилось много новых возможностей для улучшения внешнего вида сайта, улучшения его функциональности, оптимизации кода. Кроме того, не так давно появились и микроформаты (микроданные, RDFa) которые позволяют улучшить видимость вашего сайта в поиске как Google так и Яндекса. Сегодня я опишу, как я изменил стандартную форму комментариев wordpress с использованием возможностей HTML5 CSS3 и микроформатов.

Валидация формы комментариев wordpress с помощью HTML5

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

Раньше валидация формы делалась возможностями jquery или javascript, но с появлением HTML5 эту проблему можно решить без лишних скриптов, сообщая браузеру о требуемом содержимом полей. Пока не все браузеры используют такие возможности, однако в последних версиях Opera и Mozilla Firefox это работает.

Итак, для использования валидации нашей формы нам понадобятся атрибуты required и placeholder, а так же type параметры email и url.

Атрибутом required помечается то поле, которое обязательно для заполнения. Placeholder позволяет вставить текст в не заполненное поле и убрать его при наведении фокуса. Параметры email и url позволят указать браузеру нужный нам формат вводимых данных.

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

<p><input required type=”text” name=”author” id=”author” value=”<?php echo $comment_author; ?>” size=”22″ tabindex=”1″ />
<label for=”author”>Name</label></p>

<p><input required type=”email” name=”email” id=”email” value=”<?php echo $comment_author_email; ?>” size=”22″ tabindex=”2″ />
<label for=”email”>E-Mail </label></p>

<p><input type=”url” placeholder=”http://yoursite.com” name=”url” id=”url” value=”<?php echo $comment_author_url; ?>” size=”22″ tabindex=”3″ />
<label for=”url”>Your site </label></p>
</p>

 

Улучшение внешнего вида формы с помощью CSS3

Здесь используем элементы box-shadow и border-radius. Первый нам позволит добавить к полям формы красивые тени. Второй сделает для нашей формы закругленные углы.

Код для добавления в каскадные таблицы стиля (style.css):

input, textarea { 
box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px; 
border-radius: 5px; }

 

Добавляем микроформаты к комментариям

Здесь используем микроформаты для разметки отдельных отзывов. Для этого обрамляем код вывода комментариев тегами:

<span itemscope itemtype=”http://data-vocabulary.org/Review”>
<!– здесь вывод комментариев –>
</span>

 

Далее обрамляем нужные элементы (название поста, автор коммента, дата):

 <span itemprop=”itemreviewed”><?php the_title(); ?></span>
<span itemprop=”reviewer”><?php comment_author_link() ?></span>
<time itemprop=”dtreviewed”><?php comment_date(‘Y-m-d’) ?></time>

 

В выдаче расширенный сниппет (rich snippet) будет выглядеть так:

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