Більше результатів...

Загальні селектори
Тільки точні збіги
Шукати у заголовках
Шукати у контенті
Вибір типів постів
Фільтрувати за категоріями
FAQ
Hostenko
Натхнення
Відео уроки
Новини
Плагіни
теми
Уроки
Хакі

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

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

inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!

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

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

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

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

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

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

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

  • Ім'я користувача
  • пароль
  • електронна пошта
  • 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 )  {
  1. Використовуємо клас WP_Error і робимо змінну глобальної, щоб вона могла служити як доступ за рамками функції.
    global $reg_errors;
    $reg_errors = new WP_Error;
  1. Пам'ятайте, ми говорили про те, що нам потрібні ім'я користувача, пароль і e-mail, і що їх не можна упускати? Так от, до цього правила ми додамо ще перевірку всіх цих полів, чи є вони порожніми. Якщо вони не заповнені, то ми додаємо повідомлення про помилку до глобального класу WP_Error.
    if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
        $reg_errors->add('field', 'Required form field is missing');
    }
  1. Перевіряємо кількість символів у імені користувача. Воно має складатися не менше ніж із 4-х символів.
    if ( 4 > strlen( $username ) ) {
        $reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );
    }
  1. Перевіряємо, чи існує вже такий користувач із введеним ім'ям у системі.
    if ( username_exists( $username ) )
        $reg_errors->add('user_name', 'Sorry, that username already exists!');
  1. Використовуємо функцію WordPress validate_username, Щоб переконатися, що ім'я користувача є допустимим.
    if ( ! validate_username( $username ) ) {
        $reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );
    }
  1. Перевіряємо, що введений користувачем пароль складається не менше ніж з 5 символів.
    if ( 5 > strlen( $password ) ) {
            $reg_errors->add( 'password', 'Password length must be greater than 5' );
        }
  1. Перевіряємо, чи правильно введено e-mail.
    if ( !is_email( $email ) ) {
        $reg_errors->add( 'email_invalid', 'Email is not valid' );
    }
  1. Перевіряємо, що запроваджений e-mail ще не був зареєстрований раніше.
    if ( email_exists( $email ) ) {
        $reg_errors->add( 'email', 'Email Already in use' );
    }
  1. Якщо введено адресу сайту, перевіряємо, що він є дійсним.
    if ( ! empty( $website ) ) {
        if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
            $reg_errors->add( 'website', 'Website is not a valid URL' );
        }
    }
  1. І, нарешті, за допомогою циклу перевіряємо на наявність помилок приклад 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

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

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

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

<?php custom_registration_function(); ?>

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

Висновок

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

Джерело: code.tutsplus.com
inet.ws - Powerful VPS Hosting в США, Canada, UK та DE!
Олексій Шевченко
редактор wpcafe
Вивчає сайтобудування з 2008 року. Практикуючий вебмайстер, який спеціалізується на створенні сайтів на WordPress. Задати питання Олексію можна на https://profiles.wordpress.org/wpthemeus/

Коментарі до запису: 19

Elena_88888:

А як користувачеві прикріпити свою аватарку?
Тільки про граватора не говоріть! Він не працює - викидає на Вордпрес, а від них другий день весь пароль запитую - тож ні фіга!

Денис:

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

Денис:

А з відновленням пароля як бути?

Ярослав:

велике спасибі

Ілля:

У вас хуйняк у коді вийшов. Чи мені здалося….

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 login page.';
}
}

Фред:

а мені здається, що ти сам хуйня. це так чи мені здалося….))))

Денис:

на жаль - але плагін потребує доопрацювання, до речі, ви не пробували писати плагіни дотримуючись mvc архітектури? на wordpresse це взагалі практикується?

Руслан:

Вітання! Скажіть, будь ласка, чи можна з форми реєстрації прибрати поле з поштою, а залишити лише Ім'я та Телефон. Поле Телефон використовувати замість логіну?

Кенні:

email прибрати можна.

Оксана:

Вітаю Вас, а російською є цей плагін?

Енді:

Там начебто не проблематично перекласти текст, а код у будь-якому випадку пишеться англійською))

александр:

форма тупо реєструє користувача. як щодо відправки користувачеві листа про успішну реєстрацію?

Алекс:

Дякую за статтю. Однак не знайшов відповіді на своє головне запитання — Як додати користувальницьку угоду та «галочку» її прийняття?
У коментах знайшов, що цей спосіб не сповіщає користувача про завершення реєстрації – теж хвилює.
І ще, пароль добре генерується WordPress - чи не можна цю функцію до форми прикріпити?

Олексій:

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

прибуття:

Вітаю!
Зробив форму по даному мануалу, все чітко працює. А як вивести ці поля до адмінки?

Борис:

Таке питання. Роблю реєстрацію у модальному вікні. Після натискання на реєструватися сторінка оновлюється, і природно пропадає модальне вікно. І тільки потім коли відкриваємо його, тобто повідомлення про те, що ми успішно зареєструвалися.

Питання: Як зробити, щоб не перезавантажувалася сторінка?

виктор:

У такому випадку Ajax краще використовувати. Без перезавантаження сторінки

виктор:

використовуйте Ajax форми, що їх мало що

Додати коментар або відгук