От автора: очень часто стандартные формы авторизации, регистрации и сброса пароля выделяются из общего дизайна. Раньше, когда WordPress бы движком для блогов, это было нормально. С тех пор WordPress эволюционировал в систему управления контентом, и требования к формам авторизации, регистрации и сброса пароля стали только расти. В этом уроке мы узнаем, как создать многоэтапную форму регистрации в WordPress при помощи моего плагина ProfilePress.
Ниже представлен дизайн пошаговой формы регистрации, который мы создадим к концу этого урока.
Если хотите сразу же перепрыгнуть на демо, то можете посмотреть, как оно работает на сайте под управлением WordPress. Без лишних рассуждений, начнем.
Разбираем код
В демо выше во вкладке SOCIAL PROFILES есть поля для Facebook*, Twitter и Google+, которых по умолчанию в WordPress нет. И как следствие, нам необходимо самим создать контактные методы, которые будут сохранять введенную в эти поля информацию в профиле пользователя.
Как добавить контактные поля через файл functions.php
В сети есть множество уроков, как добавить поля с контактной информацией в профиль пользователя. Если вкратце, то в этих уроках объясняется следующее – если в файл темы functions.php вставить код ниже, то в профиль пользователя добавляется информация по полям Facebook*, Twitter и Google+.
|
1 2 3 4 5 6 7 8 9 10 |
function add_contact_methods( $user_contact ){ /* добавляем контактные методы пользователя */ $user_contact['facebook'] = __('Facebook Username'); $user_contact['twitter'] = __('Twitter Username'); $user_contact['google'] = __('Google+ Profile'); return $user_contact; } add_filter('user_contactmethods', 'add_contact_methods'); |
Как добавить контактные поля через плагин 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 редактор и замените инпуты их шорткодами, как показано ниже:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<form method="post" novalidate> <div id="msform"> <!-- progressbar --> <ul id="progressbar"> <li class="active">Account Setup</li> <li>Social Profiles</li> <li>Personal Details</li> </ul> <!-- fieldsets --> <fieldset> <h2 class="fs-title">Create your account</h2> <h3 class="fs-subtitle">This is step 1</h3> [reg-username placeholder="Username"] [reg-email placeholder="Email"] [reg-password placeholder="Password"] <input type="button" name="next" class="next action-button" value="Next"/> </fieldset> <fieldset> <h2 class="fs-title">Social Profiles</h2> <h3 class="fs-subtitle">Your presence on social networks</h3> [reg-cpf key="twitter" type="text" placeholder="Twitter"] [reg-cpf key="facebook" type="text" placeholder="Facebook"] [reg-cpf key="google" type="text" placeholder="Google Plus"] <input type="button" name="previous" class="previous action-button" value="Previous"/> <input type="button" name="next" class="next action-button" value="Next"/> </fieldset> <fieldset> <h2 class="fs-title">Personal Details</h2> <h3 class="fs-subtitle">We will never sell it</h3> [reg-first-name placeholder="First Name"] [reg-last-name placeholder="Last Name"] [reg-nickname placeholder="Nickname"] [reg-bio placeholder="Biography"] <input type="button" name="previous" class="previous action-button" value="Previous"/> [reg-submit class="submit action-button" value="Submit"] </fieldset> </div> </form> |
Мы могли бы и оставить обычные поля в форме, не заменяя их на шорткоды плагина 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).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 |
//jQuery (function ($) { var current_fs, next_fs, previous_fs; //набор полей var left, opacity, scale; //свойства которые будем анимировать var animating; //флаг чтобы предотвратить множественные нажатия $(".next").click(function () { if (animating) return false; animating = true; current_fs = $(this).parent(); next_fs = $(this).parent().next(); //активируем следующий этап на прогресс баре с помощью индекса next_fs $("#progressbar li").eq($("fieldset").index(next_fs)).addClass("active"); //показываем следующий набор полей next_fs.show(); //прячем текущий набор стилей со стилями current_fs.animate({ opacity: 0 }, { step: function (now, mx) { //так как прозрачность current_fs уменьшается до 0 - хранится в "now" //1. уменьшаем current_fs до 80% scale = 1 - (1 - now) * 0.2; //2. Вытаскиваем справа (50%) next_fs left = (now * 50) + "%"; //3. Повышаем прозрачность next_fs до 1 т.к. поля выезжают opacity = 1 - now; current_fs.css({ 'transform': 'scale(' + scale + ')' }); next_fs.css({ 'left': left, 'opacity': opacity }); }, duration: 800, complete: function () { current_fs.hide(); animating = false; }, //эта функция анимации написана мной easing: 'easeInOutBack' }); }); $(".previous").click(function () { if (animating) return false; animating = true; current_fs = $(this).parent(); previous_fs = $(this).parent().prev(); //выключаем на прогресс баре текущий этап $("#progressbar li").eq($("fieldset").index(current_fs)).removeClass("active"); //показываем предыдущие поля previous_fs.show(); //прячем текущие поля со стилями current_fs.animate({ opacity: 0 }, { step: function (now, mx) { // так как прозрачность current_fs уменьшается до 0 - хранится в "now" //1. увеличиваем previous_fs с 80% до 100% scale = 0.8 + (1 - now) * 0.2; //2. убираем current_fs вправо(50%) – с 0% left = ((1 - now) * 50) + "%"; //3. повышаем прозрачность previous_fs до одного, т.к. он выезжает opacity = 1 - now; current_fs.css({ 'left': left }); previous_fs.css({ 'transform': 'scale(' + scale + ')', 'opacity': opacity }); }, duration: 800, complete: function () { current_fs.hide(); animating = false; }, //функция анимации написана мной easing: 'easeInOutBack' }); }); })(jQuery); |
Объяснение кода: сначала мы подключили отложенный вызов jQuery Easing library. Это было сделано для того, чтобы добавить эффект анимации в форму сразу после JavaScript кода, который обрабатывает переход между этапами. Вставьте CSS код в поле CSS Stylesheet.
Обратите внимание: ошибки форм регистрации под управлением плагина ProfilePress заворачиваются в DIV с классом profilepress-reg-status, сам класс можно найти в стилях. В поле Registration Success вбейте код ниже для настройки уведомления об успешной регистрации пользователя.
Сохраните форму и выйдите обратно в каталог melange.
Скопируйте сгенерированный шорткод и вставьте его на вашу WordPress страницу. Сохраните страницу и можете посмотреть пошаговую регистрацию в действии.
Заключение
В этом уроке мы научились создавать многоступенчатую форму регистрации в WordPress при помощи моего плагина ProfilePress. Плагин берет на себя серверную PHP валидацию, аутентификацию и авторизацию форм авторизации, регистрации и front-end формы редактирования профиля. Если у вас возникли вопросы, есть предложения или вы хотите мне помочь, пишите об этом в комментариях.
Автор: Agbonghama Collins
Источник: //www.sitepoint.com/
Редакция: Команда webformyself.
* Признана экстремистской организацией и запрещена в Российской Федерации.
