У базовій комплектації WordPress надає розробникам форму реєстрації, яку можна використовувати для налаштування даних користувача або додавання нового користувача.

Але що, якщо ви хочете реалізувати власну форму реєстрації, яка містить дані, що не охоплені опціями консолі WordPress?

У цьому уроці ми дізнаємося, як створити форму реєстрацію WordPress, використовуючи комбінацію тегів шаблонів і шорткоди.

Форма реєстрації за замовчуванням складається всього з двох полів — ім’я користувача та адресу електронної пошти:

При наявності тільки двох полів для введення даних: імені користувача та адресу електронної пошти, — зареєструватися в системі неймовірно легко. Спочатку ви вводите ваше ім’я користувача та адресу електронної пошти, після чого пароль буде висланий вам. Далі ви входите на сайт під своїм логіном і заповнюєте профіль, зміните пароль.

Замість того, щоб змушувати користувача проходити через цю процедуру, чому б не надати йому розширену реєстраційну форму, що складається з деяких важливих додаткових полів, крім імені користувача і електронної пошти. Наприклад, пароль, URL-адресу сайту, біографія, нік, ім’я та прізвище.

Це особливо корисно для сайтів, які ведуться кількома авторами.

У цій статті ми створимо плагін користувальницької форми реєстрації з наступними полями:

  • ім’я користувача;
  • пароль;
  • E-mail;
  • адреса веб-сайту;
  • ім’я;
  • прізвище;
  • нік;
  • біографія (або розділ про мене).

Користувальницька форма реєстрації може бути інтегрована в WordPress за допомогою плагіна шорткода і пов’язаного з ним тега шаблону.

З допомогою шорткода ви можете створити сторінку і зробити її офіційною сторінкою реєстрації вашого сайту. Ви також можете використовувати код запису, щоб після прочитання однієї з ваших статей користувач міг підписатися на оновлення на вашому сайті.

Якщо ви хочете додати реєстраційну форму бічної панелі або в певному місці свого сайту, ви можете відредагувати тему WordPress і помістити тег шаблону в потрібному місці.

Перш ніж ми почнемо створювати плагін форми реєстрації, варто відзначити, що ім’я користувача, пароль і адресу електронної пошти будуть обов’язковими для заповнення полями.

Ми будемо дотримуватися це правило при написанні функції валідації.

Створення плагіна

З урахуванням усього вище сказаного, давайте приступимо до складання коду плагіна. По-перше, включаємо заголовок плагіна:

Далі ми створюємо функцію PHP, яка містить HTML-код форми реєстрації:

function registration_form( $username, $password, $email, $сайті, $first_name, $last_name, $nickname, $bio ) {
echo’
div {
margin-bottom:2px;
}
input{
margin-bottom:4px;
}
‘;
echo’
Ім’я користувача *
Пароль *
E-mail *
Сайт
Ім’я
Прізвище
Нік
Про мене / Бтография
‘. ( isset( $_POST[‘bio’]) ? $bio : null ) . ‘
‘;
}

Зверніть увагу, що поле реєстрації передається в наведену вище функцію в якості змінної. В коді функції, ви побачите примірники наступного коду, наприклад:

( isset( $_POST[‘lname’] ) ? $last_name : null )

Потрійний оператор перевіряє вміст глобального масиву $_POST, щоб визначити, чи містить форма значення. Якщо так, то заповнює поля форми значеннями, щоб користувачеві не потрібно повторно вводити дані.

Форма реєстрації повинна обов’язково містити компоненти для перевірки і забезпечення безпеки даних. Тому ми створюємо функцію валідації з ім’ям registration_validation.

Щоб спростити валідацію, ми будемо використовувати клас WordPress WP_Error.

Ось, як ми створюємо цю функцію.

  • Створюємо функцію і передаємо їй поля реєстрація в якості аргументів:

function registration_validation( $username, $password, $email, $сайті, $first_name, $last_name, $nickname, $bio ) {

  • Встановлюємо екземпляр класу WP_Error і робимо примірник змінної глобальним, щоб він міг отримувати доступ до об’єктів за межами функції:

global $reg_errors;
$reg_errors = new WP_Error;

  • Пам’ятаєте, я підкреслював, що ім’я користувача, пароль і адресу електронної пошти є обов’язковими полями. Щоб зробити всі правило, ми повинні перевірити, чи заповнені всі ці поля. Якщо немає, ми додаємо повідомлення про помилку в глобальний клас WP_Error:

if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
$reg_errors->add(‘field’, ‘Required form field is missing’);
}

  • Ми також перевіряємо наявність в імені користувача не менше 4 символів:

if ( 4 > strlen( $username ) ) {
$reg_errors->add( ‘username_length’, ‘Username too short. At least 4 characters is required’ );
}

  • Перевіряємо, чи вільно введене ім’я користувача:

if ( username_exists( $username ) )
$reg_errors->add(‘user_name’, ‘Sorry, that username already exists!’);

  • За допомогою функції WordPress validate_username перевіряємо валідність ім’я користувача:

if ( ! validate_username( $username ) ) {
$reg_errors->add( ‘username_invalid’, ‘Sorry, the username you entered is not valid’ );
}

  • Перевіряємо, чи пароль більш ніж з 5 символів:

if ( 5 > strlen( $password ) ) {
$reg_errors->add( ‘password’, ‘Password length must be greater than 5’ );
}

  • Перевіряємо валідність адреси електронної пошти:

if ( !is_email( $email ) ) {
$reg_errors->add( ’email_invalid’, ‘Email is not valid’ );
}

  • Перевіряємо, чи не був вже зареєстрований на цю адресу електронної пошти:

