Добавляем всплывающие подсказки на jQuery к форме комментирования. Часть 1

Комментарии позволяют пользователям «откликаться» на контент на вашем сайте. Именно поэтому мы считаем, что очень важно стилизировать вашу форму комментариев на блоге, что, во-первых, очень удобно для пользователей, а также очень приятно выглядит. Недавно один из читателей спрашивал, можно ли добавить всплывающие подсказки на jQuery к форме комментирования в WordPress. Мы подумали, что и остальным это будет интересно. И именно об этом мы расскажем в сегодняшней статье.

Зачем нужны всплывающие подсказки на jQuery?

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

Добавляя jQuery tooltips, вы повышаете юзабилити сайта и его внешний вид.

Добавляем всплывающие подсказки на jQuery

Первым делом нам нужно создать папку на вашем компьютере и назвать ее wpb-comment-tooltips. Внутри этой папки создайте следующие три файла:

• devise-comment-tooltips.php
• devise-tooltip.css
• devise-tooltip.js

Используйте текстовый редактор типа Notepad++ или Sublime Text для этих целей. После создания файлов откройте devise-comment-tooltip.php в редакторе. Скопируйте и вставьте следующий код в файл:

<?php
/** 
Plugin Name: Devise Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by Devise
Version: 1.0
Author: Devise
Author URI: http://web-devise.com
License: GPL2
*/

// Подгружаем наши скрипты и стили, только когда форма отображается на странице

add_action( 'comment_form_before', 'devise_comment_tooltips' );

function devise_comment_tooltips() { 
wp_enqueue_script('devise-tooltip-jquery', plugins_url('/devise-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('devise-tooltip-css', plugins_url('/devise-tooltip.css', __FILE__), false, null);
}

// Модифицируем поля формы комментариев и добавляем атрибуты заголовков к полям ввода формы
 
function alter_comment_form_fields($fields){
    $fields['email'] =  '<p class="comment-form-email"><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="email" title="Ваш электронный адрес не будет передан третьим лицам, можете не беспокоиться!" name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
      '" size="30"' . $aria_req . ' /></p>';  
    $fields['url'] = '<p class="comment-form-url"><label for="url">' .
      __( 'Website', 'twentythirteen' ) . '</label>' .
      '<input id="url" name="url" title="Ваш сайт или любой профиль социальной сети" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
      '" size="30" /></p>';  
      $fields['author'] = '<p class="comment-form-author">' .
      '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="author" title="Пожалуйста, указывайте свое реально имя, а не ключевые слова." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
      '" size="30"' . $aria_req . ' /></p>';
    return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>

В коде выше сначала мы создали заголовок плагина, задали ему имя и описание. Затем мы загрузили наши файлы JavaScript и CSS (смотрите нашу статью Как правильно добавлять JavaScript и стили в WordPress).

Также мы убедились, что эти файлы загружаются только когда отображается форма комментирования. Далее мы модифицировали стандартную форму комментариев и добавили атрибут заголовка к полям ввода. Этот атрибут содержит сообщение, которое и будет отображаться во всплывашке. Например, в поле Автор мы использовали:

title="Пожалуйста, указывайте свое реально имя, а не ключевые слова."

Продолжение статьи смотрите по ссылке Добавляем всплывающие подсказки на jQuery к форме комментирования. Часть 2