Как добавить интерактивные точки на изображение в WordPress

0
1238

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

Мы уже установили WordPress на хостинг https://s-host.com.ua и можем приступать непосредственно к рассмотрению плагина.

Установка плагина

Перейдите на страницу «Консоль»/»Плагины»/»Добавить новый» и найдите плагин ImageLinks. Установите, а затем активируйте его. Теперь в консоли появился пункт ImageLinks. Отметим, что поскольку речь идет об изображениях, важно, чтобы они не “перегружали” хостинг и не замедляли загрузку старниц; поэтому обязательно воспользуйтесь любым удобным инструментом сжатия картинок.

Добавление интерактивных точек на изображение

Кликните на кнопку «Консоль»/ImageLinks/Add New, чтобы перейти к созданию интерактивного изображения. В первую очередь заполните поле “Введите заголовок”:

Обратите внимание на блог справа Using this ImageLinks: шорткод, представленный в нем понадобится для вставки интерактивного изображения в запись.

Прокрутите страницу и вы увидите кнопку Set Image. Нажмите ее, чтобы добавить изображение:

  • выберите файл (вкладка “Библиотека файлов”) или загрузите изображение (вкладка “Загрузить файлы”);

  • кликните на нужное изображение;

  • нажмите кнопку “Выбрать”.

Теперь картинка загружена и можно переходить к “нанесению” интерактивных точек:

  • откройте вкладку Hotspots;

  • кликните на иконку “+”, чтобы добавить новую точку:

Теперь на картинке появилась точка Hotspot1. Перетащите ее мышкой в нужное место на картинке, в затем кликните на пункт “+” напротив пункта Hotspot Setting:

  • добавьте изображение для точки (или же будет использован значок темы);

  • добавьте ссылку на страницу, на которую попадет пользователь, кликнув на интерактивную точку;

  • выставьте On в поле Open Link in New Window, если хотите, чтобы ссылка открывалась в новом окне:

Ниже представлен еще один блок настроек — Popover Setting, в котором настраиваются подсказки, всплывающие при наведении на интерактивную точку:

  • выставьте On в поле Show Popover;

  • впишите подсказку в поле Popover Content:

  • выберите формат размещения подсказки в поле Popover Placement;

  • задайте ширину подсказки (px):

Завершив настройки на вкладке Hotspot, перейдите на вкладку General, чтобы разобраться с остальными возможностями:

  • в поле Image Url указан “адрес” картинки;

  • в поле Image Size выбирается размер изображения (кликните на FIXED SIZE, чтобы появились поля Width и Height):

  • в поле Theme доступен выбор тем: Dark и Dots;

  • в поле Mobile Animation можно активировать анимацию точек на мобильных устройствах;

  • в поле Popover Settings настраивается внешний вид интерактивных точек:

Кликните на кнопку Preview, чтобы увидеть, как будет выглядеть изображение после нанесения интерактивных точек:

Вывод изображения на сайт

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

 

 


РЕКЛАМА