Рейтинг@Mail.ru

WordPress-блог

Терпенье и труд...

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

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

Интерактивное изображение – это картинка, на которой есть несколько активных областей, клик по которым (или наведение мышки), вызывает какое-либо событие, например, переход на ссылку или вывод сообщения подсказки.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

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

Итак, скачайте и установите на свой сайт плагин ImageLinks Lite. Скачать плагин можно по ссылке ниже.

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

Перейдите в пункт консоли «ImageLinks», который появился после активации плагина, а затем в подпункт «Add new». Введите в верхнем поле какое-либо название для вашего интерактивного фото.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Прокрутите немного вниз и нажмите на кнопку «Set Image».

Интерактивное изображение на WordPress и плагин ImageLinks Lite

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

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Теперь давайте сделаем из этой картинки интерактивное изображение. Для этого перейдите ниже предпросмотра во вкладку «Hotspots» и нажмите на иконку с плюсом, чтобы добавить новую интерактивную точку на изображении.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Затем верните к предпросмотру. Вы увидите, что вверху слева появилась точка.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Хватайте её мышкой и двигайте в то место картинки, где должна быть первая интерактивная точка.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

После этого снова перейдите к опциям под предпросмотром, чтобы задать параметры для точки. Здесь вам нужен раздел «Hotspot Settings». Откройте его и заполните поле «Link URL», в котором нужно указать ссылку, на которую будет происходить переход при клике на эту точку на интерактивном изображении. При необходимости можно включить опцию «Open Link in New Window», чтобы ссылка открывалась в новой вкладке.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Теперь обратите внимание на блок настроек «Popover Settings». Здесь можно задать подсказку, которая будет появляться при наведении мышки на интерактивную точку. Для начала включите опцию «Show Popover». А затем ниже в редакторе заполните содержимое подсказки.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Теперь верните к предпросмотру и нажмите на кнопку «Preview», чтобы увидеть, как это будет выглядеть на практике.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

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

Интерактивное изображение на WordPress и плагин ImageLinks Lite

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

Интерактивное изображение на WordPress и плагин ImageLinks Lite

На картинку можно добавить любое количество точек.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Когда все точки добавлены, нажмите кнопку «Опубликовать», что бы сохранить изменения, и используйте шорткод для публикации этого интерактивного изображения на сайте,  в записях и страницах.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Настройки плагина ImageLinks Lite

Теперь, когда вы знаете в общих чертах как сделать интерактивное изображение, я рассмотрю другие настройки и возможности плагина. Как вы могли заметить, все опции делятся на две вкладки «Generals» и «Hotspots». Начну с разделов первой вкладки:

  • Image Url. Указывается ссылка на интерактивное изображение. Можно указать картинку и из другого источника, а не с вашего сайта.
  • Image Size. Размер картинки.
  • Можно выбрать тему оформления для подсказок точек.
  • Mobile Animation. Включает и выключает анимацию точек на мобильных устройствах.
  • Popover Settings. Настройки внешнего вида подсказок на точках.
  • Custom CSS. Здесь можно подключить кастомный стиль.

Во вкладке «Hotspots» собраны опции для каждой из точек. Сбоку с левой стороны располагается список созданных точек с кнопками для операций над ними – добавить, удалить, скопировать и переместить.

Интерактивное изображение на WordPress и плагин ImageLinks Lite

Выделив ту ил иную точку, можно её настроить. Есть такие разделы опций:

  • Hotspot Location. Показывает координаты точки и их можно задать вручную более точно.
  • Hotspot Settings. Здесь можно установить своё изображение для точки, ссылки, придать точке свой CSS класс и HTML контент.
  • Popover Settings. Здесь опции подсказки. Они состоят из кнопки для включения и редактора текста.
УжасноПлохоНормальноХорошоОтлично (3 оценок, среднее: 5,00 из 5)

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

 

WordPress-блог © 2015-2017