Главная - Без рубрики - Как создать подсказки в форме комментариев с помощью jQuery

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

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

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

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

ДЕМО

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

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

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

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

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

  • wp-comment-tooltips.php
  • wp-tooltips.css
  • wp-tooltips.js
[/list]

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

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

[slh lang=»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’] = ‘

‘ .

‘;
$fields[‘author’] = ‘

‘ .
‘ .
( $req ? ‘*‘ : » ) .

‘;
return $fields;
}
add_filter(‘comment_form_default_fields’,’alter_comment_form_fields’);
?>
[/slh]

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

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

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

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

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

[slh lang=»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);
[/slh]

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

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

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

[slh lang=»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;
}
[/slh]

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

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

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

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

Загрузить

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

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

О admin

1 комментарий

Оставить комментарий

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

*