Добро пожаловать, друзья!

Всплывающее окно для WordPress

Всплывающее окно для WordPressВсем огромный привет! Это снова я, с полезным постом - всплывающее окно для WordPress - для начинающих и не только пользователей WordPress. Если вас интересует плагин всплывающего окна WordPress, его ещё называют плагин модального окна, то вы, друзья, попали точно по назначению.

Плагин, который я представлю чуть ниже, вы можете использовать для: Contact Form 7 в модальном окне; любая контактная форма (обратной связи) в модальном (всплывающем) окне; видео в модальном окне; картинки во всплывающем окне; размещение полезной информации с ссылками; форма подписки по почте на новые статьи в модальном окне и так далее, и так далее всего, и не перечислишь. Плагин совсем простой, без сложных настроек и почти не создающий дополнительную нагрузку на ваш блог/сайт.

Плагин Easy Modal - всплывающее/модальное окно для WordPress

Easy Modal
Плагин модального окна для WordPress - Easy Modal

Установить данный плагин можно стандартным способом, через админпанель - Плагины - Добавить новый и в поле Поиск плагинов вводите название Easy Modal, нажимаете Enter. В списке он должен быть первым. Устанавливаете и как обычно активируете его. А дальше можно переходить к созданию нового модального окна.

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

Для этого нажмите на новый появившейся раздел Easy Modal и выберите пункт Modals:

Easy Modal
Easy Modal - создание нового модального окна

После этого, в самом вверху страницы нажмите кнопку Add New:

Easy Modal
Добавить новое окно

А здесь, всё просто:

Настройка плагина Easy Modal
Создание всплывающего окна с видео

В общих настройках (вкладка General) даёте имя нового окна (отображаться оно не будет, это для вас, если например, вы создадите несколько модальных окон); тип загрузки Load Sitewide (для всего сайта); заголовок окна и наконец вставляете в редактор (режим Текст) нужный вам код. У меня в примере вставлен код видео с YouTube.

Далее, на вкладке Display Options:

Параметры модального окна
Настройка модального окна

В параметрах можно выбрать размер окна; использовать фон или нет; тип анимации для модального/всплывающего окна; расположение окна, а также можно окно зафиксировать (поставить галочку и указать отступ от верха экрана).

На вкладке Examples вы найдёте примеры кода для вывода всплывающего окна в WordPress:

Вывод модального окна
Код вывода модального окна в WordPress

Тут можно выбрать простую текстовую ссылку, кнопку или иконку. Обратите внимание, что к каждому вновь созданному окну присваивается класс eModal - . Первое созданное окно будет иметь класс eModal - 1 второе eModal - 2 и так далее. Вам нужно только самому подставлять номер после знака - . Этот код можно вставлять в виджет Текст или в любом месте вашей статьи. Естественно, текст в коде вы можете написать любой. Да чуть не забыл, что после создания модального окна справа на странице не забудьте нажать кнопку Опубликовать (Publish).

Код модального окна с видео я вставил в сайдбаре в виде кнопки:

Модальное окно
Кнопка на боковой панели блога

Посетитель нажимает на неё и открывается окошко с видео:

Модальное окно WordPress
Модальное окно с видео

Надеюсь, друзья и товарищи, общий принцип работы с плагином Easy Modal вам понятен. Только лишь добавлю, что вы можете потом или сразу для модального окошка оформить внешний вид, нажав пункт Theme. К сожалению, в бесплатной версии плагина есть только одна тема для оформления, но её вы можете оформить как угодно, настроек достаточно. При настройке внешнего вида модального окна тут же вы можете видеть справа предпросмотр оформления:

Оформления модального окна
Редактирование темы - оформления модального/всплывающего окна

После всех настроек внешнего вида окна нажимайте кнопку справа Save (Сохранить). И напоследок, дамы и господа, покажу пример вывода контактной формы Contact Form 7 в модальном окне.

Contact Form 7 в всплывающем окне

Создайте новое модальное окно, как показано выше и в текстовый редактор просто вставьте шорткод Contact Form 7 (если у вас установлен этот плагин, если нет, установите):

Contact Form 7 в всплывающем окне
Создания Contact Form 7 в всплывающем окне

Нажмите кнопку Опубликовать (Publish) и вам остаётся только разместить код (про класс не забывайте) в нужном вам месте (в сайдбаре, в сообщениях, в футере блога, в меню). Пример, кнопка Написать автору после сообщения:

Кнопка написать автору
Кнопка написать автору после сообщения

Если читатель захочет связаться с вами, то он нажмёт кнопку и контактная форма откроется в модальном окне:

Контактная форма Contact Form 7
Форма для связи с автором в модальном окне

Вот, как то, так. Ещё, все ваши созданные всплывающие окна будут отображаться на странице (пункт Modals), где кстати, указаны классы для каждого модального окошка:

WordPress модальные окна
Созданные модальные окна на WordPress

Вот пожалуй и всё, о чём я хотел с вами сегодня поделиться. Надеюсь вам было полезно. Удачи всем и до новых встреч, на страницах лучшего блога в мире WordPress mania.

Комментарии

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

  • Здравствуйте! Как код вывода сформированного модального окна можно вывести в стандартном меню wordpress? Т.е. при нажатии на кнопку «контакты» в горизонтальном меню вместо перехода на страницу «контакты» происходило всплытие модального окна.

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

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

Решите задачку: *