Создание пользовательского плагина для формы регистрации в WordPress

Russian (Pусский) translation by Yuri Yuriev (you can also view the original English article)

В готовом виде WordPress предоставляет настраиваемую регистрационную форму для регистрации или добавления нового пользователя при добавлении в существующую установку WordPress. Но что, если вы хотите реализовать пользовательскую регистрационную форму, которая не отображает параметры в панели инструментов WordPress?

В этом уроке мы узнаем, как создать пользовательскую регистрационную форму в WordPress, используя комбинацию тегов шаблона и шорткодов.

Форма регистрации по умолчанию состоит только из двух полей формы - имя пользователя и адрес электронной почты.

Наличие только поля имени пользователя и электронной почты делает процесс регистрации невероятно простым. Сначала вы вводите свое имя пользователя и адрес электронной почты, после чего вам будет отправлен пароль. Затем вы заходите на сайт с паролем, заполняете свой профиль и меняете пароль на что-то запоминающееся.

Вместо того, чтобы заставлять пользователя проходить через такие стрессы только для регистрации на вашем сайте, почему бы не предоставить прямой доступ к форме, состоящей из некоторых полей в дополнение к имени пользователя по умолчанию и электронной почте, например, пароль, URL-адрес своего веб-сайта, биография, псевдоним и их имя и фамилия.

Это особенно полезно на веб-сайте со многими авторами, например Tuts +.

В этой статье мы создадим пользовательский плагин регистрационной формы со следующими полями:

имя пользователя
пароль
адрес email
веб-сайт URL
имя
фамилия
ник
биография (или около раздела)

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

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

Если вы хотите добавить регистрационную форму на боковую панель или определённое место на вашем веб-сайте, можете редактировать тему WordPress, но помещая тег шаблона в нужное место.

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

Мы будем применять это правило при написании нашей функции валидации.

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

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

WordPress Registration Form plugin on Envato Market — WordPress Registration Form плагин на Envato Market

Другой вариант - разместить заказ на Envato Studio. Вы можете выбрать подходящего человека из широкого круга WordPress plugin developers. Затем вы отправляете заявку и разрешаете разработчику создавать ваш плагин в согласованные сроки.

Например, Alisaleem252 разработает настроенный плагин WordPress, который будет совместим с последней версией WordPress и другими плагинами в репозитории WordPress в соответствии с вашими требованиями.

Вы получите:

пользовательский виджет, если он нужен
пользовательский шорткод, если он нужен
пользовательский тип сообщения, если он нужен
надёжное обслуживание

Custom WordPress Plugin Development — Разработка пользовательского WordPress плагина

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

Создание плагина

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

<?php
/*
  Plugin Name: Custom Registration
  Plugin URI: https://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. Следуйте за мной, когда мы закодируем функцию проверки:

Создайте функцию и передайте поле регистрации в качестве аргумента функции.
```
function registration_validation( $username, $password, $email, $website, $first_name, $last_name, $nickname, $bio )  {
```
Создайте экземпляр класса WP_Error и сделайте глобальную переменную экземпляра, чтобы она могла быть доступна за пределами области действия функции.
```
global $reg_errors;
$reg_errors = new WP_Error;
```
Помните: мы сказали, что имя пользователя, пароль и адрес email являются обязательными и не должны быть опущены. Чтобы обеспечить соблюдение этого правила, нам нужно проверить, не пусто ли одно из полей. Если пусто, мы добавляем сообщение об ошибке в глобальный класс 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( $website, FILTER_VALIDATE_URL ) ) {
        $reg_errors->add( 'website', 'Website is not a valid URL' );
    }
}

Наконец, мы перебираем ошибки в нашем экземпляре 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 () плагина, которая обрабатывает регистрацию пользователя.
Регистрация пользователя фактически выполняется функцией 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_errors WP_Error и поля формы глобальными, чтобы мы могли обращаться к переменной в глобальной области.

Затем мы проверяем, содержит ли экземпляр обработки $ reg_errors ошибки. Если ошибка не обнаружена, мы переходим к заполнению массива $ userdata и вводу данных регистрации пользователя в базу данных WordPress и отображении сообщения Registration Complete со ссылкой на страницу входа.

Далее идет функция super 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 для проверки отправленной пользователем формы.

Затем мы зачищаем данные формы и устанавливаем данные sanitize в переменную, названную после поля формы. Наконец, мы вызываем 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].

Чтобы внедрить регистрационную форму в определенном аспекте вашей темы, добавьте следующий тег шаблона
Вы можете получить файл плагина из вложения к этой статье.

Резюме

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

Если у вас есть вопросы и предложения, дайте мне знать в комментариях!

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

Создание пользовательского плагина для формы регистрации в WordPress

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

Создание плагина

Использование плагина

Резюме

Envato Tuts+ is now part of Envato Elements

One subscription provides unlimited access to: