Как создать всплывающий модал для входа в систему WordPress (шаг за шагом)

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

Зачем создавать модальное всплывающее окно входа в систему WordPress?

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

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

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

Как сделать всплывающее окно на WordPress | Плагин модальных окон Popup Maker | WordPress с нуля

Модальное всплывающее окно входа быстрее и улучшает пользовательский опыт на вашем сайте. Более быстрый и отточенный пользовательский опыт может повысить ваши продажи и конверсии.

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

Способ 1. Создание модального всплывающего окна входа с помощью CSH Login

Этот метод проще и рекомендуется для большинства пользователей.

Первое, что вам нужно сделать, это установить и активировать плагин CSH Login. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.

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

После выбора типа модального поля для входа, вы можете прокрутить вниз и управлять перенаправлениями входа / выхода для формы. Вы также можете позволить пользователям генерировать свои собственные пароли.

Далее, вам нужно прокрутить вниз до пункта Стили и выбирают макет, отображение меток, цвет фона, цвет кнопки, цвет ссылки и многое другое.

Кроме того, вы можете добавить регистрационный email, тему письма, использовать Google reCaptcha и многое другое. Этот плагин также позволяет добавлять социальные логины, такие как Facebook (признана экстремистской организацией на территории РФ), Twitter и Google.

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

Вы также можете добавить модальный вход в боковую панель WordPress. Просто перейдите в раздел Внешний вид » Виджеты перетащить Вход в CSH виджет в боковой панели вашего сайта.

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

Метод 2. Создание модальной всплывающей формы входа с помощью WPForms и OptinMonster

Для этого метода вам понадобится плагин WPForms и OptinMontser. Если у вас уже есть эти два плагина, то этот метод будет лучшим решением для вас.

WPForms — лучший плагин контактных форм WordPress. Для доступа к аддону регистрации пользователей вам понадобится как минимум их тарифный план Pro.

OptinMonster — лучший плагин для всплывающих окон WordPress и программное обеспечение для генерации лидов на рынке. Это поможет вам конвертировать посетителей сайта в подписчиков и клиентов. Вам понадобится как минимум тарифный план Pro, чтобы получить доступ к функции MonsterLinks, используемой в этой статье.

Готовый? Давайте начнем.

Использование WPForms для создания формы входа пользователя в систему

Сначала вам нужно установить и активировать плагин WPForms. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.

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

После активации аддона, вам нужно перейти в раздел WPForms » Добавить новую страницу для создания формы входа пользователя.

После запуска конструктора WPForms, вам нужно выбрать предварительно созданную форму Форма входа пользователя в систему шаблон.

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

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

Не могу вспомнить пароль? ">Нажмите здесь. У вас нет аккаунта? ">Регистрация здесь.

После этого вам нужно нажать на кнопку Сохранить и затем нажмите на кнопку Вставить кнопку.

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

Ваша форма входа готова. Теперь вы можете приступить к созданию модального всплывающего окна.

Использование OptinMonster для создания модального всплывающего окна

Сначала вам нужно будет установить и активировать плагин OptinMonster. Для более подробной информации смотрите наше пошаговое руководство о том, как установить плагин WordPress.

После активации вам нужно перейти к OptinMonster в области администратора WordPress и нажмите на Создание новой кампании кнопка.

Ваша приборная панель OptinMonster откроется на новой веб-странице.

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

Далее, вам необходимо выбрать Холст шаблон кампании, который является пустым шаблоном и позволяет добавлять пользовательский код и шорткоды.

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

Как только вы нажмете на Начните строить после чего вы будете перенаправлены на страницу настройки кампании OptinMonster.

Отсюда вам нужно перейти к Optin вкладку и установите ширину и высоту холста, добавьте код вставки формы входа в Custom Canvas HTML поле, управлять отображением и звуковыми эффектами для модального всплывающего окна, и многое другое.

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

Поскольку вы создаете модальное всплывающее окно входа, вам нужно перейти на вкладку настройки и установить значение ‘0’ для Длительность куки и Success Cookie Duration. Она будет отображать форму всем посетителям, когда они нажмут на вашу ссылку.

Далее вам необходимо посетить страницу Правила отображения вкладка и развернуть MonsterLink изменить статус на активный.

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

Теперь вы можете добавить это модальное всплывающее окно входа в систему на свои страницы или посты WordPress.

Добавление модального входа в WordPress

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

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

После этого вам нужно вернуться на страницу обзора кампаний и скопировать slug, который виден под опцией live кампании. Этот уникальный slug может быть использован в шорткодах и коде для отображения модального входа в WordPress.

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

Вы также можете добавить приведенный выше код в меню WordPress, боковую панель или любую другую область на вашем сайте.

Обязательно сохраните изменения на странице WordPress и посетите свой сайт, чтобы увидеть модальный вход в действии.

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

Источник: www.wpbeginner.com