Создания настраиваемой страницы входа в WordPress
Ищете решение для создания настраиваемой страницы входа в WordPress?
Если вы разрешите людям регистрироваться на вашем сайте, настройка страницы входа позволит вам улучшить брендинг вашего сайта и сделать его более удобным для пользователей. Вы сможете добавить свой собственный логотип, изменить URL-адрес, настроить цвета, добавить больше контента, предложить вход в социальные сети и многое другое.
В этом руководстве для начинающих мы расскажем о пяти различных методах, которые вы можете использовать для создания настраиваемой страницы входа в WordPress.
Вы можете выбрать метод, который лучше всего подходит для ваших нужд, бюджета и уровня квалификации.
Пять методов создания пользовательской страницы входа в WordPress
Вот пять методов, которые мы рассмотрим:
- Настройка собственной страницы входа с помощью бесплатного плагина
- Использование Elementor для создания настраиваемой страницы входа с визуальным интерфейсом перетаскивания
- Использование специального плагина регистрации WordPress
- Использование обычного плагина форм WordPress
- Добавление собственных фрагментов кода
Настройте собственную страницу входа в WordPress.
По умолчанию собственная страница входа в WordPress находится по адресу yoursite.com/wp-login.php и выглядит так:
Если вас устраивает, но вы просто хотите настроить эту страницу по умолчанию, вы можете найти множество бесплатных плагинов, которые позволят вам:
- Измените логотип 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 (ОАЭ):
Затем откройте настройки виджета, чтобы управлять поведением и стилем вашей формы входа.
Вот некоторые вещи, которые вы можете сделать с настройками:
В 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 :
Вы также можете настроить свою регистрационную форму, перейдя в Profile Builder → Form Fields, и вы можете добавить свою внешнюю регистрационную форму с помощью шорткода [wppb-register] .
Используйте плагин формы WPForms
Многие плагины форм WordPress имеют функции, которые помогут вам создать настраиваемую форму входа, хотя обычно вам понадобится премиум-версия наиболее популярных опций.
Это может быть хорошим вариантом, если вы уже используете плагин на своем сайте, но вы, вероятно, не хотите покупать плагин формы только для функции входа в систему.
В этом руководстве мы сосредоточимся на WPForms . Другие популярные плагины форм, такие как Gravity Forms и Ninja Forms, также предлагают эту функцию.
Чтобы использовать WPForms для создания настраиваемой страницы входа в WordPress, вам понадобится надстройка User Registration, которая доступна только по лицензии Pro за 199 долларов .
Для начала вам необходимо установить как основной плагин WPForms, так и надстройку регистрации пользователей.
Затем перейдите в WPForms → Добавить новый и выберите шаблон формы входа пользователя :
Вы можете использовать интерфейс конструктора форм для дополнительных настроек. Некоторые настройки, которые вы можете сделать, включают:
- Добавьте ссылку для сброса пароля с помощью смарт-тега утерянного пароля — {url_lost_password}
- Настройте индивидуальное перенаправление после входа пользователя в систему, перейдя в Настройки → Подтверждения.
- Включите защиту от спама, перейдя в Настройки → Общие.
Вы можете добавить свою индивидуальную форму входа в любое место на своем сайте, используя следующие методы:
Используйте свой собственный код
Если вы опытный пользователь, которому хотя бы в какой-то мере комфортно работать с 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 с функцией перетаскивания и перетаскивания, с возможностью входа в социальные сети, настраиваемых перенаправлений и многого другого.
В зависимости от ваших потребностей и уровня навыков существуют и другие решения, например, использование вашего собственного кода.
