Как сделать всплывающее окно в wordpress

Как создать всплывающее (модальное) окно в WordPress

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

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

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

Создание всплывающих окон в WordPress

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

1. Установите и активируйте плагин Popup Maker.

2. После активации плагина перейдите в Pupup Maker -> Add New.

3. В открывшейся странице мы будем создавать модальное окно. Давайте пройдемся по пунктам настроек:

• 1) Указываем название модального окна. Это название пользователю видно не будет.
• 2) Заглавие модального окна.
• 3) Отмечаем галочкой страницы, на которых будем использовать всплывающее окно. Если указываем «On Entrie Site» — модальное окно можно использовать на всех страницах и записях сайта.
• 4) Наполнение всплывающего окна. Сюда пишем текст, вставляем изображения и т.п. В общем, делаем наполнение по желанию. В нашем примере я вставил фрейм видеозаписи с youtube.
• 5) Указываем размер модального окна. Размер можно указать как в процентах, так и в пикселях. Значение «Auto» — автоматически подбирает размер модального окна. В случае добавления видеозаписи это лучший вариант.

• 6) Отмечаем галочкой в том случае, если мы ходим чтобы после открытия модального окна мы видели на фоне сайт. Рекомендую отмечать.
• 7) Настройка скорости и типа анимации. Если вы не любители экспериментировать с анимациями, то можно оставлять все по умолчанию.
• 8) Настройка позиционирования. По умолчанию модальное окно будет появляться вверху по центру.
• 9) Вот тут уже поинтересней. В этом поле можно указать классы или идентификаторы элементов вашего сайта, при клике на которые будет открываться создаваемое вами модальное окно. Возможность очень крутая и полезная, но требующая некоторых знаний в CSS.
• 10) Настройка CSS свойства z-index. Обычно не нуждается в изменениях.

• 11) Настройки закрытия модального окна. Click Overlay to Close — закрытие модального окна при нажатии мимо него. Press ESC to Close — закрытие модального окна клавишей Esc. Press F4 to Close — закрытие клавишей F4. Я отмечаю все пункты, дабы не злить пользователей сайта и упростить возможность закрытия всплывающего окна ��
• 12) Настройки автоматического открытия модального окна. В нашем примере его использовать не будем.

4. После того как мы выполнили настройки, нажимаем кнопку «Опубликовать». Таким образом мы создали всплывающее (модальное) окно.

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

После создания всплывающего окна можно настроить его внешний вид. Для этого переходим в Popup Maker -> Theme.

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

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

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

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

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

Для того чтобы узнать class-идентификатор вашего модального окна переходим в Popup Maker -> All Popups.

На открывшейся странице мы видим два класса, которые являются идентификаторами созданного нами модального окна, в нашем примере это popmake-106 и popmake-primer-vsplyivayushhego-okna. Использовать можно любой из них.

Для того чтобы модальное окно работало, нужно добавить class-идентификатор в элемент, при нажатии на который мы ходим чтобы модальное окно появлялось. Ниже примеры добавления в ссылку, кнопку и изображение.

В примере будем использовать класс popmake-106.

Открытие модального окна при клике по ссылке:

Открытие модального окна при нажатии кнопки:

Открытие модального окна при клике по изображении:

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

Вот такое всплывающее окно в результате у нас получится:

Готово! Если у вас будут возникать вопросы или какие-либо проблемы при создании всплывающего окна — смело пишите в комментариях, постараюсь всем ответить и помочь.

Здравствуйте, друзья! В этом уроке мы поговорим о создании модальных окон в WordPress. Возможности применения у модальных окон очень разнообразные. Их используют как для обычного всплывающего сообщения на сайте, так и для множества других задач, к примеру для создания всплывающей формы регистрации, объявления, акции и т.п. В любом случае, главная задача модальных (всплывающих окон) — привлечь внимание пользователя. Также хочу сразу предупредить, что урок будет длинным. Не пугайтесь, все очень просто и делается достаточно быстро. Но для лучшего понимая я постараюсь хотя бы по пару слов написать по настройкам, которые вам смогут рано или поздно пригодиться. Создание всплывающих окон в WordPress И так,…

