Как добавить всплывающую подсказку WordPress (2 способа: бесплатный плагин или CSS)
Бывают случаи, когда вам нужно предоставить пользователям вашего сайта больше информации, но на странице просто не хватает места. Вы всегда можете включить ссылки на другие страницы, но во многих случаях наиболее удобным подходом является добавление простой всплывающей подсказки WordPress, которая отображает всю необходимую пользователям информацию.
Благодаря всплывающей подсказке WordPress, также называемой всплывающей подсказкой CSS, вся необходимая посетителям информация находится прямо здесь, при наведении указателя мыши на нужный элемент.
В этой статье мы покажем вам некоторые из наших любимых примеров CSS-подсказок при наведении в действии. Затем мы научим вас, как добавлять их на свой сайт с плагинами и без них.
Давайте копаться!
Введение в всплывающие подсказки CSS при наведении
Концепция всплывающей подсказки WordPress проста. Это плавающие контейнеры, которые «всплывают», когда вы наводите курсор мыши на определенные элементы.
Обычно всплывающие подсказки при наведении предоставляют дополнительную информацию, которую вы не хотите включать в исходный дизайн.
Например, если вы создаете таблицу цен, всплывающие подсказки помогут вам разъяснить, что делает каждая функция, не утяжеляя дизайн:
Другие варианты использования включают определения слов, добавление источников к вашему контенту, редакционные комментарии, карты и практически любой другой элемент, который вы только можете придумать.
Два способа добавить всплывающую подсказку WordPress
WordPress позволяет вам использовать несколько подходов к добавлению всплывающих подсказок на ваш сайт. Вы можете сделать это вручную (что предполагает добавление кода) или используйте плагин.
Мы начнем с того, что покажем вам, как добавлять всплывающие подсказки с помощью бесплатного плагина всплывающих подсказок WordPress. Затем мы углубимся в ручной метод CSS.
1. Используйте плагин всплывающих подсказок WordPress.
Весь смысл использования плагинов заключается в том, чтобы сэкономить ваше время на добавлении функции вручную. Учитывая это, Shortcodes Ultimate предлагает одну из самых простых реализаций всплывающих подсказок для пользователей WordPress.
После включения плагина вы получаете доступ к десяткам коротких кодов, которые можно использовать для добавления чего угодно: от кнопок до ползунков, каруселей изображений, разделителей и т. д.
Всплывающие подсказки, конечно же, входят в список элементов, поддерживаемых Shortcodes Ultimate. Более того, каждый шорткод полностью настраивается с помощью встроенных настроек и CSS.
Чтобы начать, откройте редактор блоков для страницы, на которую вы хотите добавить свою первую всплывающую подсказку WordPress. Тогда ищите новый Вставить шорткод кнопка в любом существующем меню блока:
Сразу же вы увидите список доступных шорткодов. Выберите Подсказка вариант:
Теперь у вас есть возможность настроить стиль подсказки. Мы решили использовать базовый темный дизайн и расположить его поверх элемента, на который вы наводите указатель мыши:
Прокрутите вниз, пока не дойдете до Содержимое подсказки поле и введите текст, который вы хотите, чтобы элемент отображал:
Обратите внимание, что вы также можете настроить поведение всплывающей подсказки. Опция по умолчанию скрывает контейнер и текст, пока вы не наведете курсор мыши на его родительский элемент. Вы также можете настроить всплывающие подсказки так, чтобы они не отображались, пока вы не нажмете на родительский элемент, но это может создать проблемы для посетителей.
Вот как будет выглядеть ваш новый короткий код в редакторе блоков:
И если вы просмотрите это на интерфейсе, вот как работает всплывающая подсказка:
Имейте в виду, что вы можете добавлять всплывающие подсказки практически где угодно. вы хотите использовать правильный короткий код. Это касается обычного текста, таблиц, значков и других элементов.
Однако, как правило, вам нужно добавить какой-нибудь визуальный индикатор, чтобы пользователи знали, что им следует навести курсор мыши на родительский элемент. Подчеркивание или цветовые вариации работают хорошо. Вы также можете использовать информационный смайлик (ℹ️).
2. Настройте всплывающие подсказки CSS при наведении вручную.
В предыдущем разделе мы говорили о том, как добавить всплывающие подсказки при наведении с помощью плагина. Плагин по сути настраивает для вас несколько стилей CSS. Это означает, что вы выбираете настройки из списка, и плагин генерирует необходимый шорткод.
Однако нет причин, по которым вы не могли бы сделать это вручную с помощью кода. Самый простой способ добавить новые классы CSS в вашу тему — использовать настройщик WordPress.
Чтобы получить доступ к настройщику, перейдите к Внешний вид > Темы с панели управления и найдите Дополнительный CSS вкладка внизу левого меню:
Затем добавьте в свою тему три класса CSS:
- Один для контейнера подсказок
- Еще для текста
- Последний, чтобы скрыть все
Вот базовый пример того, как может выглядеть код:
.tooltip-box { позиция: относительная; отображение: встроенный блок; } .tooltip-box .tooltip-text { видимость: скрыто; ширина: 100 пикселей; цвет фона: черный; цвет: #fff; выравнивание текста: по центру; отступ: 6 пикселей 0; позиция: абсолютная; z-индекс: 1; } .tooltip-box:hover .tooltip-text { видимость: видимая; }
В двух словах, этот код генерирует пустой контейнер и устанавливает его положение относительно родительского элемента. Затем к тексту, который вы хотите включить, добавляются некоторые стили, такие как отступы, выравнивание, цвет и общая ширина. Наконец, контейнер остается скрытым до тех пор, пока вы не наведете курсор на родительский элемент.
Сохранив этот пользовательский CSS в своей теме, вы сможете вызывать всплывающие подсказки с любой страницы вашего веб-сайта. Для этого откройте редактор блоков для страницы, на которую вы хотите добавить всплывающую подсказку.
Выберите блок, в который вы хотите добавить свою первую всплывающую подсказку, и перейдите к Редактировать как HTML вариант:
Теперь добавьте элемент div, содержащий родительский текст для вашей всплывающей подсказки и информацию, которую вы хотите, чтобы она содержала:
Обязательно добавьте CSS-класс Tooltip-text в свой div. Это класс CSS, который вы добавили в свою тему с помощью настройщика. Если вы установили другое имя для своего класса, измените его.
Вот как выглядит наша всплывающая подсказка в редакторе:
Если вы сохраните изменения на своей странице и перейдете на внешний интерфейс, вы увидите изменения:
Как только вы наведете курсор мыши на родительский текст, появится всплывающая подсказка:
Вот и все!
Помните, что вы можете стилизовать всплывающие подсказки при наведении CSS так же, как и другие элементы сайта. Это означает использование разных цветов, изменение контейнера и многое другое, чтобы все они соответствовали стилю вашего веб-сайта.
Для этого вам, возможно, придется изучить базовый CSS. Кодакадемия имеет хороший курс CSS.
Заключение
Добавление всплывающих подсказок WordPress на ваш сайт может помочь вам улучшить взаимодействие с пользователем, включив в него полезную информацию.
Когда дело доходит до добавления всплывающих подсказок CSS при наведении в WordPress, вы можете использовать два подхода:
- Используйте плагин всплывающих подсказок WordPress, который позаботится о настройке за вас.
- Настройте всплывающие подсказки CSS при наведении вручную с помощью настройщика.
Чтобы узнать о некоторых других способах создания более удобного для пользователя сайта WordPress, вы также можете ознакомиться с нашими руководствами по улучшению навигации WordPress и устранению беспорядка на вашем веб-сайте.
Есть ли у вас вопросы о том, как настроить всплывающие подсказки WordPress? Давайте рассмотрим их в разделе комментариев ниже!
Бесплатное руководство
4 основных шага для ускорения
Ваш сайт WordPress
Следуйте простым шагам из нашей мини-серии из 4 частей.
и сократите время загрузки на 50-80%. 🚀
