Как создать собственный логин, регистрацию и профиль пользователя WordPress

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

К счастью, вы можете использовать плагин для регистрации пользователей WordPress, например Profile Builder Pro. Это позволяет легко настраивать формы входа и регистрации. Это также дает вам больше контроля над профилем пользователя.

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

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

По умолчанию формы регистрации, входа и профиля пользователя WordPress очень просты. То же самое касается форм WooCommerce:

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

Кроме того, вы можете защитить свои формы с помощью двухфакторной аутентификации (2FA). Это поможет предотвратить проникновение злоумышленников на ваш сайт.

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

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

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

Мы рассмотрим эти функции более подробно в следующем разделе.

Как создать пользовательский логин, регистрацию и профиль пользователя WordPress

Теперь давайте посмотрим, как настроить формы входа, регистрации и профиля пользователя WordPress.

Шаг 1: Установите Profile Builder Pro

Во-первых, вам необходимо приобрести плагин Profile Builder Pro. Затем войдите в свою учетную запись и перейдите в раздел «Загрузки» . Здесь вы найдете файлы для плагина, который вы только что приобрели:

Загрузите плагины Main и Pro , чтобы сохранить файл на свой компьютер. Затем выберите «Управление сайтами» и введите URL-адрес сайта, на котором вы хотите активировать плагин:

Теперь войдите на свой сайт WordPress и перейдите в «Плагины» → «Добавить новый» . Затем нажмите кнопку «Загрузить плагин» и выберите файлы, которые вы только что загрузили, один за другим:

Выберите «Установить сейчас» , а затем «Активировать» . Теперь вы должны увидеть Profile Builder в меню панели инструментов. Нажмите на нее и перейдите в раздел «Регистрация версии» . Здесь вам нужно будет ввести лицензионный ключ для вашего плагина:

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

Profile Builder Pro может автоматически создавать для вас страницы формы:

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

Шаг 2: Настройте свои формы WordPress

Давайте начнем с настройки некоторых параметров ваших форм WordPress. Перейдите в Конструктор профилей → Настройки и выберите дизайн формы:

Например, вы можете выбрать стиль 2 в качестве стиля формы, и ваши внешние пользовательские формы будут выглядеть примерно так:

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

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

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

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

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

Если вы хотите направлять пользователей на определенную страницу после их регистрации или входа в систему, вам необходимо активировать соответствующий модуль. Перейдите в Profile Builder → Add-Ons и найдите Custom Redirects *.* Установите флажок рядом с ним и нажмите «Активировать» :

Теперь перейдите в «Конструктор профилей» → «Пользовательские перенаправления» . Как вы могли заметить, вы можете настроить перенаправления для отдельных пользователей или в соответствии с ролью пользователя:

В нашем случае мы будем настраивать глобальные перенаправления . Начните с выбора типа перенаправления (например, «После входа» или «После регистрации »):

Затем введите URL-адрес, на который вы хотите перенаправить пользователей, и нажмите «Добавить запись» . Вы можете создать несколько переадресаций.

Шаг 3: Настройте поля формы

Чтобы настроить поля для регистрационной формы пользователя WordPress, перейдите в «Конструктор профилей» → «Поля формы ». Здесь вы увидите список полей, которые в настоящее время отображаются в вашей форме:

Вы можете нажать «Изменить» , чтобы настроить отдельное поле, или «Удалить» , чтобы удалить его из формы. Чтобы добавить новое поле, используйте раскрывающееся меню для выбора параметра.

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

Вы даже можете сделать это поле обязательным. Когда будете готовы, нажмите «Добавить поле» . Теперь это будет добавлено в вашу регистрационную форму пользователя WordPress.

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

Например, вы можете запрашивать у пользователей их веб-сайт только в том случае, если они выбрали США в качестве своей страны. Для этого нажмите кнопку «Изменить» в поле «Веб-сайт» . Затем установите флажок « Включить условную логику» :

В раскрывающемся меню выберите поле, от которого будет зависеть эта запись (в нашем случае Select Country ), а затем укажите ввод (например, United States ).

Вот как будет выглядеть результат:

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

Если вы хотите создать несколько регистрационных форм для разных типов пользователей, перейдите в «Конструктор профилей » → «Дополнения» и нажмите, чтобы активировать модуль «Множественные регистрационные формы» :

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

После активации модуля перейдите в «Конструктор профилей» → «Формы регистрации» и нажмите «Добавить новый» :

Затем вам нужно будет ввести имя для вашей формы, настроить некоторые параметры и настроить поля (как показано ранее):

Когда будете готовы, нажмите «Опубликовать» . Далее мы рассмотрим, как добавить эти формы на ваш сайт.

Шаг 4. Добавьте формы на свои страницы

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

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

Есть два способа сделать это: с помощью шорткода или выделенного блока.

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

Если вы используете существующую страницу WooCommerce, вам необходимо удалить стандартные формы входа и регистрации. Просто выберите шорткод и удалите его:

Теперь, чтобы добавить свои пользовательские формы, нажмите, чтобы добавить новый блок, и найдите «Регистрация » или «Вход» :

В этом уроке мы добавим обе формы на эту страницу. Мы также добавили заголовок для каждой формы:

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

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

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

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

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

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

Вы можете найти эти короткие коды в Profile Builder → Основная информация . Просто скопируйте и вставьте их на нужную страницу!

Шаг 5: Настройте формы профиля

Наконец, вы можете настроить формы профиля пользователя WordPress, чтобы пользователи могли больше контролировать свои данные. Для этого вам необходимо активировать модуль Multiple Edit Profile Forms :

Затем перейдите в «Конструктор профилей» → «Редактировать формы профиля» → «Добавить новый» :

Затем вы можете просто настроить форму, как показано ранее. Например, вы можете добавить перенаправление и создать новые поля или отредактировать существующие. Когда вы закончите, нажмите «Опубликовать» .

Заключение

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

Напомним, вот как вы можете создавать собственные формы WordPress для входа и регистрации:

1. Установите Конструктор профилей Pro.
2. Настройте свои формы WordPress.
3. Настройте поля формы.
4. Добавьте формы на свои страницы.
5. Настройте профиль пользователя.

У вас есть вопросы о создании пользовательского входа в систему, регистрации или профиля пользователя WordPress? Дайте нам знать в комментариях ниже!