Скрипт приветственного окна на главной странице вордпресс. Как в WordPress создать модальное (всплывающее) окно. Ninja Popup – любимчик среди других плагинов для генерации попапов

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

Некоторые пользователи могут ненавидеть и игнорировать всплывающие окна, но это не делает их менее эффективными. А при правильной настройке они будут успешно работать.

Но все же не стоит добавлять их сразу же на главной странице сайта и раздражать постоянных пользователей навязчивыми уведомлениями. Тем более, после того, как они уже однажды нажали на кнопку Закрыть.

Опыт использования подобных плагинов некоторыми владельцами сайтов на других ресурсах подтверждает, что количество подписчиков, к примеру, на e-mail рассылку может увеличиться на 500%.

Плагин WordPress Popup

Если говорить о WordPress, то вам крупно повезло. Плагин всплывающих окон Popups доступен в бесплатной версии и может помочь вам существенно увеличить количество подписчиков, например, в социальных сетях. Доступна также и премиум-версия этого попап-плагина, в случае, если вам понадобятся дополнительные функции.

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

После загрузки и активации плагина появится новый раздел меню под названием «Popups », где, собственно, и настраиваются нужные вам всплывающие окна для вашего сайта. В разделе «All Popups » (Все всплывающие окна) есть демо-версия, которую можно начинать настраивать. Всплывающее окно загружается в визуальном редакторе, что позволяет вам отредактировать заголовок текста и добавить любой контент в тело:

Там вы найдете и шорткоды для отображения кнопок социальных сетей для Facebook, Google и Twitter. Внизу указаны параметры для этих шорткодов, так что вы можете добавить URL и другие параметры в кнопку:

Под параметрами шорткода находится бокс «Popup Display Rules » (Правила отображения всплывающих окон). В нем вы выбираете место на сайте, где должно появляться всплывающее окно - конкретная страница, тип поста, прочее.

И, наконец, есть бокс «Display Options » (Параметры отображения), в котором настраиваются все параметры внешнего вида всплывающих окон - призывы к действию, триггеры, анимации, фоновый цвет, наложение непрозрачности, цвет границы, прочее:

После настройки параметров нажмите на «Publish » (Публиковать), а затем на «View Post » (Просмотреть пост), и вы увидите, как работает всплывающее окно:

Функции плагина

Плагин довольно мощный и содержит полезный набор функций, как например:

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

Доступные настройки

Выбор из пяти возможных местоположений всплывающего окна
Триггеры-окна, всплывающие после N–го количества секунд пребывания пользователя на сайте или % скроллинга страницы
Автоисчезновение всплывающего окна при возвращении пользователя вверх страницы
Изменение цвета шрифта, фона, границ, прочее
Настройка непрозрачности фона
Суточный интервал в появлениях всплывающего окна

Премиум версия плагина содержит намного больше функций, доступных за $15 для одного сайта. Среди них:

8 новых анимационных эффектов
Новые методы использования триггера
Таймер для автоисчезновения окна
Возможность отключения кнопки закрытия окна
Возможность отключения любых других способов закрытия окна, как например, нажатие вне области всплывающего окна
Премиум поддержка

Заключение

Итак, мы рассмотрели отличный бесплатный плагин для установки всплывающих окон на вашем сайте на WordPress. Он включает огромное количество функций для настройки окон нужным вам образом, в зависимости от поставленных вами целей. Также плагин доступен и в платной премиум версии всего за $15, но для многих пользователей будет достаточно и бесплатных возможностей.

Недавно для одного сайта меня попросили сделать форму обратной связи для 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 кода, во всплывающем окне можно показывать видео, формы и т.п. В общем, полезный плагин. Если будут вопросы по нему, пишите в комментариях.

То можно узнать, что всплывающим окном (англ. 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.

Прочитав статью, вы с легкостью сможете использовать функционал плагина в собственных интересах на своем сайте.

Два отличных плагина, чтобы сделать всплывающее окно в 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 вот по этой ссылке, которая расположена ниже.