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

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

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

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

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

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

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

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

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

Для создания этих файлов используйте обычный текстовый редактор, например, Блокнот. После создания файлов вам нужно открыть wpb-comment-tooltip.php в текстовом редакторе. Скопируйте и вставьте этот код в файл:

 // Измените поля формы комментариев и добавьте атрибут title к полям ввода формы function alter_comment_form_fields($fields)< $fields['email'] = '

' . __( 'Email', 'twentythirteen' ) . ' ' . ( $req ? '

'; $fields['url'] = '

' . __( 'Website', 'twentythirteen' ) . '' . '

'; $fields['author'] = '

' . __( 'Name', 'twentythirteen' ) . ' ' . ( $req ? '

'; return $fields; > add_filter('comment_form_default_fields','alter_comment_form_fields'); ?>

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

Мы также убедимся, что эти файлы загружаются только при отображении формы комментария. После этого мы изменили стандартную форму комментариев и добавили атрибут title в поля ввода. Этот атрибут title содержит сообщение, которое мы хотим отобразить во всплывающей подсказке. Например, в поле author мы использовали:

title=»Пожалуйста, используйте ваше настоящее имя, без ключевых слов.»

Теперь, когда вы создали файл плагина, пришло время добавить немного jQuery. Открыть wpb-tooltip.js файл и добавьте в него этот код:

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

В этом коде #commentform является селектором, в котором jQuery будет отображать всплывающие подсказки и .tooltip — это часть контента, где мы определили позицию для всплывающих подсказок.

Осталось добавить немного CSS в wpb-tooltip.css-файл. Просто скопируйте и вставьте этот код:

.ui-tooltip, .стрелка:после < 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; >.стрелка < width: 70px; height: 16px; overflow: hidden; position: absolute; left: 50%; margin-left: -35px; bottom: -16px; >.стрелка.вверху < top: -16px; bottom: auto; >.стрелка.слева < 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); >.стрелка.верх:после

Не стесняйтесь изменять этот CSS файл в соответствии с вашими потребностями.

Вот и все. Теперь вы успешно создали плагин, который добавляет всплывающие подсказки jQuery в форму комментариев WordPress. Все, что вам нужно сделать, это загрузить папку wpb-comment-tooltips с вашего рабочего стола в каталог /wp-content/plugins/ на вашем веб-сервере с помощью FTP-клиента, например Filezilla. После того, как вы загрузили плагин, перейдите по адресу Плагины страницу в админзоне WordPress и активируйте плагин.

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий