Advertisement
  1. Code
  2. WordPress

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

Scroll to top
Read Time: 10 min

Ukrainian (українська мова) translation by Andy Yur (you can also view the original English article)

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

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

Форма реєстрації за замовчуванням складається тільки з двох полів форми - ім'я користувача та адресу електронної пошти.

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

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

Це особливо корисно на веб-сайті з багатьма авторами, наприклад Tuts +.

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

  • користувач
  • пароль
  • e-mail
  • посилання до веб-сайту
  • Ім'я
  • Призвище
  • нік
  • біографія (або щоб схоже)

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

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

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

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

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

Преміум опція

У цьому навчальному посібнику ви навчитеся створювати плагін з нуля, але якщо ви шукаєте швидке рішення з підтримкою plug-and-play, спробуйте плагін WordPress Registration Form на Envato Market. Ви можете встановити широкий діапазон полів реєстрації з контролем валідації. Як тільки реєстрація буде завершена, електронного листа буде відправлено новому учаснику з його реєстраційними даними. Шаблони електронної пошти можуть бути змінені для реєстрації, зміни пароля і т. д.

WordPress Registration Form plugin on Envato MarketWordPress Registration Form plugin on Envato MarketWordPress Registration Form plugin on Envato Market
WordPress Registration Form плагін на Envato Market

Інший варіант - розмістити замовлення на Envato Studio. Ви можете вибрати відповідну людину з широкого кола розробників плагинів для WordPress. Потім ви відправляєте заявку і дозволяєте розробнику створювати ваш плагін в узгоджені терміни.

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

Ви отримаєте:

  • призначений для користувача віджет, якщо він потрібен
  • призначений для користувача шорткод, якщо він потрібен
  • призначений для користувача тип повідомлення, якщо він потрібен
  • надійне обслуговування
Custom WordPress Plugin DevelopmentCustom WordPress Plugin DevelopmentCustom WordPress Plugin Development
Розробка користувальницького WordPress плагіна

Повний сервіс коштує всього 300 доларів, а ваш плагін буде готовий через 10 днів. Alisaleem252 має рейтинг схвалення 98% від попередніх клієнтів. Так чому б не спробувати його популярну Custom WordPress Plugin Development!

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

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

1
<?php
2
/*

3
  Plugin Name: Custom Registration

4
  Plugin URI: https://code.tutsplus.com

5
  Description: Updates user rating based on number of posts.

6
  Version: 1.0

7
  Author: Agbonghama Collins

8
  Author URI: http://tech4sky.com

9
 */

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

1
function registration_form( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio ) {
2
    echo '

3
    <style>

4
    div {

5
      margin-bottom:2px;

6
	}

7
	

8
	input{

9
		margin-bottom:4px;

10
	}

11
	</style>

12
	';
13
14
    echo '

15
    <form action="' . $_SERVER['REQUEST_URI'] . '" method="post">

16
	<div>

17
	<label for="username">Username <strong>*</strong></label>

18
	<input type="text" name="username" value="' . ( isset( $_POST['username'] ) ? $username : null ) . '">

19
	</div>

20
	

21
	<div>

22
	<label for="password">Password <strong>*</strong></label>

23
	<input type="password" name="password" value="' . ( isset( $_POST['password'] ) ? $password : null ) . '">

24
	</div>

25
	

26
	<div>

27
	<label for="email">Email <strong>*</strong></label>

28
	<input type="text" name="email" value="' . ( isset( $_POST['email']) ? $email : null ) . '">

29
	</div>

30
	

31
	<div>

32
	<label for="website">Website</label>

33
	<input type="text" name="website" value="' . ( isset( $_POST['website']) ? $website : null ) . '">

34
	</div>

35
	

36
	<div>

37
	<label for="firstname">First Name</label>

38
	<input type="text" name="fname" value="' . ( isset( $_POST['fname']) ? $first_name : null ) . '">

39
	</div>

40
	

41
	<div>

42
	<label for="website">Last Name</label>

43
	<input type="text" name="lname" value="' . ( isset( $_POST['lname']) ? $last_name : null ) . '">

44
	</div>

45
	

46
	<div>

47
	<label for="nickname">Nickname</label>

48
	<input type="text" name="nickname" value="' . ( isset( $_POST['nickname']) ? $nickname : null ) . '">

49
	</div>

50
	

51
	<div>

52
	<label for="bio">About / Bio</label>

53
	<textarea name="bio">' . ( isset( $_POST['bio']) ? $bio : null ) . '</textarea>

54
	</div>

55
	<input type="submit" name="submit" value="Register"/>

56
	</form>

57
	';
58
}

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

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

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