Обзор

Проголосуйте за урок

Оценка

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

Как вывести всплывающее окно на сайте в WordPress

Хочу реализовать всплывающее окно с контактами при наведении на номер телефона (т.е. ссылку), как на скриншоте. Пытаюсь выдрать код, но он не хочет запускаться. Может кто подсказать, как это реализовать на WordPress? При наведении на ссылку окно всплывает: А также сайт: https://www.oma.by/

Отслеживать
10.5k 7 7 золотых знаков 25 25 серебряных знаков 41 41 бронзовый знак
задан 20 июл 2017 в 8:46
BloodKnight BloodKnight
31 5 5 бронзовых знаков

2 ответа 2

Сортировка: Сброс на вариант по умолчанию

Это простой hover. Есть скрытый блок, в нем html всплывающего окна:

Изначально он имеет свойство display: none; . При наведении меняется на display: block; .

WordPress тут ни при чём — это html + css. Выводите шапку сайта, в ней скрытый блок. При наведении показываете блок. Вот пример:

.header < width: 100%; >.info < width: 100px; height: 300px; background: aliceblue; display: none; >.phone:hover .info

 
Телефон 
Много всякой инфы
 
 

Отслеживать
ответ дан 20 июл 2017 в 9:10
KAGG Design KAGG Design
35.1k 4 4 золотых знака 24 24 серебряных знака 53 53 бронзовых знака
Спасибо большое, помогли 🙂
20 июл 2017 в 10:17

Если ответ полезен, его стоит отметить как принятый галочкой внизу. Это поможет ориентироваться пользователям, которые ищут ответ на подобный вопрос.

20 июл 2017 в 10:19

Не важно на чем работает сайт. Нужны лишь html+css+js.

Т.к. пример по ссылке на jQuery, могу предложить такой вариант:

var timeout; $('.dropdown').on('mouseover', function() < clearTimeout(timeout); $(this).find('.popup').show(); $('body').addClass('overlayed'); >); $('.dropdown').on('mouseleave', function() < var popup = $(this).find('.popup'); timeout = setTimeout(function() < popup.hide(); $('body').removeClass('overlayed'); >, 300); >);

html, body < height: 100%; padding: 0px; margin: 0px; >* < box-sizing: border-box; >.overlay < background: rgba(0, 0, 0, 0.7); position: fixed; z-index: 2; left: 0; top: 0; right: 0; bottom: 0; display: none; >body.overlayed .overlay < display: block; >.block < position: relative; z-index: 3; background: #e5e5e5; padding: 0 10px; >.dropdown < display: inline-block; position: relative; padding: 10px 0; >.trigger < display: inline-block; cursor: pointer; color: #f00; >.popup

 
Контакт-центр 
+7 (987) 765-43-21 
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
 
 

Popup Maker + Polylang для всплывающего окна с выбором языка (настройки и Cookie)

Продолжаю делиться решениями задач WordPress, с которыми сталкиваюсь по работе. Возможно, вы уже где-то видели на мультиязычных веб-проектах фишку, когда сразу после входа на сайт пользователю показывается всплывающее окно с выбором желаемой языковой версии. Теоретически, можно определять страну посещения человека по ГЕО-привязке, но много где все еще встречается подобная олдскульная реализация. Чтобы внедрить данную функцию будем использовать плагины Popup Maker и Polylang.

По модулю Popup Maker у меня еще не было обзора, но я уже когда-то упоминал его в статье про создание всплывающей формы подписки Contact Form 7. Сегодня он также нам пригодится. Он имеет более полумиллиона загрузок и регулярно обновляется.

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

Создание всплывающего окна с выбором языка

