Создание многоэтапной формы регистрации в WordPress

Создание многоэтапной формы регистрации в WordPress

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

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

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

Разбираем код

В демо выше во вкладке SOCIAL PROFILES есть поля для Facebook, Twitter и Google+, которых по умолчанию в WordPress нет. И как следствие, нам необходимо самим создать контактные методы, которые будут сохранять введенную в эти поля информацию в профиле пользователя.

Как добавить контактные поля через файл functions.php

В сети есть множество уроков, как добавить поля с контактной информацией в профиль пользователя. Если вкратце, то в этих уроках объясняется следующее – если в файл темы functions.php вставить код ниже, то в профиль пользователя добавляется информация по полям Facebook, Twitter и Google+.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Как добавить контактные поля через плагин ProfilePress

В плагине ProfilePress поля с контактной информацией добавляются через форму с парой ключ/значение (скриншот ниже). Форма расположена на странице настроек контактной информации, где key это уникальное имя для внутреннего использования в WordPress для распознания поля, а label – описание, отображаемое пользователю.

Чтобы увидеть новые поля Facebook, Twitter и Google+ перейдите в свой профиль.

После добавления в профиль WordPress полей Facebook, Twitter и Google+ необходимо создать пошаговую форму при помощи функции melange.

Создаем многоэтапную форму

Я не буду останавливаться и объяснять, как пошаговая форма создается в HTML, CSS и JS. Можете посмотреть исходники. Вместо этого мы узнаем, как конвертировать данную форму в форму регистрации WordPress.

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

После установки плагина кликните, как показано на скриншоте ниже на пункт Melange, а затем Add New для запуска процесса создания.

Вам будет показана форма. Заполните поля, как сказано ниже. Название формы введите в поле Name. Назовем ее Stride Multistep Signup Form. Скопируйте HTML код ниже в раздел Melange Design в TinyMCE редактор и замените инпуты их шорткодами, как показано ниже:

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Мы могли бы и оставить обычные поля в форме, не заменяя их на шорткоды плагина ProfilePress. Но с шорткодами мы точно будем знать, что значение атрибута name правильное. Если вы сами можете задать атрибут name для полей, можете не использовать шорткоды (к примеру, для поля имя пользователя атрибут со значением reg_username).

В плагине ProfilePress нет текстовых полей для вставки JS кода, значит JavaScript код пойдет в поле Melange Design сразу же после HTML кода формы. Обратите внимание: атрибут novalidate добавлен в тег form, чтобы не появлялась раздражающая ошибка «An invalid form control with name= is not focusable» в blink браузерах, которые защищают форму от отправки (Chrome и Opera).

Объяснение кода: сначала мы подключили отложенный вызов jQuery Easing library. Это было сделано для того, чтобы добавить эффект анимации в форму сразу после JavaScript кода, который обрабатывает переход между этапами. Вставьте CSS код в поле CSS Stylesheet.

Обратите внимание: ошибки форм регистрации под управлением плагина ProfilePress заворачиваются в DIV с классом profilepress-reg-status, сам класс можно найти в стилях. В поле Registration Success вбейте код ниже для настройки уведомления об успешной регистрации пользователя.

Сохраните форму и выйдите обратно в каталог melange.

Скопируйте сгенерированный шорткод и вставьте его на вашу WordPress страницу. Сохраните страницу и можете посмотреть пошаговую регистрацию в действии.

Заключение

В этом уроке мы научились создавать многоступенчатую форму регистрации в WordPress при помощи моего плагина ProfilePress. Плагин берет на себя серверную PHP валидацию, аутентификацию и авторизацию форм авторизации, регистрации и front-end формы редактирования профиля. Если у вас возникли вопросы, есть предложения или вы хотите мне помочь, пишите об этом в комментариях.

Автор: Agbonghama Collins

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress

Узнать подробнее

Хотите быстро научиться создавать сайты и блоги на WordPress с уникальным дизайном?

Получите самую полную в Рунете бесплатную систему обучения создания сайтов на WordPress “Уникальный сайт с нуля”

Получить

Метки:

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

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree