Створюємо кастомну форму реєстрації користувачів на WordPress

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

| Завантажити готовий плагін форми |

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

Дивіться також:

• Як додати форму реєстрації на WordPress-сайт
• Робота з контентом та реєстрація користувачів за допомогою Gravity Forms
• Як створити свою сторінку авторизації для WordPress
• 15 корисних плагінів для авторизації на WordPress сайті

Стандартна реєстраційна форма складається лише з двох полів – імені користувача та e-mail.

Наявність лише двох полів у реєстраційній формі для заповнення робить процес реєстрації дуже простим. Спочатку ви вводите ім'я користувача та поштову адресу, після чого пароль для входу на сайт автоматично надходить до вас на e-mail. Потім ви входите на сайт, використовуючи надісланий вам пароль, заповнюєте свій профіль і змінюєте пароль на новий, який самі придумаєте та легко зможете запам'ятати.

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

І сьогодні ми створюватимемо WordPress-плагін для кастомної реєстраційної форми з використанням наступних полів:

• Ім'я користувача
• пароль
• e-mail
• URL-адреса сайту
• ім'я
• прізвище
• нікнейм
• Особиста інформація

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

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

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

Перед тим, як ми приступимо до створення плагіна, варто зазначити, що нам потрібні поля з ім'ям користувача, паролем та e-mail.

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

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

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

<?php
/*
  Plugin Name: Custom Registration
  Plugin URI: http://code.tutsplus.com
  Description: Updates user rating based on number of posts.
  Version: 1.0
  Author: Agbonghama Collins
  Author URI: http://tech4sky.com
 */

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

function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
    echo '
    <style>
    div {
        margin-bottom:2px;
    }
     
    input{
        margin-bottom:4px;
    }
    </style>
    ';
 
    echo '
    <form action="' . $_SERVER['REQUEST_URI'] . '" method="post">
    <div>
    <label for="username">Username <strong>*</strong></label>
    <input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">
    </div>
     
    <div>
    <label for="password">Password <strong>*</strong></label>
    <input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">
    </div>
     
    <div>
    <label for="email">Email <strong>*</strong></label>
    <input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">
    </div>
     
    <div>
    <label for="website">Website</label>
    <input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">
    </div>
     
    <div>
    <label for="firstname">First Name</label>
    <input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">
    </div>
     
    <div>
    <label for="website">Last Name</label>
    <input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">
    </div>
     
    <div>
    <label for="nickname">Nickname</label>
    <input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">
    </div>
     
    <div>
    <label for="bio">About / Bio</label>
    <textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>
    </div>
    <input type="submit" name="submit" value="Register"/>
    </form>
    ';
}

Ви звернули увагу, що в цій функції реєстраційне поле було додано як змінну?

У функції ви побачите приклади наступного коду:

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

Така конструкція перевіряє складові всього рядка. $ _ POST, Щоб переконатися, що форма містить необхідні значення. Якщо це, він заповнює поля форми цими значеннями, щоб позбавити користувача від повторного входу у полі введення.

Заповнені поля у реєстраційній формі мають бути перевірені. Для цього ми створимо функцію перевірки під назвою registration_validation.

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

Далі слідуйте цим крокам:

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

   function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio )  {

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

   global $reg_errors;
   $reg_errors = new WP_Error;

3. Пам'ятайте, ми говорили про те, що нам потрібні ім'я користувача, пароль і e-mail, і що їх не можна упускати? Так от, до цього правила ми додамо ще перевірку всіх цих полів, чи є вони порожніми. Якщо вони не заповнені, то ми додаємо повідомлення про помилку до глобального класу WP_Error.

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

4. Перевіряємо кількість символів у імені користувача. Воно має складатися не менше ніж із 4-х символів.

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

5. Перевіряємо, чи існує вже такий користувач із введеним ім'ям у системі.

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

6. Використовуємо функцію WordPress validate_username, Щоб переконатися, що ім'я користувача є допустимим.

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

7. Перевіряємо, що введений користувачем пароль складається не менше ніж з 5 символів.

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

8. Перевіряємо, чи правильно введено e-mail.

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

9. Перевіряємо, що запроваджений e-mail ще не був зареєстрований раніше.

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

10. Якщо введено адресу сайту, перевіряємо, що він є дійсним.

    if ( ! empty( $website ) ) {
        if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
            $reg_errors->add( 'website', 'Website is not a valid URL' );
        }
    }

11. І, нарешті, за допомогою циклу перевіряємо на наявність помилок приклад WP_Error і відображаємо окремо кожну з них, якщо такі є.

    if ( is_wp_error( $reg_errors ) ) {
     
        foreach ( $reg_errors->get_error_messages() as $error ) {
         
            echo '<div>';
            echo '<strong>ERROR</strong>:';
            echo $error . '<br/>';
            echo '</div>';
             
        }
     
    }

От і все! У цьому код функції завершено.

complete_registration()

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

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

function complete_registration() {
    global $reg_errors, $username, $password, $email, $website, $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 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';   
    }
}

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

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

custom_registration_function()

На черзі у нас чудова функція 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']
        );
         
        // sanitize user form input
        global $username, $password, $email, $website, $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'] );
 
        // call @function complete_registration to create the user
        // only when no WP_error is found
        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 відображає реєстраційну форму.

Шорткод

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

// Register a new shortcode: [cr_custom_registration]
add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );
 
// The callback function that will replace [book]
function custom_registration_shortcode() {
    ob_start();
    custom_registration_function();
    return ob_get_clean();
}

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

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

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

Щоб додати плагін до посту або на сторінку WordPress, використовуйте шорткод [cr_custom_registration].

Для додавання реєстраційної форми в певному місці сайту в темі, яку ви використовуєте, додайте наступний тег шаблону:

<?php custom_registration_function(); ?>

Готовий файл плагіна можна отримати за посиланням на початку посту.

Висновок

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

Джерело: code.tutsplus.com

Олексій Шевченко

редактор wpcafe

Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, що спеціалізується на створенні сайтів WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/