1. Допустим, вы уже установили и активировали оба плагина + настроили локализацию на сайте с помощью Polylang (как описано по предыдущей ссылке выше). Теперь переходим в настройки раздела Languages – Settings. Здесь в блоке параметров “Custom post types and Taxonomies” надо будет активировать работу с записями модуля Popup Maker:

В русскоязычной локализации нужная нам опция называется “Всплывающие окна”, а на английском, по идее, будет выводиться название плагина. На этом вся работа с Polylang закончена.

2. Переходим в раздел админки “Popup Maker”, где выбираем добавление нового всплывающего окна. Далее вводим название объекта + заголовок окна, а в контентную часть вставляем нужные нам бесплатные иконки флагов стран.

Не забудьте при этом сделать ссылки на изображения, которые будут вести на главную страницу сайта в нужной языковой версии site.com, site.com, site.com/fr/, site.com/tr/ и др.

3. Следующий шаг выполняем на этой же странице – создаем триггер для появления модального окна.

В качестве условия срабатывания выбираем «Автооткрытие» + добавляем Cookie дабы это действий для текущего пользователя выполнялось всего 1 раз.

Здесь в последнем выпадающем списке (см. скриншот выше) вам надо выбрать после какого событие будет создана запись Cookie. Внимание! На картинке вы видите, что в Popup Maker очень некачественный перевод текстов, и первые 2 варианта одинаковые. На самом деле первый пункт – это добавление куки при закрытии кона, второй – при открытии. Нам нужен вариант №2.

Когда создаете Cookie отдельно от триггера (если вдруг забыли сделать это сразу), то после его добавления переходим в настройки триггера и выбираем соответствующий файл куки для него.

Затем сохраняемся и проверяем работу всплывающего окна. Пока будете тестировать не забывайте удалять куки после первого захода на сайт, т.к. потом функция «всплывания» не будет срабатывать. Сделать это можно почти также как очистить кэш Google Chrome и других браузерах.

4. Если Popup Maker работает без ошибок, переходим к его локализации. В принципе, она реализуется точно также, как и перевод контента в Polylang.

Напоследок могу подсказать еще один лайфхак. Если вы не хотите переводить текст кнопки «Закрыть», то вместо нее можно вставить символ закрытия окна ✖ , который в юникоде имеет значение ✖ (скопируйте целиком).

Добавляете этот параметр в настройках всплывающего окна в пункте “Закрыть”.

Еще один важный момент – чтобы рассмотренное сегодня решение срабатывало на вашем сайте, в шаблоне футера и хедера обязательно должны быть прописаны функции wp_footer и wp_head. Не забывайте об этом.

Понравился пост? Подпишись на обновления блога по RSS, Email или twitter!

Оцените статью:

(голосов — 12, средний балл: 5,75 из 7)

Категории: Возможности; Плагины;
Теги: вордпресс веб-разработка, всплывающие окна, переводы / локализация, полезные плагины, решение задач wordpress, создание сайта.

Похожие статьи:

1. Polylang — плагин для мультиязычных сайтов на нескольких языках в WordPress
2. Плагины отзывов для WordPress (Топ-10 лучших решений)
3. Создаем простое Вордпресс портфолио с плагином Portfolio by BestWebSoft
4. Дайджест лучших статей WordPress Inside в 2017 (итоги года)
5. Всплывающая форма подписки Contact Form 7 с отправкой файла и сохранением Email

Оставить комментарий
← JavaScript события в Woocommerce при добавлении в корзину, покупке и не только (предыдущая статья)
(следующая статья) Сервис Fondy для приема платежей в WordPress (банковские карты и не только) →

Блог WordPress Inside поможет вам научиться работать в вордпресс, закрепить и расширить имеющиеся знания. Плагины и шаблоны, разные хаки и функции wp, оптимизация и безопасность системы – все это и намного больше вы сможете найти на страницах нашего проекта!

Если хотите быстро и оперативно получать последние новости и статьи, то рекомендуем подписаться на обновления блога:

Последние посты

