Tạo một Plugin Form Đăng ký Tuỳ biến trong WordPress

() translation by (you can also view the original English article)

Mặc định, WordPress cung cấp một form đăng ký tùy biến có thể được sử dụng để thiết lập một người dùng mới, hoặc để thêm một người dùng mới khi thêm chúng vào một cài đặt WordPress hiện có. Nhưng nếu bạn muốn cài đặt một form đăng ký tùy biến mà không kết xuất các tùy chọn trong Dashboard của WordPress thì sao?

Trong hướng dẫn này, chúng ta sẽ học cách tạo ra một form đăng ký tuỳ biến trong WordPress bằng cách kết hợp các template tag và các shortcode.

Form đăng ký mặc định chỉ gồm hai trường - usename và email.

Chỉ có username và email cho phép quá trình đăng ký trở nên dễ dàng. Trước tiên, bạn nhập username và email của bạn sau đó một mật khẩu sẽ được gửi cho bạn. Tiếp theo, bạn đăng nhập vào trang web với mật khẩu và sau đó hoàn tất hồ sơ của bạn và thay đổi mật khẩu thành một cái gì đó dễ nhớ.

Thay vì làm cho người dùng trải qua các bước căng thẳng khi chỉ để đăng ký trong trang web của bạn, tại sao không cung cấp một form đăng ký trực tiếp với một vài trường bổ sung quan trọng ngoài username và email chẳng hạn như password, URL tới trang web của họ, tiểu sử, nickname, tên của họ.

Điều này đặc biệt hữu ích trong một trang web có nhiều tác giả như Tuts+.

Trong bài này, chúng ta sẽ xây dựng một plugin form đăng ký tùy biến với các trường sau đây:

username
password
email
URL của trang web
first name
last name
nickname
Tiểu sử (hoặc phần About)

Form đăng ký tùy biến sau đó có thể được tích hợp vào WordPress sử dụng shortcode và template tag tương ứng.

Với shortcode, bạn có thể tạo một trang và làm cho nó thành trang đăng ký chính thức của trang web của bạn. Bạn cũng có thể sử dụng shortcode trong một bài post để người dùng có thể đăng ký vào trang web của bạn sau khi đọc một trong các bài viết.

Nếu bạn muốn thêm form đăng ký vào sidebar hoặc một vị trí cụ thể trong trang web của mình thì bạn có thể chỉnh sửa theme WordPress nhưng đặt template tag vào vị trí mong muốn.

Trước khi chúng ta bắt đầu xây dựng plugin cho form đăng ký, cần lưu ý rằng các trường username, password và email là bắt buộc.

Chúng ta sẽ ràng buộc quy tắc này khi viết hàm xác nhận của chúng ta.

Tùy chọn Cao cấp

Hướng dẫn này sẽ dạy bạn cách xây dựng plugin từ đầu, nhưng nếu bạn đang tìm kiếm một giải pháp nhanh chóng, chỉ cần cắm-và-chạy, hãy thử Plugin WordPress Registration Form trên Envato Market. Bạn có thể thiết lập một loạt các trường đăng ký với xác nhận. Sau khi đăng ký xong, một email được gửi đến thành viên mới với các chi tiết đăng nhập của họ. Các template email có thể được sửa đổi để đăng ký, thay đổi mật khẩu, vân vân.

WordPress Registration Form plugin on Envato Market — Plugin WordPress Registration Form trên Envato Market

Một lựa chọn khác là chỉ cần đặt một đơn hàng trên Envato Studio. Bạn có thể chọn đúng người từ một loạt các nhà phát triển plugin WordPress có kinh nghiệm. Sau đó, bạn gửi bản tóm tắt của bạn và để cho nhà phát triển tạo plugin của bạn trong khoảng thời gian đã thoả thuận.

Ví dụ: Alisaleem252 sẽ phát triển plugin WordPress được tuỳ biến sẽ tương thích với phiên bản WordPress mới nhất và các plugin khác trong WordPress Repository theo yêu cầu của bạn.

Bạn sẽ nhận được:

widget tùy biến nếu cần thiết
shortcode tuỳ biến nếu cần thiết
custom post type nếu cần thiết
dịch vụ đáng tin cậy

Custom WordPress Plugin Development — Phát triển Plugin WordPress Tuỳ biến

Dịch vụ đầy đủ chỉ tốn 300$ và plugin của bạn sẽ sẵn sàng trong 10 ngày. Alisaleem252 có tỷ lệ chấp thuận 98% từ các khách hàng trước. Vậy tại sao không thử dịch vụ Phát triển Plugin WordPress Tuỳ biến!

Xây dựng Plugin

Với những gì đã nói, bây giờ chúng ta hãy bắt đầu code plugin. Đầu tiên, header của plugin.

<?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
 */

Tiếp theo, chúng ta tạo ra một hàm PHP có chứa code HTML của form đăng ký.

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>
	';
}

Bạn có nhận thấy trường đăng ký được truyền vào hàm ở trên như là biến? Trong code của hàm này, bạn sẽ thấy các trường hợp code sau đây, ví dụ:

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

Bộ ba toán tử đang kiểm tra nội dung của mảng $_POST toàn cục để xem form có chứa một giá trị hay không. Nếu nó có chứa một giá trị, nó sẽ nạp các trường với giá trị để lưu người dùng.

