Как создать подсказки с иконками в WordPress

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

Почему полезны подсказки с иконками в WordPress

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

Например, если на сайте есть иконка с корзиной, то подсказка с текстом «Добавить в корзину» и мини-иконкой корзины сразу даст понять пользователю ее функционал. Такой подход снижает количество ошибок и ускоряет взаимодействие с сайтом.

Для реализации подсказок с иконками можно использовать как готовые плагины, так и писать собственный код с использованием HTML, CSS и JavaScript.

Использование плагина WPTooltip для создания подсказок с иконками

Один из популярных плагинов для создания подсказок — WPTooltip. Он позволяет легко добавлять кастомные всплывающие подсказки с поддержкой HTML, в том числе с иконками.

Для добавления иконки в подсказку достаточно использовать HTML внутри шорткода подсказки, например:

[tooltip content="<img src='https://example.com/icon.png' style='width:16px;vertical-align:middle;'> Это корзина"]<i class="dashicons dashicons-cart"></i>[/tooltip]

Плагин позволяет настраивать стиль подсказок, позицию, анимацию и задержку появления.

Для использования SVG-иконок можно вставлять их прямо в HTML подсказки или подключать через CSS background.

Создание кастомных подсказок с иконками на чистом коде

HTML и CSS для подсказок с иконками

Если вы хотите обойтись без плагинов, можно реализовать подсказки с иконками с помощью CSS и HTML. Вот простой пример:

<style>
.wpicons-tooltip {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.wpicons-tooltip .wpicons-tooltiptext {
  visibility: hidden;
  width: 180px;
  background-color: #333;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  padding: 8px;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -90px;
  opacity: 0;
  transition: opacity 0.3s;
}
.wpicons-tooltip:hover .wpicons-tooltiptext {
  visibility: visible;
  opacity: 1;
}
.wpicons-tooltip .wpicons-tooltiptext img {
  width: 16px;
  vertical-align: middle;
  margin-right: 8px;
}
</style>

<span class="wpicons-tooltip">
  <i class="dashicons dashicons-info"></i>
  <span class="wpicons-tooltiptext">
    <img src="https://example.com/icon-info.svg" alt="info icon" />Информация о разделе
  </span>
</span>

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

Добавление подсказок с иконками через PHP-функцию wpicons_tooltip()

Чтобы упростить добавление подсказок в шаблонах темы, создадим PHP-функцию:

function wpicons_tooltip($icon_class, $tooltip_text, $icon_url = '') {
    $icon_img = $icon_url ? '<img src="' . esc_url($icon_url) . '" style="width:16px;vertical-align:middle;margin-right:6px;"/>' : '';
    return '<span class="wpicons-tooltip"><i class="' . esc_attr($icon_class) . '"></i><span class="wpicons-tooltiptext">' . $icon_img . esc_html($tooltip_text) . '</span></span>';
}

Использовать функцию в шаблоне можно так:

echo wpicons_tooltip('dashicons dashicons-visibility', 'Просмотр записи', 'https://example.com/view-icon.svg');

Функция генерирует HTML с иконкой и подсказкой, которую можно стилизовать CSS из предыдущего примера.

Интеграция с плагином Clearfy Pro для улучшения производительности подсказок

Если вы используете множество иконок и подсказок, важно оптимизировать загрузку ресурсов и минимизировать скрипты. Плагин Clearfy Pro поможет отключить ненужные скрипты, оптимизировать загрузку CSS и JS, что ускорит работу подсказок и всего сайта.

Советы по улучшению UX подсказок с иконками

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

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