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

Часто на страницах блогов или информационных порталов можно увидеть всплывающие подсказки при наведении на какое-нибудь слово или словосочетание. Безусловно, это полезно для читателя, так как дает возможность более детально уточнить какой-нибудь термин или дату события.

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

WordPress не имеет стандартных средств для создания таких подсказок. Поэтому воспользуемся сторонними решениями.

Плагин Responsive Mobile-Friendly Tooltip

Во-первых, плагин Responsive Mobile-Friendly Tooltip необходимо установить и активировать. Особенностью дополнения является работа “из коробки”, не вынуждая пользователя проводить какие-либо настройки. Далее следует открыть на редактирование страницу или запись.

Страница редактирования записи

Видно, что на панели инструментов визуального редактора WordPress добавилась кнопка в виде зеленого кружка. Для вставки подсказки следует поставить курсор в место ожидаемой подсказки и нажать эту кнопку.

Всплывающее окно плагина Responsive Mobile-Friendly Tooltip

Во всплывающем окне следует задать всего два значения. В поле The tip нужно ввести текст самой подсказки, а в The base text – текст в статье, при наведении на который будет появляться всплывающая подсказка. После заполнения обоих полей необходимо нажать кнопку Add tip.

Всплывающее окно плагина Responsive Mobile-Friendly Tooltip

В итоге в контентную часть записи будет вставлен специальный шорткод с Вашей подсказкой.

Страница редактирования записи

Для сохранения изменений нужно нажать кнопку Обновить. Подсказка вставлена, и теперь можно смотреть на сайте.

Страница записи на сайте

Плагин My PopUp


Расширение My PopUp

Сделать более заметные всплывающие подсказки помогает расширение My PopUp. В отличие от рассмотренного выше плагина, здесь возникает всплывающее окно с информацией при заданном вебмастером сценарии.

Это может быть:

  • Определенное время с момента загрузки страницы.
  • Прокрутка пользователем контента на заданный процент или до некого элемента.
  • Отсутствие активности со стороны посетителя сайта.
  • Попытка закрыть вкладку браузера.
  • Клик на конкретный элемент.

В My PopUp сценарии всплывающих элементов легко таргетируются на отдельную страницу (запись, товар и другие типы контента). 

Рассмотрим способ создать всплывающую подсказку, которая отобразится при клике на слово «Акция» в тексте и выведет информационное сообщение с промокодом на покупку.

  1. После установки My PopUp в админке появится соответствующий пункт — нажмите на него и выберите «Добавить новый».

Создание всплывающего окна в My Popup

  1. На вкладке «Основные настройки» определите место для появление всплывающей подсказки. Также выберите устройства для показа и задайте базовые параметры.

Настройки подсказки

  1. Перейдите в раздел «Внешний вид» и настройте дизайн.

Указание опций внешнего вида всплывашки

  1. В пункте «Контент» укажите текст. Тут же можно добавить некоторые элементы: таймер обратного отсчета, форма для заполнения, кнопки, соцсети и прочее.

Задание контента для подсказки

  1. Теперь остается определить сценарий появления окна на вкладке «Правила вывода».  Активируем переключатель «Показать по клику на элементе» и добавляем идентификатор. Например, mypopup-open.

Правила вывода My Popup

  1. Опубликуйте всплывающую подсказку, после чего добавьте нужный идентификатор (через class) к элементу в материале, где требуется ее вывод.

Подсказка при клике на элемент

Добавить класс можно ссылке, кнопке, изображению или другому элементу на странице.

  1. Ниже пример созданной подсказки, которая будет появляться при нажатии на слово «Акция» в заданном материале.

Всплывающий элемент про акцию при клике на ссылку

Создавать всплывающее окно не всегда обязательно с нуля. В My Popup на вкладке «Пресеты» предусмотрено несколько десятков готовых шаблонов. Также созданные «всплывашки» можно экспортировать и импортировать для переноса между сайтами.

My PopUp — действительно мощный и полезный инструмент. Приведу несколько вариантов его использования:

  • Уточнение терминов, дат и других моментов в материале.
  • Информирование о проходящих акциях в магазине.
  • Вывод сообщения о сборе Cookie.
  • Применение рекомендательных технологий.
  • Предложение для посетителей оставить контактные данные или связаться с оператором в чате.
  • Реклама социальных сетей, отдельных материалов (или товаров) на сайте, других проектов.

Модуль My PopUp разработан российской командой WPShop. Кнопка ниже даст скидку на покупку. Расширение полностью на русском, не нагружает сайт при работе и имеет подробную документацию.

Промокод на My PopUp

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

Если Вам понравилась статья — поделитесь с друзьями
Михаил Петров
Привет! Меня зовут Михаил Петров. Я копирайтер и занимаюсь этим с 2013 года. Скрупулезность и ответственность - моя фишка! Не могу делать как попало и добиваюсь, чтоб заказчик сказал минимум “неплохо”. За все время своей работы пришлось написать и отредактировать немало разной “текстовухи”, включая SEO-тексты, отзывы и прочую чушь. На сегодняшний день специализируюсь на написании информационных статей и руководств технического направления. Вижу смысл и светлое будущее в текстах для людей, а не для машин.
Обсуждение: 3
  1. Роман

    Здравствуйте, подскажите, а как индексируются эти подсказки?

  2. Олег

    Здравствуйте. А картинку добавить к подсказкам?

    1. Ольга

      Картинки, иконки, фоновые изображения можно добавить, если использовать для подсказок плагин My Popup.

Задать вопрос