Реєстраційна форма не буде завершена, поки ви не перевірите і не очистите введені користувачем дані. В результаті ми створимо функцію перевірки з ім'ям registration_validation.

Щоб полегшити перевірку, ми будемо використовувати клас WordPress WP_Error. Слідуйте за мною, коли ми закодируем функцію перевірки:

  1. Створіть функцію і передайте поле реєстрації в якості аргументу функції.
    1
    function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio )  {
    
  2. Створіть екземпляр класу WP_Error і зробіть глобальну змінну примірника, щоб вона могла бути доступна за межами області дії функції.
    1
    global $reg_errors;
    
    2
    $reg_errors = new WP_Error;
    
  3. Пам'ятайте: ми сказали, що ім'я користувача, пароль і адресу email є обов'язковими і не повинні бути опущені. Щоб забезпечити дотримання цього правила, нам потрібно перевірити, чи не порожньо чи одне з полів. Якщо порожньо, ми додаємо повідомлення про помилку в глобальний клас WP_Error.
    1
    if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
    
    2
        $reg_errors->add('field', 'Required form field is missing');
    
    3
    }
    
  4. Ми також перевіряємо, щоб число символів імені користувача не було менше 4.
    1
    if ( 4 > strlen( $username ) ) {
    
    2
        $reg_errors->add( 'username_length', 'Username too short. At least 4 characters is required' );
    
    3
    }
    
  5. Перевірте, чи зареєстрована ім'я користувача.
    1
    if ( username_exists( $username ) )
    
    2
        $reg_errors->add('user_name', 'Sorry, that username already exists!');
    
  6. Використовуйте служби WordPress validate_username, щоб переконатися, що ім'я користувача дійсно.
    1
    if ( ! validate_username( $username ) ) {
    
    2
        $reg_errors->add( 'username_invalid', 'Sorry, the username you entered is not valid' );
    
    3
    }
    
  7. Переконайтеся, що пароль, введений користувачами, не менше 5 символів.
    1
    if ( 5 > strlen( $password ) ) {
    
    2
            $reg_errors->add( 'password', 'Password length must be greater than 5' );
    
    3
        }
    
  8. Перевірте, чи валідна електрона скриня.
    1
    if ( !is_email( $email ) ) {
    
    2
        $reg_errors->add( 'email_invalid', 'Email is not valid' );
    
    3
    }
    
  9. Перевірте, чи була зареєстрована поштова скриня раніше.
    1
    if ( email_exists( $email ) ) {
    
    2
        $reg_errors->add( 'email', 'Email Already in use' );
    
    3
    }
    
  10. Якщо поле веб-сайту заповнене, перевірте, чи дійсно воно.
    1
    if ( ! empty( $website ) ) {
    
    2
        if ( ! filter_var( $website, FILTER_VALIDATE_URL ) ) {
    
    3
            $reg_errors->add( 'website', 'Website is not a valid URL' );
    
    4
        }
    
    5
    }
    
  11. Нарешті, ми перебираємо помилки в нашому екземплярі WP_Error і відображаємо окрему помилку.
    1
    if ( is_wp_error( $reg_errors ) ) {
    
    2
    3
        foreach ( $reg_errors->get_error_messages() as $error ) {
    
    4
        
    
    5
            echo '<div>';
    
    6
            echo '<strong>ERROR</strong>:';
    
    7
            echo $error . '<br/>';
    
    8
            echo '</div>';
    
    9
            
    
    10
        }
    
    11
    12
    }
    
    Ми закінчили кодування функції перевірки.

