Как создать подсказки в форме комментариев с помощью jQuery

Примечание: Этот текст может содержать некоторые партнерские ссылки, а это значит, что я зарабатываю небольшую комиссию без каких-либо дополнительных затрат с вашей стороны, если вы воспользуетесь этими ссылками. Спасибо за понимание и поддержку.

Комментарии на вашем сайте позволяют вашим посетителям контактировать с вами, взаимодействовать с вашим контентом. Они читают ваши статьи, они читают оставленные комментарии, они хотят сами что-то написать в ответ на ваши записи или комментарии других посетителей.

Вот почему важно вам, как владельцу сайта, подумать — а все ли я сделал для того, чтобы моим читателям было удобно пользоваться формой комментариев?

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

ДЕМО

Зачем добавлять всплывающие подсказки ?

Подсказка появляется, когда посетитель перемещает курсор на поле формы, и как правило, предоставляет читателю дополнительное описание этого поля формы комментариев.

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

Как добавить всплывающие подсказки jQuery?

Нам нужно создать новую папку на Рабочем Столе компьютера и назвать ее wp-comment-tooltips. Внутри этой папки вам надо создать три новых файла:

  • wp-comment-tooltips.php
  • wp-tooltips.css
  • wp-tooltips.js

Советую использовать текстовый редактор Notepad++, который подсвечивает код и умеет работать со многими форматами файлов, включая вышеперечисленные.

После того, как вы создали файл wp-comment-tooltips.php, вам надо добавить в него следующий код:

< ?php
/**
Plugin Name: WP Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by Oldpepper
Version: 1.0
Author: Oldpepper
Author URI: https://bestplugins.ru
License: GPL2
*/

// Only load our scripts and style when a comment form is displayed

add_action ( 'comment_form_before', 'wp_comment_tooltips' );

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

// Modify comment form fields and add title attribute to form input fields
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" size="30" type="text" value="' . esc_attr( $commenter['comment_author_email'] ) . '" />';
$fields['url'] = '</p>
<p class="comment-form-url"><label for="url">' .
__ ( 'Веб-сайт', 'twentythirteen' ) . '</label>' .
'<input id="url" title="Укажите адрес своего сайта или социальный профиль." name="url" size="30" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) . '" /></p>
';
$fields['author'] = '
<p class="comment-form-author">' .
'<label for="author">' . __ ( 'Имя', 'twentythirteen' ) . '</label> ' .
( $req ? '<span class="required">*</span>' : '' ) .
'<input id="author" title="Напишите свое реальное имя." name="author" size="30" type="text" value="' . esc_attr( $commenter['comment_author'] ) . '" /></p>
';
return $fields;
}
add_filter ('comment_form_default_fields','alter_comment_form_fields');
?>

В приведенном выше коде PHP мы вставили заголовок будущего плагина, а также добавили код подключения файлов JS и CSS, которые сейчас будем создавать.

В коде есть также функция, которая включает работу плагина только тогда, когда загружается страница сайта с формой комментариев, а также немного изменили форму комментариев, добавив в нее атрибут 'title' в поле ввода.

Например, в поле author мы использовали фразу: 'Напишите свое реальное имя'.

Теперь, когда мы создали файл плагина, нам надо добавить немного кода для скрипта jQuery.

Откройте файл wp-tooltips.js и добавьте в него следующий код:

(function ($) {
$( «#commentform» ).tooltip ({ position: {
my: «center bottom-10»,
at: «center top»,
using: function ( position, feedback ) {
$( this ).css ( position );
$( "
< div >" )
.addClass ( «arrow» )
.addClass ( feedback.vertical )
.addClass ( feedback.horizontal )
.appendTo ( this );
} } });
})(jQuery);

Важно! В коде выше тег DIV стоит с пробелами с угловыми скобками. Пробелы нужно убрать!

В этом коде команда #commentform — это переключатель (селектор), где jQuery будет отображать подсказки.

Теперь нам надо создать свойства CSS. Откройте файл wp-tooltips.css и добавьте в него следующий код:

.ui-tooltip, .arrow:after {
background: #356aa0;
border: 2px solid white;
}
.ui-tooltip {
padding: 10px 20px;
color: white;
border-radius: 20px;
font: bold 14px «Helvetica Neue», Sans-Serif;
text-transform: uppercase;
box-shadow: 0 0 7px #356aa0;
max-width:350px;
}
.arrow {
width: 70px;
height: 16px;
overflow: hidden;
position: absolute;
left: 50%;
margin-left: -35px;
bottom: -16px;
}
.arrow.top {
top: -16px;
bottom: auto;
}
.arrow.left {
left: 20%;
}
.arrow:after {
content: "";
position: absolute;
left: 20px;
top: -20px;
width: 25px;
height: 25px;
box-shadow: 6px 5px 9px -9px #356aa0;
— webkit-transform: rotate (45deg);
— moz-transform: rotate (45deg);
— ms-transform: rotate (45deg);
— o-transform: rotate (45deg);
tranform: rotate (45deg);
}
.arrow.top:after {
bottom: -20px;
top: auto;
}

Не стесняйтесь изменить стили под свой дизайн сайта.

Вот и все. Вы успешно создали плагин, который добавит всплывающие подсказки jQuery для формы комментариев на вашем сайте.

Теперь вам надо загрузить этот плагин wp-comment-tooltips в папку сайта /wp-content/plugins/ и активировать его.

Если вдруг с течением времени код, представленный на этой странице, будет выглядеть не корректно или вообще перестанет отображаться, я выложил архив плагина ниже. Вы можете его скачать и загрузить на свой сайт уже готовым к работе. Не забудьте отредактировать файл стилей CSS для подгонки дизайна к своему.

Загрузить

Я надеюсь, эта статья помогла вам узнать как добавить всплывающие подсказки в форме комментариев.

Вы можете задавать свои вопросы в комментариях ниже.

Если материал вам понравился, нажмите или расскажите о нем друзьям!

Важно! Эта запись может содержать ссылки на плагины, которые к моменту вашего чтения и скачивания могут работать не корректно. Будьте внимательны.

0 Comments

Добавить комментарий

Ваш email нигде не будет показан. Обязательные поля помечены *