seoweb.in.ua

personal blog about seo & web

20.02.12

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

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

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

Наверняка вам попадались такие формы комментариев или обратной связи, где после заполнения данных и нажатия «отправить» выводилось сообщение об ошибке, но при возвращении к форме заполненное вами содержимое полей формы очищалось? Это очень нервирует пользователей и значительно ухудшает их мнение о сайте.
Валидация формы 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) будет выглядеть так:

расширенный микроформатами сниппет

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

© 2015, Seoweb.in.ua.

Share in Livejournal

"Форма комментариев wordpress: используем HTML5 и микроформаты" published in Blog, Sites, marked as CSS3 HTML HTML5 microformats Wordpress комментарии .

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

  1. Дмитрий
    on
    @ 17:34: 

    А можно ли вообще как то уникально сделать, конечно надо еще придумать как расположить строчки и тд, ну было бы очень приметно для пользователей

  2. Seoweb.in.ua
    on
    @ 21:10: 

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

  3. OksKuts
    on
    @ 18:41: 

    Выглядит привлекательно.
    А я вот не могу добиться, чтобы после нажатия кнопки ответить на экран выводилось сообщение о том, что Коммент пользователя обрабатывается…:(

  4. Seoweb.in.ua
    on
    @ 23:44: 

    А в comments.php предусмотрен вывод этого сообщения? Также, м.б. сообщение и выводиться, но визуально его не видно из-за стилей.

  5. Юрий
    on
    @ 13:20: 

    На голый html не поставлю, правда?

  6. Seoweb.in.ua
    on
    @ 19:49: 

    Разве что оформление можно будет применить к уже работающей форме.

Leave a Reply

Копирование разрешено только с прямой индексируемой гиперссылкой!

© 2009-2015 seoweb.in.ua. All Rights Reserved.

navigation