if ( email_exists( $email ) ) {
$reg_errors->add( ’email’, ‘Email Already in use’ );
}

  • Якщо поле адреси сайту заповнено, перевіряємо його валідність:

if ( ! empty( $website ) ) {
if ( ! filter_var( $сайті, FILTER_VALIDATE_URL ) ) {
$reg_errors->add( ‘сайті’, ‘Website is not a valid URL’ );
}
}

  • Нарешті пропускаємо через цикл помилки в нашому об’єкті WP_Error і виводимо всі виявлені помилки:

if ( is_wp_error( $reg_errors ) ) {
foreach ( $reg_errors->get_error_messages() as $error ) {
echo’
‘;
echo ‘ERROR:’;
echo $error . ‘
‘;
echo’
‘;
}
}

Ми закінчили з кодом функції валідації.

Наступна функція нашого плагіна complete_registration(), вона обробляє реєстрацію користувача.

Реєстрація користувача фактично здійснюється за допомогою функції wp_insert_user, вона приймає масив даних користувача:

function complete_registration() {
global $reg_errors, $username, $password, $email, $сайті, $first_name, $last_name, $nickname, $bio;
if ( 1 > count( $reg_errors->get_error_messages() ) ) {
$userdata = array(
‘user_login’ => $username,
‘user_email’ => $email,
‘user_pass’ => $password,
‘user_url’ => $website,
‘first_name’ => $first_name,
‘last_name’ => $last_name,
‘nickname’ => $nickname,
‘description’ => $bio,
);
$user = wp_insert_user( $userdata );
echo ‘Реєстрація завершена. Перейдіть на login page.’;
}
}

У наведеній вище функції complete_registration() ми зробили екземпляр об’єкта $reg_errors — WP_Error і змінні полів форми глобальними, щоб ми могли звертатися до змінних глобально.

Потім ми перевіряємо, чи містить екземпляр об’єкта обробки помилок $reg_errors помилки. Якщо помилок не виявлено, ми переходимо до заповнення масиву $userdata і додаємо реєстраційні дані користувача до бази даних WordPress, а також виводимо повідомлення «Реєстрація завершена» з посиланням на сторінку входу.

Далі у нас йде супер функція custom_registration_function(), яка призводить всі створені нами раніше функції в дію:

function custom_registration_function() {
if ( isset($_POST[‘submit’] ) ) {
registration_validation(
$_POST[‘username’],
$_POST[‘password’],
$_POST[’email’],
$_POST[‘website’],
$_POST[‘fname’],
$_POST[‘lname’],
$_POST[‘nickname’],
$_POST[‘bio’]
);
// перевірка безпеки введених даних
global $username, $password, $email, $сайті, $first_name, $last_name, $nickname, $bio;
$username = sanitize_user( $_POST[‘username’] );
$password = esc_attr( $_POST[‘password’] );
$email = sanitize_email( $_POST[’email’] );
$website = esc_url( $_POST[‘website’] );
$first_name = sanitize_text_field( $_POST[‘fname’] );
$last_name = sanitize_text_field( $_POST[‘lname’] );
$nickname = sanitize_text_field( $_POST[‘nickname’] );
$bio = esc_textarea( $_POST[‘bio’] );
// виклик @function complete_registration, щоб створити користувача
// тільки якщо не виявлено WP_error
complete_registration(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}
registration_form(
$username,
$password,
$email,
$website,
$first_name,
$last_name,
$nickname,
$bio
);
}

Дозвольте мені пояснити код функції custom_registration_function().

По-перше, ми визначаємо, відправлена форма, перевіряючи, чи встановлено $_POST[‘submit’]. Якщо форма була відправлена, ми викликаємо функцію registration_validation для перевірки наданих користувачем даних.

Потім ми перевіряємо безпека даних форми і призначаємо перевірені дані змінним у відповідності з іменами полів форми. Нарешті, ми викликаємо complete_registration для реєстрації користувача.

Ми повинні викликати функцію registration_form для виведення форму реєстрації.

Пам’ятаєте, я згадав, що ми забезпечимо підтримку шорткода для реєстрації плагіна? Нижче наведено код підтримки шорткода:

// Реєструємо новий шорткод: [cr_custom_registration]
add_shortcode( ‘cr_custom_registration’, ‘custom_registration_shortcode’ );
// Зворотний виклик функції, яка замінить [book]
function custom_registration_shortcode() {
ob_start();
custom_registration_function();
return ob_get_clean();
}

Ми закінчили з кодом плагіна. Нижче наведено зображення, що показує, як повинна виглядати форма реєстрації.

Зверніть увагу, що форма на вашому сайті може відрізнятися від зображення, для цього вам потрібно буде застосувати інші стилі:

Створення плагіна користувальницької форми реєстрації на WordPress

Використання плагіна

Для реалізації плагіна в запису або на сторінці WordPress використовуйте шорткод [cr_custom_registration].
Для реалізації форми реєстрації у визначеному місці вашої теми, додайте наступний тег шаблону .

Файл плагіна ви можете завантажити тут.

Висновок

У цій статті ми розглянули процес створення плагіна, який додає форму реєстрації WordPress. В подальшому ви можете розширити її, включити додаткові поля, такі як роль користувача, обліковий запис AOL IM, але переконайтеся, що дані поля форми є валідними для мета wp_insert_user.

Якщо у вас є питання та пропозиції, дайте мені знати в коментарях!

Переклад статті «Creating a Custom WordPress Registration Form Plugin» був підготовлений дружною командою проекту Сайтостроение від А до Я.

ОСТАВЬТЕ ОТВЕТ

Please enter your comment!
Please enter your name here