• Сервіс AdMaven + плагін для монетизації трафіка на WordPress сайтах
• Плагіни для створення стрічки новин з біжучим рядком в WordPress
• Як змінити розміщення кнопки оформлення замовлення в WooCommerce
• Плагін WHWS Display In Stock Products First – відображення товарів в наявності першими
• Підписка MonsterONE: чи варто використовувати цей сервіс у 2023 році? (+5 продуктів, які треба скачати в першу чергу)
• Онлайн генератор ссылок на мессенджеры для WordPress и не только
• Вкладки в Woocommerce товарах — как убрать, добавить, изменить (сниппеты + плагин)

• WooCommerce (45)
• Безопасность (12)
• Видео (6)
• Виджеты (28)
• Возможности (141)
• Вопрос-ответ (6)
• Начинающим (52)
• Новости (46)
• Оптимизация (23)
• Плагины (246)
• Сервисы (87)
• Хаки и секреты (87)
• Шаблоны (45)

Лучшее в категории

PopUp окна в WordPress

«Ну пора, так пора» — подумал я, и начал собирать материал. Поскольку тема довольно интересная, а WordPress не предлагает каких-либо встроенных инструментов для решения подобной задачи, то информационного недостатка я не испытывал. В результате накопилось довольно много наблюдений, которые мне показались интересными, и чтобы никто впредь не решился назвать меня лентяем, вместо одной статьи, написал целых три.

Первую из них и представляю вашему вниманию.

Хочу сразу сказать, что я сторонник того, чтобы решать проблему путем написания собственного кода, хотя бы потому, что он дает именно тот результат, который хотим. Даже если он далек от идеала, и может вызвать нервный тик у профессионального разработчика. В то же время приходится отдавать себе отчет в том, что далеко не все и не всегда могут или хотят разделить мое мнение на этот счет. Поэтому идею написать статью в стиле «как изобрести велосипед» с сожалением все же пришлось отбросить и обратиться к репозиторию плагинов.

Всплывающее окно средствами PopUp Maker

Как и следовало ожидать, вариантов оказалось множество, но лучших не так много. Большинство экспертов в этой области отдают предпочтение плагину PopUp Maker. Ему и посвящена данная статья.

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

Механизм работы погранично прост: нажав ссылку «Добавить всплывающее окно», открываем интерфейс, в котором можем создать это самое окно. Здесь не должно возникнуть особенных трудностей, поскольку для его конструирования применяется все тот же Gutenberg со всеми его блоками, возможностью использования сторонних расширений и шорт кодов. Непосредственно под редактором располагается метабокс с настройками всплывающего окна, где:

• В разделе «Триггеры» устанавливаем тип события, вызывающего появление всплывающего окна, подключение cookies и название CSS-селектора. За которым закрепляется данное событие. Что касается типов триггеров, то бесплатная версия плагина не блещет особым разнообразием, предлагая всего два: нажатие кнопки и авто открывание через определённый промежуток времени. Установив расширения от производителя плагина (естественно, не бесплатные) мы можем существенно пополнить этот список.
  
  1. Установка триггера «Задержка времени / Автооткрытие» позволяет сделать окно, которое будет открываться само через указанный промежуток времени. (если нужно, чтобы оно появлялось при просмотре определённых страниц сайта, их необходимо указать в разделе «Нацеливание»).
  2. Триггер нажатия предусматривает показ только тогда, когда (и если) читатель нажмет определённую ссылку или кнопку. Привязка осуществляется при помощи CSS-селекторов.
• Раздел «Нацеливание» позволяет установить условие для таргетинга всплывающего окна на конкретный контент или различные другие сегменты, а также определить, на каких типах устройств модельное окно будет отображаться, а на каких – нет.
• «Отображение» — позволяет установить дизайн всплывающего окна. При установке плагина нам предлагают набор из пяти тем оформления. Прямо скажем, внешний их вид оставляет желать лучшего. В качестве компенсации есть возможность сделать настройку основных ее элементов: отступов, стиля и цвета шрифта, размера окна степени прозрачности оверлея и кое-что еще. А настройка анимации и позиции окна и вовсе компенсирует этот недостаток.
• Раздел «Закрыть» позволяет настроить отображение кнопки закрытия окна также альтернативные методы (закрытие при щелчке по полю оверлея, клавишей ESC или F4).

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

