Модальные окна в WordPress, плагин Easy Modal Lite

Здравствуйте уважаемые читатели  XoZblogа. Сегодня я расскажу Вам о модальных (pop-up)  окнах в WordPress, а если быть более точным о реализации модальных окон в WordPress. У Вас наверняка возникал вопрос: “А как разместить  определенный контент (текст, изображение, видео, внешний файл или даже сторонний плагин) в модальных окнах?”. Да все очень просто, в этом нам поможет плагин Easy Modal Lite.

Этот плагин позволяет легко создавать неограниченное количество модальных окон (Теперь плагин распространяется платно, однако есть бесплатная версия с ограничениями все подробности на странице автора — ссылка ниже) с любым содержанием, и выводить их в любом месте сайта, где захочется. Он также работает с shortcode (короткими кодами) и был протестирован для работы с Contact Form 7, работающей на технологии Ajax.

И так, приступим. Получить плагин можно на странице автора, рассказать о нем в Facebook или Twitter, и только после этого скачать!

Устанавливаем, активируем плагин и переходим на страницу настройки.

Easy modal lite активируем

Здесь нам сразу предлагают создать новое модальное окно, жмем Add New.

Создаем новое модальное окно

На следующем этапе, необходимо ввести уникальное имя в поле Name, которое понадобится нам, при создании ссылки, открывающей  модальное окно, класс eModal eModal- является классом по-умолчанию, его трогать не стоит, при создании нового окна класс меняется автоматически, в нашем случае класс eModal eModal-1 .  Также указываем заголовок (он будет непосредственно отображаться в самом модальном окне), и конечно вставляем наш контент, в приведенном примере я вставляю код видео с Youtube. Жмем Save Settings, происходит сохранение настроек, после чего можно  по ссылке Back to Modal Lists вернуться к списку всех созданных модальных окон.

Настраиваем модальное окно

Теперь можно настроить внешний вид модальных окон. Заходим на страницу Black Theme, пункт меню Theme. Здесь много различных настроек, таких как: фон (цвет, прозрачность), размера шрифта, цвет шрифта и др. не забываем сохранять изменения!

Настройка внешнего вида модальных окон

Ну и последнее. Осталось только вывести созданное модальное окно на сайте! Здесь все очень просто. Заходим в редактор записи, выделяем текст, по щелчку на который будет появляться всплывающее окно, и присваиваем ему только что созданный класс. Для этого выделяем текст нажимаем кнопку Стили и в выпадающем списке находим только что созданное модальное окно, оно имеет название eModalVideo. Вот и все! Ах да, не забудьте включить параметр “показывать дополнительную панель” (если он у Вас выключен), в редакторе WordPress, иначе Вы не уведите кнопку Стили. Сохраняем запись и смотрим, что же у нас получилось.

Ссылка на модальное окно в статье

Зашел в статью, кликнул Смотреть видео. И вот результат:

Демонстрация Easy Modal Lite

На этом думаю, стоит заканчивать. Внешний вид ссылки оставляет желать лучшего, выглядит как обычный текст, так что если есть желание, поколдуйте в стилях css немного и настройте ссылку так, как Вам нравится. Еще раз скажу, что в данные модальные окна можно вставить, не только видео, но html код, внешний файл, shortcode плагина и многое другое.

Спасибо за прочтение! Не забывайте оставлять комментарии к статье!

Чтобы оставаться в курсе свежих статей и уроков подписывайтесь на еженедельную почтовую рассылку или на новостную ленту RSS. Спасибо!

  • mouse

    Скажите а в это модальное окошко можно картину добавить, если да то как?

    • Дмитрий Кочетов

      Конечно можно! достаточно вставить обычный тег изображения <img src=ссылка на изображение> в поле текста (ContentModal content. Can contain shortcodes.) модального окна!

  • Артур

    не могу вставить текст в окно модальное. ошибка кодировки. что может быть?

    • Дмитрий Кочетов

      Артур, попробуйте добавить в Ваш .htaccess файл строку
      AddDefaultCharset UTF-8
      Должно помочь!

  • Владислав

    Спасибо за плагин! А ещё больше мне понравилось как лихо Вы заставляете твитнуть!!!

  • Dartwlad

    Добрый день! У вас есть версия плагина, что на скриншотах? Просто ту версию, что сейчас распространяют бесплатно нельзя вставить в запись или настроить. Если у вас есть эта «Lite» версия, можете кинуть её на скачивание?

  • Joe1989

    У меня почему-то не создается гиперссылки, когда я выставляю этот стиль, соответственно, при сохранении ничео не происходит..

    • А вы ручками не пробовали? Попробуйте как-нибудь так Кнопка (только пробелы не забудьте убрать)

  • У меня та самая проблема… 
    Кнопка так тоже пробовал, и ничего не получается…
    Возможно в этом плагине есть какая-то хитрость?

    • Здравствуйте! Какой версией плагина вы пользуетесь? просто с 1.0.2 были подобные проблемы! версия 1.0.4 работает вроде

  • Ya

    Привет! Подскажи, как добавить поддержку кирилицы? А то получается вот так:

    • Здравствуйте, попробуйте добавить в Ваш .htaccess файл строку
      AddDefaultCharset UTF-8
      если такого файла нет, то создайте его в корне сайта.