Форма коментарів 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) виглядатиме так:

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