Теперь – к примерам.

Пример 1: рекламное всплывающее окно, появляющееся само по себе

1. Заходим в раздел PopUp Maker. Нажимаем ссылку «Добавить всплывающее окно»
2. В открывшемся редакторе создаем само окно
   • Задаем название PopUp (нигде кроме административного раздела оно отображаться не будет, поэтому может быть любым)
   • Создаем контент (для примера разместил рекламу скидок к празднику).
3. Настраиваем условия отображения всплывающего окна:
   • В разделе «Триггеры» нажимаем «Добавить новый триггер». В появившемся окне выбираем «Задержка времени / Автооткрытие». В следующем шаге настройки устанавливаем время задержки появления окна.
   • В разделе «Нацеливание» устанавливаем условие отображения. (чтобы окно не надоедало пользователю, я установил его показ только при просмотре главной страницы). Также можно установить отключение показа окна на мобильный устройствах.
   • В пункте «Отображение» установим внешний вид на свое усмотрение (я выбрал Light box, как самый оптимальный для дальнейшей настройки). Размер – 40%. Тип анимации – движение. Начало анимации – справа. Позиция – Низ Право. Чтобы окно не прилипало к краям браузера, установим небольшие отступы от нижнего и от правого краев.
   • Кнопку закрытия настраивать не буем и оставим как есть.
4. Сохраняем настройки. Любуемся результатом.

Пример 2: появление окна при щелчке по соответствующей кнопке (ссылке в статье)

Создание самого окна и большинство настроек осуществляются по предыдущей схеме. Отличие состоит в следующем:

1. В странице или записи, при просмотре которой должен отображаться PopUp, создаем видимый и понятный читателю элемент (это может быть кнопка или картинка – не важно). Сохраняем внесённые изменения.
2. Переходим к просмотру статьи во фронтальной части сайта.
3. На панели администратора нажимаем кнопку PopUp Maker – Инструменты – Получить селектор.
4. Щелкаем левой кнопкой мыши по заготовленному заранее элементу и копируем CSS-селектор.
5. Возвращаемся в административную панель, открываем созданный ранее PopUp или создаем новый.
6. Настраиваем условия отображения:
   • На этапе установки триггера выбираем «Нажатие». В поле «Дополнительные CSS-селекторы» вставляем скопированные ранее.
   • Раздел «Нацеливание» не трогаем
   • Все остальное настраиваем на свой вкус.

В завершение следует отметить, что плагин PopUp Maker – довольно гибкая и мощная штука даже в бесплатной реализации. Если же дополнить его платным функционалом, то возможностей станет еще больше. О чем говорит его собственный репозиторий расширений.

Мультифункциональный попап с помощью My Popup

Купить MyPopup -15%

Но никакой плагин не сравнится с новинкой от команды WPShop — плагином My Popup для создания всплывающих окон на сайтах WordPress.

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

Возможности нового плагина

Главное окно настроек:

Забирайте скидку на свежий плагин всплывающих окон My Popup и наслаждайтесь качественным программным продуктом раньше других:

Промокод на MyPopup -15%

Несколько примеров работы этого плагина

My Popup-окно с подпиской по e-mail и затемненной подложкой:

Popup, который срабатывает при попытке посетителя закрыть страницу, предлагает получить подарок и подписаться на группы в соцсетях:

Произвольные всплывающие окна с различным дизайном на одной странице:

С помощью My Popup можно вывести любой попап в любом месте сайта, с любым оформлением.

Также предусмотрено точечное отображение всплывашек на отдельных записях, страницах и пользовательских таксономиях:

Понравился плагин? Забирайте сейчас, пока для читателей действует скидка:

MyPopup по самой выгодной цене