Как сделать всплывающую форму в WordPress



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

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

Плагин Popup Maker

В настоящее время большей популярностью пользуется плагин Popup Maker из за простоты его использования. Есть также и платная версия у этого плагина.

Плагин можно скачать по ссылке https://wordpress.org/plugins/popup-maker или в консоли сайта wordpress — в разделе плагинов. Popup Maker надежно работает с 3.6 версией wordpress, но версии до 4.8.4 также совместимы.

Создание и настройка нового окна

После установки Popup Maker, в административной панели появляется раздел, где можно создать всплывающее окно и настроить его. Для создания нового всплывающего окна, после активации плагина, нужно перейти по меню Add Popup раздела Popup Maker

popmaker-01

Здесь необходимо ввести следующие данные:

popmaker-02

  1. название всплывающего окна (пользователю не видно);
  2. заглавие всплывающего окна;
  3. текст, изображение, медиафайлы для отображения в окне;
  4. выбор страниц для всплывающих окон;
  5. размеры и место показа окна;
  6. при необходимости устанавливаем флажок для прозрачности окна;
  7.  скорость анимации и ее вид;
  8. тут необходимо указать идентификаторы элементов сайта, которые, при клике на них, откроют всплывающее окно. Эта настройка требует некоторых знаний CSS, и она будет рассмотрена чуть позже;
  9. настройка CSS свойства z-index. Оставляем как есть;
  10. настройка закрытия всплывающего окна — закрытие окна клавишами Esc, F4 или при нажатии мимо окна. Возможна любая их комбинация;
  11. автоматическое открытие всплывающего окна. Не следует злоупотреблять этой возможностью, т. к. многих посетителей это сильно раздражает;
  12. настройки внешнего вида окна. Они интуитивно ясны, и можно настроить по своему усмотрению.

После всех настроек нужно нажать на кнопку «Опубликовать».

Настройка открытия всплывающего окна

Когда создается новое всплывающее окно, то ему назначается два класса — уникальные идентификаторы окна. В html коде элемента, клик на который должен инициировать открытие всплывающего окна, в качестве CSS класса нужно указать один из этих идентификаторов. Идентификаторы всех созданных всплывающих окон можно посмотреть тут: Popup Maker -> All Popups. В коде элемента можно указать любой из идентификаторов соответствующего окна.

Ниже приведены html коды для ссылки, кнопки и изображения. В качестве класса будет использован идентификатор всплывающего окна Test Popup «popmake-500»:

<a href="#" class="popmake-500">Текст ссылки</a>

<button class="popmake-500">Текст кнопки</button>

<img src="imagename" class="popmake-500" />

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



Обратите внимание на следующие статьи...

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

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