Далі йде функція complete_registration() плагіна, яка обробляє реєстрацію користувача.
Реєстрація користувача фактично виконується функцією wp_insert_user, яка приймає масив призначених для користувача даних.

1
function complete_registration() {
2
    global $reg_errors, $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
3
    if ( 1 > count( $reg_errors->get_error_messages() ) ) {
4
        $userdata = array(
5
        'user_login'    => 	$username,
6
        'user_email' 	=> 	$email,
7
        'user_pass' 	=> 	$password,
8
        'user_url' 		=> 	$website,
9
        'first_name' 	=> 	$first_name,
10
        'last_name' 	=> 	$last_name,
11
        'nickname' 		=> 	$nickname,
12
        'description' 	=> 	$bio,
13
		);
14
        $user = wp_insert_user( $userdata );
15
        echo 'Registration complete. Goto <a href="' . get_site_url() . '/wp-login.php">login page</a>.';   
16
	}
17
}

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

Потім ми перевіряємо, чи містить екземпляр обробки $reg_errors помилки. Якщо помилку не виявлено, ми переходимо до заповнення масиву $userdata і введення даних реєстрації користувача в базу даних WordPress і відобразиться Registration Complete з посиланням на сторінку входу.

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

1
function custom_registration_function() {
2
    if ( isset($_POST['submit'] ) ) {
3
        registration_validation(
4
        $_POST['username'],
5
        $_POST['password'],
6
        $_POST['email'],
7
        $_POST['website'],
8
        $_POST['fname'],
9
        $_POST['lname'],
10
        $_POST['nickname'],
11
        $_POST['bio']
12
    	);
13
		
14
		// sanitize user form input

15
        global $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio;
16
        $username	= 	sanitize_user( $_POST['username'] );
17
        $password 	= 	esc_attr( $_POST['password'] );
18
        $email 		= 	sanitize_email( $_POST['email'] );
19
        $website 	= 	esc_url( $_POST['website'] );
20
        $first_name = 	sanitize_text_field( $_POST['fname'] );
21
        $last_name 	= 	sanitize_text_field( $_POST['lname'] );
22
        $nickname 	= 	sanitize_text_field( $_POST['nickname'] );
23
        $bio 		= 	esc_textarea( $_POST['bio'] );
24
25
		// call @function complete_registration to create the user

26
		// only when no WP_error is found

27
        complete_registration(
28
        $username,
29
        $password,
30
        $email,
31
        $website,
32
        $first_name,
33
        $last_name,
34
        $nickname,
35
        $bio
36
		);
37
    }
38
39
    registration_form(
40
    	$username,
41
        $password,
42
        $email,
43
        $website,
44
        $first_name,
45
        $last_name,
46
        $nickname,
47
        $bio
48
		);
49
}

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

Спочатку ми визначаємо, чи була надана форма, перевіряючи, чи встановлений $_POST [ 'submit']. Якщо форма була відправлена, ми викликаємо функцію registration_validation для перевірки відправленої користувачем форми.

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

Нам потрібно викликати функцію registration_form, щоб відобразити реєстраційну форму.

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

1
// Register a new shortcode: [cr_custom_registration]

2
add_shortcode( 'cr_custom_registration', 'custom_registration_shortcode' );
3
4
// The callback function that will replace [book]

5
function custom_registration_shortcode() {
6
    ob_start();
7
    custom_registration_function();
8
    return ob_get_clean();
9
}

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

Зверніть увагу, що у вас може не вийти точно такий же зовнішній вигляд на вашому сайті WordPress в результаті відмінності стилів CSS.

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

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

Щоб впровадити реєстраційну форму в певному аспекті вашої теми, додайте наступний тег шаблону - <?php custom_registration_function(); ?>.
Ви можете отримати файл плагіна з вкладення до цієї статті.

Резюме

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

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

Пам'ятайте, що якщо ви з усіх сил намагалися дотримуватися цього керівництву, а хочете просте рішення, спробуйте плагін WordPress Registration Form на Envato Market.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.