То можно узнать, что всплывающим окном (англ. pop-up) называется окно, открываемое на экране компьютера в результате выполнения какой-либо операции.
В данной статье мы рассмотрим вопрос создания всплывающих PopUP окон для WordPress.
Подобного рода всплывающие окна можно использовать для разных целей: можно вставить в данное окно форму подписки, какое-то информационное сообщение, картинку, контактную форму и т.д.
В качестве средства создания всплывающих окон в данной статье я буду рассматривать специальный плагин для WordPress под названием WordPress PopUp .
Плагин WordPress PopUp для создания всплывающих окон
Данный плагин доступен в каталоге плагинов прямо в админке WordPress, поэтому установить его не составит труда.
Находим его через форму поиска и нажимаем Установить :
В меню админки станет доступен новый пункт PopUp :
В данном пункте доступны настройки плагина и управление его функционалом. Рассмотрим все перечисленное подробнее.
В подпункте PopUps пункта PopUp доступны все существующие всплывающие окна и управление ими. Так как пока ни одного окна не создано, пункт пустой:
Исправим данное положение дел и создадим наше первое всплывающее окно, для этого идем в подпункт Add New и нажимаем одноименную кнопку:
Новое окно создано. Давайте сразу определимся, каким будет содержимое данного окна, пусть это будет, к примеру, форма подписки.
Настройку созданного всплывающего окна начнем с прописывания его названия, а точнее некоего идентификатора, по которому мы будем находить данное окно среди прочих, при условии наличия таковых.
Данный идентификатор прописывается в графе PopUp Name (not displayed on the PopUp) , и, как не сложно догадаться из названия данной графы при переводе на русский язык, в самом всплывающем окне не отображается:
Данные заголовок и подзаголовок будут отображаться в самом верху всплывающего окна.
Чуть ниже, в области под названием Main PopUp Content нужно разместить основное содержимое нашего всплывающего окна. Так как я решил разместить в данном окне форму подписки, то в данной области в режиме текстового редактора я прописываю именно код формы подписки:
Здесь же, чуть правее, в разделе PopUp Feature Image (optional) можно реализовать вставку во всплывающее окно каких-либо изображений:
Я изображение вставлять не буду.
Чуть ниже, в разделе Call To Action Button (optional) предоставляется возможность добавления в создаваемое окно кнопки с призывом к какому-либо действию:
Сделать подобную кнопку крайне просто — нужно прописать название кнопки в графе Button Label , а в графе Button Link разместить ссылку, активирующую требуемое действие.
Осталось определить некоторые параметры создаваемого PopUp окна. Рассмотрим их подробнее.
Настройка параметров всплывающих окон
На самом деле в бесплатной версии плагина доступны не все настройки, и поскольку далеко не каждый пользователь захочет тратить собственные деньги на платную версию плагина, то мы первым делом рассмотрим основные настройки, доступные именно в бесплатной версии плагина.
Начнем по порядку с раздела Appearance :
Буквальный перевод названия данного пункта означает «появление». Не трудно догадаться, что настройки в данном разделе определяют свойства появления всплывающего окна.
Из доступных для бесплатной версии плагина здесь есть лишь чекбокс No rounded corners , галочка в котором активирует прямые, а не скругленные, как по умолчанию, углы настраиваемого окна, а также возможность ручного определения размеров настраиваемого окна в пункте Use custom size (галочка в соответствующем чекбоксе дает возможность прописать ширину и высоту окна в пикселах).
Теперь рассмотрим раздел Behavior , настройки в котором определяют поведение всплывающего окна:
Из доступных для бесплатной версии плагина настроек здесь имеются следующие:
- When to show the PopUp: — время (в секундах или минутах по выбору) с момента открытия страницы сайта до появления всплывающего окна;
- «Never see this message again» settings: — настройки, позволяющие посетителю нажатием специальной кнопки запретить показ всплывающего окна в дальнейшем при открытии страниц данного ресурса. Здесь доступен лишь чекбокс Add «Never see this message again» link , галочка в котором активирует появление ссылки с анкором Never see this message again , переход по которой блокирует в дальнейшем показ данному пользователю всплывающего окна на страницах данного ресурса.
Переходим к рассмотрению раздела настроек Displaying Conditions (optional) , отвечающего за условия отображения настраиваемого всплывающего окна:
Здесь присутствует значительное количество пунктов, разберем их по порядку:
- Visitor is logged in — отображение всплывающего окна пользователям, прошедшим аутентификацию на сайте (при условии наличия такой возможности);
- Visitor is not logged in — отображение всплывающего окна не аутентифицированным на сайте пользователям;
- PopUp shown less than — отображение всплывающего окна до тех пор, пока пользователь не увидит его определенное количество раз (задается в графе Display PopUp this often: );
- Only on mobile devices — отображение всплывающего окна только для посетителей с мобильных устройств;
- Not on mobile devices — отображение всплывающего окна только для посетителей с компьютера или ноутбука (не с мобильных устройств);
- From a specific referrer — отображение всплывающего окна в том случае, если пользователь пришел с помощью специального реферера
- Not from a specific referrer — скрытие всплывающего окна в том случае, если пользователь пришел с помощью специального реферера (рефереры задаются здесь же);
- Not from an internal link — всплывающее окно не будет отображаться в том случае, если пользователь пришел по внутренней ссылке с другой страницы этого же ресурса;
- From a search engine — отображение всплывающего окна для посетителей, перешедших на сайт с поисковых систем;
- On specific URL — отображение всплывающего окна для посетителей, находящихся на определенных URL Full URLs ;
- Not on specific URL — отображение всплывающего окна для посетителей, за исключением находящихся на определенных URL , перечень которых задается здесь же в графе Full URLs ;
- Visitor has commented before — отображение всплывающего окна пользователям, оставлявшим комментарии на сайте. Данное условие можно объединить с условием Visitor is logged in или Visitor is not logged in ;
- Visitor has never commented — отображение всплывающего окна пользователям, не оставлявшим комментариев на сайте. Данное условие можно объединить с условием Visitor is logged in или Visitor is not logged in .
Все настройки, доступные для бесплатной версии плагина, мы рассмотрели, теперь кратко пробежимся по настройкам, доступным только для платной версии плагина WordPress PopUp :
Вот такие бонусы несет в себе платная версия рассматриваемого плагина, которая, к слову, предлагается за 19$.
Когда вы произвели все необходимые действия по созданию и настройке всплывающего окна, необходимо сохранить полученный результат (кнопка Save ) и посмотреть, что получилось, используя предварительный просмотр (кнопка Preview PopUp ):
Если результат вас устраивает, то можно активировать всплывающее окно (ползунок Status перевести в положение Activ ).
В конечном итоге после всех перечисленных действий мной был получен следующий результат:
Получился довольно объемный обзор плагина WordPress PopUp , позволяющего создавать всплывающие окна для интернет-ресурсов на движке WordPress.
Прочитав статью, вы с легкостью сможете использовать функционал плагина в собственных интересах на своем сайте.
В данной статье мы познакомим вас с плагином «WP-MK», позволяющий создать выплывающее окно на своём сайте WordPress.
«WP-MK» достаточно прост в применении и так же, как и такой плагин как вызывать особого раздражения не будет у посетителей блога. Поскольку появляется данное всплывающее окно лишь после прокрутки страницы сайта до низа (можно настроить) и будет исчезать если посетитель пролистывает , также имеется кнопка для закрытия такого всплывающего окна. Окно, которое отображает плагин «WP-MK», направлено может быть для того, чтобы решить самые разные задачи.
Настройка плагина «WP-MK»
Для того, чтобы настроить плагин «WP-MK» необходимо перейти в раздел «Параметры» в административной панели WordPress, дальше пункт «Всплывающее окно» и таким образом попадаем в настройку плагина.
Страница настроек данного плагина имеет интерфейс на русском языке, и детальные пояснения к каждому пункту данного плагина давать нет никакого смысла, я считаю и так все ясно.
Клик для увеличения
Один пункт, который необходимо отметить — «Содержимое». В это поле можно вставить нужный html-код, к примеру, на своём блоге в данном всплывающем окне отображается на анонсы свежих статей посредством сервиса feedburner, так же возможна размещение кода формы от сервиса Smartresponder, ну, в общем, что отображать в этом окне решать только вам. Не нужно забывать после внесения, каких-либо модификаций в настройках данного плагина нажать на «сохранить» внизу страницы.
Вот данное и все настройки, которые имеет плагин «WP-MK», все достаточно просто. Надеюсь, что «WP-MK» заинтересует вас и окажется для вас достаточно полезным.
С уважением, Андрей Юрийчук
Модальные окна часто используются на сайтах для привлечения внимания пользователя к важным событиям или ознакомить с полезной информацией. В частности, это бонусы, бесплатный материал, подписка, «раздача лещей» и многое другое. Насколько такие меры эффективны и ненавязчивы, каждый рассматривает по-своему. Но несмотря на взвешивания за и против всплывающих окон, они применяются на ресурсах и довольно активно. Пропустим всю критику и перейдем к небольшой подборке из пяти плагинов модельных окон для WordPress.
Простое, адаптивное модальное окно с рядом самых необходимых настроек. Редактируется полное внешнее оформление, условия показа (даже по датам), запоминания куки, время всплытия, вставка видео, HTML кода, баннеров и прочее.
Открытие медиа-файлов в модальном окне при клике на веб-кнопку. Окно вставляется в запись через шорткод с определенными параметрами.
Очень простое всплывающее окно с несколько основными параметрами. Возможно указать ширину, высоту, цвет фона, а также доступен предварительный просмотр.
Всплывающее окно с возможностью добавления в него любого контента. Присутствуют настройки внешнего вида, запоминания куки, адаптивность и многое другое.
Два отличных плагина, чтобы сделать всплывающее окно в wordpress!
Здравствуйте, уважаемые читатели и гости моего блога! Сегодня Вам расскажу и покажу видеоурок, как сделать всплывающее окно в wordpress при помощи двух прекрасных плагинов. Эти плагины имеют очень хорошую репутацию, не грузят движок wordpress, легко настраиваются и один из них имеет русский интерфейс!
Ну а теперь все по порядку, о каждом из двух плагинов...
Читайте и смотрите видеоурок! Как сделать всплывающее окно в wordpress при помощи плагинов? И больше не спрашивайте!
Первый наш плагин делающий всплывающее окно в wordpress: Scroll Triggered Box
Что о нем можно сказать? Это хороший плагин. Прост в установке и настройке. Работа его стабильна и не влияет на скорость движка WordPress.
Установка Scroll Triggered Box
Входим во вкладку плагины в консоли, жмем добавить новый плагин, вставляем в поисковое поле его название "Scroll Triggered Box " и жмем «Enter». Все наш плагин нашелся! Далее жмем установить, активировать. То есть стандартная установка плагинов!
Настройка Scroll Triggered Box
- Theme: Выбора темы. Здесь четыре разноцветных темы. Подбираете какая вам понравиться и подходит по дизайну к вашему блогу.
- Testing: Ставите в этом чек боксе галочку и кроме Вас никто его не видит!
- Visible at: Настройка демонстраций всплывающего окна на страницах и в записях блога.
- Cookie lifetime: Настройка времени показа всплывающего окна на сайте.
- Show box at: Если поставите 50, то после прокрутки посетителем половины страницы окно всплывет. Если впишите «0», тогда окно будет показываться постоянно.
- Show box at element: Здесь пишите ключевое слово, которое будет сигнализировать о начале показа всплывающего окна. Например если пишите #comments , то окно всплывет на уровне комментариев и т. д.
- Include css: Отказ от CSS стилей установленных по умолчанию. Ниже можно установить свои стили, пройдя по ссылке.
- Box position: Этовыбор позиции всплывающего окна. Внизу, справа, слева, посередине. На ваше усмотрение.
- Box width: Изменениеширины всплывающего окна.
- Box html: Окно для вставки содержимого для всплывающего окна. Так же предусмотрена вставка HTML кода.
- Social buttons: Место для установки кнопок соцсетей.
Второй плагин WP-MK для установки всплывающего окна на WordPress
Плагин WP-MK на мой взгляд даже лучше, чем плагин Scroll Triggered Box , который мы рассмотрели выше. Он более функционален, его интерфейс настроек на русском языке в отличии от Scroll Triggered Box . Поэтому о настройках WP-MK вряд ли стоит подробно расписывать. Я думаю не составит труда посмотреть и разобраться вам самим.
Установка плагина WP-MK стандартная и затруднений не вызовет.
А вот найти его стандартным способом в поиске плагинов в консоли WordPress вам не удастся.
Вы можете скачать бесплатно плагин WP-MK вот по этой ссылке, которая расположена ниже.
Недавно для одного сайта меня попросили сделать форму обратной связи для WordPress в модальном окне. То есть при клике по ссылке «напишите нам» вместо перехода на соответствующую страницу пользователю должно открываться новое всплывающее окно, где и будет находится функция отправки сообщения. Это более интерактивное решение, хотя далеко не всем оно нравится. Я лично предпочитаю классическую реализацию со страницей контактов, однако формы на сайтах бывают разные — поэтому полезно будет рассмотреть решение данной задачи. В работе использовал 2 плагина: известный многим Contact Form 7 и модуль Easy Modal, чтобы сделать модальное окно в вордпресс.
Обновление 18.05.2017: Судя по последним отзывам в репозитории, в некоторых случаях могут наблюдаться проблемы с его работой. Если вас тоже это коснулось, попробуйте новое решение от разработчиков под названием Popup Maker . Еще в качестве альтернативы можно рассматривать .
Детально останавливаться на установке и настройке Contact Form 7 не буду, всю информацию о нем . В блоге также была статья про , что может пригодиться.
Перейдем сразу к модулю Easy Modal . Найдете его . Разработчики утверждают, что это лучшее решение создания модальных окон на сайте с разными инотересными возможностями для подачи контента.
Загрузок более 10 тысяч, оценка 4.6. Допустимые версии 3.4 — 4.0.8, хотя я успешно запустил его на WP 4.3.1. Не смотря на то, что сейчас плагин трансформировался в новое решение Popup Maker, на сайте wordpress.org и при поиске плагинов внутри админки все еще можно найти обычный Easy Modal версии 2.0.17. На его примере я и расскажу про создание модального окна обратной связи в WordPress.
После установки появится одноименный раздел, где есть несколько пунктов. Нам понадобится самый первый из них — Modals . Кликаете там по кнопке Add New.
Это действие создаст новое модальное окно для вашего вордпресс сайта. В настройках элемента будет 4 закладки:
- General — общие параметры.
- Display Options — опции отображения.
- Close Options — настройки закрытия окна (с помощью клика или кнопки Esc).
- Examples — примеры кода для использования.
Общие настройки содержат название окна (не отображается на сайте), его заголовок, контент и тип загрузки. В блоке контента, переключившись в HTML режим, добавляем шорткод своей формы обратной связи в модальном окне.
Тип загрузки Load Type имеет 2 варианта:
- Load Sitewide (для всего сайта).
- Per Page/Post (для конкретных постов и страниц).
Весьма интересная опция. Если вам нужно всплывающее окно, которое будет выводиться на всех страницах сайта (ссылка располагается в сайдбаре, например), то выбиваете первый вариант. Во втором случае на страницах/постах сайта при редактировании появится соответствующий блок настройки:
Вы сможете активировать и выбрать для той или иной страницы свое всплывающее окно. Если галочку в блоке не поставите, то на сайте элемент грузиться не будет.
Вторая закладка параметров модуля — Display Options (опции отображения) .
Здесь указываете:
- размер окна — автоматический, средний, адаптивный, маленький, большой и т.п.;
- подложку — можно использовать фон для формы или выводить ее без него;
- анимацию вывода всплывающего окна;
- позицию (расположение) — сверху по центру, справа снизу и т.п.; фиксированная или нет;
- отступ сверху экрана.
Примеры отображения вывода модального окна в вордпресс с помощью плагина Easy Modal найдете в последней вкладке.
Вставлять этот код нужно через виджет в сайдбаре или в текстовом редакторе. Он ничем не отличается о любого другого HTML кода, единственное, что здесь указан класс конкретного модального окна (eModal-1). Для, созданного вами, второго элемента класс будет eModal-2 и т.п. Дабы не совершить ошибку при вставке кода проще всего копировать его с данной страницы.
Редактирование темы оформления модального окна
В плагине Easy Modal кроме настроек для конкретного элемента вы можете определять темы оформления всплывающих окон (Theme). В базовой бесплатной версии модуля есть только один шаблон, но этого более чем хватает.
В данном инструменте 6 закладок:
- General — указываете название темы;
- Overlay — фон (тут можно выбрать цвет и прозрачность подложки формы);
- Container — разные настройки самого модального окна (отступы, рамка, тень);
- Title — параметры заголовка всплывающего окна (шрифт, тень);
- Content — шрифт и цвет текстов в блоке;
- Close — элемент закрытия формы (текст и оформление).
Как видите, внешний вид можно настраивать как угодно под ваши нужды. У меня получилось вот такая простенькая WordPress форма в модальном окне:
После установки всех настроек на забудьте их сохранить (кликаете по кнопке Save).
Видео добавления Contact Form 7 во всплывающем окне Easy Modal
Кстати, нашел видео по работе с плагином Easy Modal, демонстрирующее процесс создания в вордпресс модального окна обратной связи. Там интерфейс модуля слегка устаревший (некоторые настройки выглядят по другому), но общую суть получается уловить. Возможно, кому-то будет проще разобраться в данном вопросе с помощью видео.
Итого про модальные окна для wordpress
Как уже говорилось выше, сейчас плагин Easy Modal (судя по официальной странице) преобразовали в Popup Maker. В репозитории удалось найти одноименный модуль, но его я не тестировал. Рассказываю вам об этом дабы знали что искать, если вдруг Easy Modal в WordPress последующих версий перестанет работать.
Оба решения бесплатны, хотя и имеют платные дополнения (аддоны). Они позволяют настраивать таргетинг, добавлять больше тем оформления, содержат аналитику а также некоторые другие фишки. Если вам нужен более продвинутый механизм модальных окон, — можете рассмотреть детальнее эти расширения.
Что же касается задачи открытия формы обратной связи Contact Form 7 во всплывающем окне, то тут хватает базовых возможностей Easy Modal. Причем данное решение может использоваться и для вывода других модальных окон в вордпресс — полезных подсказок, дополнительной информации и т.п. Учитывая наличие редактора вставки HTML кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.