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

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

Зачем показывать всплывающие подсказки на страницах сайтов

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

Когда подсказки могут пригодиться вебмастеру:

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

Вариантов использования множество, но важно учитывать несколько общих правил при добавлении таких объектов на сайт:

• Они должны хорошо работать на любом устройстве.
• Их необходимо вставлять только там, где это уместно, не нужно перегружать ими материал.
• Пользователь должен интуитивно понимать, что нажатие (наведение) на элемент приведет к появлению подсказки.
• Следует продумать удобство скрытия компонента.
• Если присутствует анимация появления, то она должна быть минималистичной.

Лучшие плагины для добавления подсказок в WordPress

В WordPress есть несколько специализированных плагинов, созданных специально для вывода подсказок. Имеются и более функциональные расширения, где всплывашки — лишь одна из функций. Расскажу про несколько лучших разработок данного сегмента.

My Popup

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

С помощью My Popup легко вывести всплывающие элементы любого типа. Приведу пример, как сделать подсказку, которая расшифрует в тексте аббревиатуру:

1. После установки и активации расширения, откройте панель администратора сайта и перейдите «My Popup» — «Добавить попап».

2. Задайте имя всплывающему элементу, как это делается для любой записи или страницы. Оно нужно, чтобы ориентироваться в админке среди всех созданных попапов.

3. В разделе «Основные настройки» укажите параметры, где и как должно выводиться окно.

4. В пункте «Внешний вид» задаются стили для фона, подложки, кнопки закрытия и других компонентов. Там же можно указать иконку или изображение для фона.

5. Во вкладке «Контент» задается текст, который будет выводиться в подсказке.

6. В «Правилах вывода» включите попап и активируйте переключатель «Показать по клику на элементе». Укажите в поле требуемый класс. Также определите страницы, где будет выводиться объект, если это требуется.

7. Теперь опубликуйте созданный popup и перейдите к компоненту в записи, на странице или в другом месте на сайте, которому необходимо добавить подсказку. Пропишите для него тот класс, который был определен для элемента.

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

Выше я рассмотрел лишь один из вариантов использования My Popup. С ним легко создать эффектные акции, вывести уведомление о сборе cookie, «поймать» посетителя сайта при попытке выхода со страницы и сделать многое другое. В руках умелого вебмастера инструмент отлично себя показывает с точки зрения улучшения поведенческих факторов на сайте и повышения конверсии.

MyPopup со скидкой

WordPress Tooltips

Расширение WordPress Tooltips можно установить из репозитория. Оно создано для добавления всплывающих подсказок, а также позволяет вывести глоссарий на сайте.

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

В бесплатной версии функциональность WordPress Tooltips существенно ограничена, а премиум обойдется в $25 за 1 домен.

Responsive Mobile-Friendly Tooltip

Плагин Responsive Mobile-Friendly Tooltip является одним из старейших для вывода подсказок на сайтах WP. Его первая версия вышла в 2015 году, после чего он получил несколько обновлений и перестал развиваться.

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

Кнопка для добавления подсказки появляется прямо в редакторе WordPress. Также есть вариант использования шорткода.

Glossary

Расширение Glossary создано для интеграции словаря терминов на сайт. Но в нем также есть встроенная функция всплывающих подсказок.

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

Настройки Glossary простые. Вебмастеру достаточно определить тип записей для вывода тултипов и задать стиль для них. Широкой кастомизации внешнего вида не предусмотрено — указывается только цвет текста и фона.

У Glossary имеется платная версия с более широким набором настроек за $29,99 в год.

Как вывести подсказки вручную без плагина

Тултипы легко создать вручную, используя CSS и HTML. В самом простом виде такие подсказки представляют собой просто всплывающий текст при наведении на определенный объект. Соответственно, чтобы это реализовать, достаточно ввести отдельный класс для стилизации текста с подсказкой и применить атрибут data-tooltip для его вывода.

Используйте следующий HTML-код для создания в тексте статьи или в любом другом месте объект со всплывающим тултипом:

<span class="tooltip" data-tooltip="Это текст подсказки">термин</span>

Теперь остается стилизовать элемент. Пропишите указанный ниже код в файле css-стилей сайта.

.tooltip {
  position: relative;
  cursor: pointer;
  color: #0073e6; 
  text-decoration: underline;
}
.tooltip:hover {
  color: #005bb5; 
  text-decoration: none;
}
.tooltip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: white;
  padding: 5px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease-in-out;
  visibility: hidden;
}
.tooltip:hover::after {
  opacity: 1;
  visibility: visible;
}

Теперь при наведении на текст с классом “tooltip” будет появляться информация, которая задана в атрибуте “data-tooltip”.

Итоги

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

Скидка на My Popup

Если же требуется добавить всего пару текстовых подсказок, то использовать для этого расширения необязательно. Подобное легко реализовать на HTML+CSS при наличии небольших навыков в программировании.