Một form đăng ký không bao giờ hoàn thành cho đến khi bạn xác nhận và sàn lọc input của người dùng. Kết quả là, chúng ta sẽ tạo một hàm xác nhận với tên registration_validation.

Để giảm công sức bỏ ra để xác nhận, chúng ta sẽ sử dụng lớp WP_Error của WordPress. Hãy theo dõi tôi khi chúng ta viết code hàm xác nhận:

Tạo hàm và truyền trường đăng ký như là đối số của hàm.

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

Khởi tạo lớp WP_Error và làm cho biến đối tượng thành biến toàn cục để nó có thể được truy cập bên ngoài phạm vi của hàm.
1

global $reg_errors;
2

$reg_errors = new WP_Error;
Hãy nhớ rằng: Chúng ta đã nói username, password và email là bắt buộc và không được để trống. Để áp dụng quy tắt, chúng ta cần phải kiểm tra xem có bất kỳ trường nào trống không. Nếu trống, chúng ta nối thông báo lỗi vào lớp WP_Error toàn cục.
1

if ( empty( $username ) || empty( $password ) || empty( $email ) ) {
2

$reg_errors->add('field', 'Required form field is missing');
3

}

Chúng ta cũng kiểm tra để đảm bảo số ký tự của username không nhỏ hơn 4.

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

Kiểm tra username đã được đăng ký hay chưa.

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

Sử dụng các dịch vụ của hàm validate_username trong WordPress để đảm bảo rằng username là hợp lệ.

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

Đảm bảo rằng password được nhập bởi người dùng không ít hơn 5 ký tự.

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

Kiểm tra xem email có phải là một email hợp lệ hay không.

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

Kiểm tra xem email đã được đăng ký hay chưa.

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

Nếu trường website đã được điền, hãy kiểm tra xem nó có hợp lệ hay không.

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

Cuối cùng, chúng ta lặp qua các lỗi trong đối tượng WP_Error của chúng ta và hiển thị từng lỗi.

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>';
        
    }

}

Chúng ta đã viết code xác nhận xong.

Tiếp theo là hàm complete_registration() của plugin để xử lý việc đăng ký người dùng.
Việc đăng ký người dùng thật sự được thực hiện bởi hàm wp_insert_user, nó chấp nhận một mảng dữ liệu người dùng.

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

Trong hàm complete_registration() ở trên, chúng ta đã tạo ra đối tượng của WP_Error là $reg_errors và các biến của trường thành toàn cục để chúng ta có thể truy cập vào biến trên phạm vi toàn cục.

Sau đó chúng ta kiểm tra đối tượng xử lý lỗi $reg_errors có chứa bất kỳ lỗi nào không. Nếu không tìm thấy lỗi, chúng ta tiến hành nhập mảng $userdata và chèn các chi tiết đăng ký người dùng vào cơ sở dữ liệu WordPress và hiển thị một thông báo Registration Complete với một liên kết đến trang đăng nhập.

Kế tiếp, là hàm super__registration_function() đưa vào sử dụng tất cả các hàm mà chúng ta đã tạo ra ở trên.

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
		);
}

Để tôi giải thích code trong hàm custom_registration_function().

Trước hết, chúng ta xác định xem form đã được submit hay chưa bằng cách kiểm tra $_POST['submit'] có được thiết lập hay chưa. Nếu form đã được submit, chúng ta gọi hàm registration_validation để xác nhận form.

Sau đó chúng ta sàng lọc dữ liệu form và thiết lập dữ liệu sàng lọc vào một biến được đặt tên sau trường. Cuối cùng, chúng ta gọi complete_registration để đăng ký người dùng.

Chúng ta cần gọi hàm register_form để hiển thị form đăng ký.

Còn nhớ là tôi đã đề cập rằng chúng ta sẽ cung cấp hỗ trợ shortcode cho plugin đăng ký chứ? Dưới đây là code hỗ trợ cho shortcode.

// 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();
}

Tại thời điểm này, chúng ta đã viết xong code cho plugin. Dưới đây là hình ảnh của form đăng ký.

Lưu ý rằng giao diện có thể không hoàn toàn giống trên trang WordPress của bạn do kết quả của phong cách CSS khác nhau.

Sử dụng Plugin

Để triển khai plugin trong một bài post hoặc page trong WordPress, hãy sử dụng shortcode [cr_custom_registration].

Để triển khai form đăng ký trong một khía cạnh cụ thể của theme, hãy thêm template tag sau đây - <?php custom_registration_function(); ?>
Bạn có thể tải về tập tin plugin từ tập tin đính kèm trong bài viết này.

Tóm lại

Trong bài này, chúng tôi đã hướng dẫn bạn quá trình tạo một plugin bổ sung một form đăng ký tuỳ biến cho WordPress. Bạn có thể mở rộng thêm form đăng ký để bao gồm các trường bổ sung chẳng hạn như user role, tài khoản AOL IM, nhưng đảm bảo rằng trường của form là một meta-data hợp lệ cho wp_insert_user.

Nếu bạn có bất kỳ câu hỏi và đề xuất nào, hãy cho tôi biết trong phần bình luận nhé!

Hãy nhớ rằng nếu bạn gặp khó khăn khi làm theo hướng dẫn này và bạn muốn một giải pháp đơn giản, hãy thử WordPress Registration Form trên Envato Market.