страница входа в WordPress

Как создать пользовательскую страницу входа в WordPress 2021

Создания настраиваемой страницы входа в WordPress

Ищете решение для создания настраиваемой страницы входа в WordPress?

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

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

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

Пять методов создания пользовательской страницы входа в WordPress

Вот пять методов, которые мы рассмотрим:

  1. Настройка собственной страницы входа с помощью бесплатного плагина
  2. Использование Elementor для создания настраиваемой страницы входа с визуальным интерфейсом перетаскивания
  3. Использование специального плагина регистрации WordPress
  4. Использование обычного плагина форм WordPress
  5. Добавление собственных фрагментов кода

Настройте собственную страницу входа в WordPress.

По умолчанию собственная страница входа в WordPress находится по адресу yoursite.com/wp-login.php и выглядит так:

Страница входа в WordPress

Если вас устраивает, но вы просто хотите настроить эту страницу по умолчанию, вы можете найти множество бесплатных плагинов, которые позволят вам:

  • Измените логотип WordPress на свой собственный.
  • Поменяйте шрифты.
  • Настройте все цвета для форм и кнопок
  • Добавьте собственный цвет фона.

Ваша страница входа по-прежнему будет находиться по адресу yoursite.com/wp-login.php , но вы можете настроить ее в соответствии с остальной частью бренда вашего сайта. В качестве дополнительного бонуса любые внесенные вами изменения также будут применяться к собственной странице регистрации WordPress.

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

Для начала установите и активируйте бесплатный плагин с WordPress.org.

Затем откройте настройщик WordPress, перейдя в LoginPress → Customizer .

В настройках Customizer выберите опцию LoginPress . Это обычный интерфейс настройщика WordPress.

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

Вход в систему

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

Создать страницу входа с Elementor + Ultimate для Elementor

Хотите создать действительно настраиваемую страницу входа? Используйте популярный плагин для построения страниц Elementor и виджет входа в систему в расширении Ultimate Addons для Elementor .

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

Бесплатный плагин Elementor не включает виджет входа в систему, но вы можете добавить гибкий виджет с помощью Ultimate Addons для Elementor. Он поставляется с более чем 50 виджетами для улучшения ваших проектов Elementor.

Некоторые из преимуществ такого подхода:

  • У вас будет 100% контроль над дизайном всей вашей страницы входа с помощью визуального интерфейса Elementor с перетаскиванием. Вы также можете легко добавить настраиваемый контент помимо формы входа, что поможет вам предоставить полезную информацию или улучшить брендинг.
  • Вы можете добавить в свою форму вход через социальные сети Facebook и / или Google, что снижает трение и это то, что предпочитают многие пользователи.
  • Вы сможете настроить пользовательские перенаправления после входа пользователей в систему и иным образом настроить поведение входа.

Для начала установите бесплатный плагин Elementor с WordPress.org и плагин Ultimate Addons for Elementor .

Затем создайте новую страницу WordPress ( Страницы → Добавить новую ) и нажмите кнопку « Редактировать с помощью Elementor» , чтобы открыть интерфейс Elementor.

Вы можете использовать обычные виджеты Elementor для управления базовым дизайном вашей страницы входа.

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

Когда вы будете готовы добавить форму входа, перетащите виджет формы входа из Ultimate Addons for Elementor (ОАЭ):

Форма входа с использованием elementor

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

элемент или параметры формы входа

Вот некоторые вещи, которые вы можете сделать с настройками:

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

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

Вкладки « Стиль» и « Дополнительно» дают вам полный контроль над тем, как выглядит ваша форма входа.

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

Как только вы закончите, опубликуйте страницу. Теперь ваша форма входа будет активна по URL-адресу страницы WordPress. Вы можете отредактировать URL-адрес страницы, чтобы при необходимости изменить URL-адрес для входа.

Бонус – Ultimate Addons для Elementor также может помочь вам создать пользовательские формы регистрации для вашего сайта с помощью виджета User Registration Form .

Вы сможете настроить поля в регистрационной форме, добавить действия после регистрации, стилизовать форму и многое другое. Заинтересованы? Узнайте, как создать собственную регистрационную форму WordPress с помощью Elementor .

Используйте User Registration

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

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

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

Для полноценного решения для регистрации / входа в WordPress вы можете использовать бесплатный плагин Profile Builder на WordPress.org.

После установки и активации бесплатного плагина с WordPress.org вы можете добавить пользовательскую форму входа в любое место на своем сайте, используя шорткод [wppb-login] или виджет входа в Profile Builder :

Шорткод для входа в WordPress

Вы также можете настроить свою регистрационную форму, перейдя в Profile Builder → Form Fields, и вы можете добавить свою внешнюю регистрационную форму с помощью шорткода [wppb-register] .

Используйте плагин формы WPForms

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

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

В этом руководстве мы сосредоточимся на WPForms . Другие популярные плагины форм, такие как Gravity Forms и Ninja Forms, также предлагают эту функцию.

Чтобы использовать WPForms для создания настраиваемой страницы входа в WordPress, вам понадобится надстройка User Registration, которая доступна только по лицензии Pro за 199 долларов .

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

Затем перейдите в WPForms → Добавить новый и выберите шаблон формы входа пользователя :

Форма входа в WP Forms

Вы можете использовать интерфейс конструктора форм для дополнительных настроек. Некоторые настройки, которые вы можете сделать, включают:

  • Добавьте ссылку для сброса пароля с помощью смарт-тега утерянного пароля – {url_lost_password}
  • Настройте индивидуальное перенаправление после входа пользователя в систему, перейдя в Настройки → Подтверждения.
  • Включите защиту от спама, перейдя в Настройки → Общие.
Настройки формы входа в WP Forms

Вы можете добавить свою индивидуальную форму входа в любое место на своем сайте, используя следующие методы:

Используйте свой собственный код

Если вы опытный пользователь, которому хотя бы в какой-то мере комфортно работать с PHP, HTML и CSS, вы также можете настроить страницу входа в WordPress без необходимости установки стороннего плагина.

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

Вы захотите добавить эти фрагменты кода в файл functions.php дочерней темы или через плагин, например Code Snippets .

Измените логотип входа:

function my_login_logo() { ?>
    

Измените URL-адрес, на который ссылается логотип:

function my_login_logo_url() {
    return home_url();
}
add_filter( 'login_headerurl', 'my_login_logo_url' );
 
function my_login_logo_url_title() {
    return 'Your Site Name and Info';
}
add_filter( 'login_headertitle', 'my_login_logo_url_title' );

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

Вывод

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

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

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

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

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

Call Now Button«Позвонить Сейчас»