Hướng dẫn xây dựng trang đăng ký trong WordPress

Tiếp tục series Custom tài khoản WordPress, bài hôm nay mình sẽ tiếp tục hướng dẫn các bạn cách để tạo một trang đăng ký trong WordPress. Nếu bạn chưa xem cách xây dựng trang đăng nhập trong WordPress, hãy bắt đầu với bài viết đó trước nhé.

Tạo trang đăng ký WordPress

Vẫn như bài trước, bạn phải tạo một page mới trong WordPress. Page mới này mình sẽ đặt tiêu đề là Đăng ký và sẽ có đường dẫn là domain/dang-ky.

Sau đó bạn hãy tạo một file PHP ở theme mà bạn đang sử dụng theo cú pháp page-{slug}.php. Cụ thể trong trường hợp của mình là page-dang-ky.php.

Ngoài ra, bạn còn có thể custom page bằng phương pháp tạo Page Template. Bạn có thể xem lại video hướng dẫn tạo custom page trong wordpress này nếu chưa nắm được nhé.

Hãy thêm đoạn code dưới đây vào file PHP bạn mới vừa tạo:

<?php get_header(); ?>

<main id="site-content">
    <div class="section-inner">

        <?php
        $home_url = get_home_url();
        if ( is_user_logged_in() ) {

            echo 'Bạn đã đăng nhập rồi. <a href="'.wp_logout_url($home_url).'">Đăng xuất</a> ?';

        } else {
        ?>
            <h1>Đăng ký</h1>
            <hr>
            <form id="hk-registerform" action="<?php echo get_home_url() . '/dang-ky'; ?>">
                <?php wp_nonce_field( 'form_register' ); ?>
                <div id="hk-message"></div>
                <p style="display:none" id="hk-success">
                    Đăng ký người dùng thành công. Nhấp vào <a href="/dang-nhap">đây</a> để đăng nhập.
                </p>
                <p>
                    <input type="text" name="username" id="username" placeholder="Tên đăng nhập">
                </p>
                <p>
                    <input type="email" name="email" id="email" placeholder="Email">
                </p>
                <p>
                    <input type="password" name="password" id="password" placeholder="Mật khẩu">
                </p>
                <p>
                    <input type="password" name="repassword" id="repassword" placeholder="Xác nhận mật khẩu">
                </p>
                <p class="text-center mb-0">
                    <button class="form-submit" type="submit">Đăng ký</button>
                </p>
            </form>

        <?php } ?>

    </div>
</main>

<?php get_footer(); ?>

Đây là cấu trúc form Đăng ký bạn có thể đạt được sau khi sử dụng đoạn code trên của mình:

Vì hiện tại mình đang dùng theme twentytwenty của WordPress nên có thể giao diện sẽ khác của bạn. Đừng lo lắng nhé.

Giải thích một chút về code tạo trang đăng ký wordpress

Cũng giống như ở bài trước, mình có sử dụng câu lệnh điều kiện ở dòng 8 với mục đích là kiểm tra người dùng đã đăng nhập chưa. Bạn có thể tinh chỉnh câu lệnh điều kiện này sao cho phù hợp với bạn nhé.

Tiếp theo ở dòng 17, mình sử dụng một hàm của WordPress có tên wp_nonce_field. Đây là phương pháp bảo mật trong WordPress, hàm này sẽ xác thực rằng nội dung của form đến từ trang web hiện tại chứ không phải ở một nơi nào khác.

Để tìm hiểu kĩ hơn về phương pháp bảo mật này, bạn có thể đọc bài viết WordPress Nonce là gì? Cách để ngăn chặn một cuộc tấn công CSRF.

Còn lại, đơn giản chỉ là các thẻ HTML để tạo form đăng nhập. Bao gồm tên đăng nhập, địa chỉ email, mật khẩu, xác nhận mật khẩu.

Gửi dữ liệu lên server

Tiếp theo, để một người dùng có thể đăng ký được thì bạn phải gửi dữ liệu họ đã nhập cho phía server. Ở đây mình sẽ áp dụng luôn AJAX để gửi dữ liệu lên server. Nếu các bạn chưa biết AJAX là gì thì có thể xem các bài viết hướng dẫn về AJAX trong WordPress của mình trước nhé.

Bạn hãy thêm đoạn code này vào file footer của theme bạn đang dùng nhé. Nếu dự án bạn đã khai báo jQuery rồi thì có thể xoá dòng đầu tiên đi nha.

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
(function($){  
	$(document).ready(function(){
		var ajaxUrl = '<?php echo admin_url('admin-ajax.php'); ?>';
		$('#hk-registerform').submit(function (e) { 
			e.preventDefault();
			var data = {};
			var ArrayForm = $(this).serializeArray();
			$.each(ArrayForm, function() {
				data[this.name] = this.value;
			});
			
			$.ajax({
				type: "POST",
				url: ajaxUrl,
				data: {
					'action': 'RegisterAction',
					'userData': data
				},
				dataType: "html",
				beforeSend: function () {
				},
				success: function (response) {
					$('#hk-message')(response);
					if (response == 'success' ) {
						$("#hk-registerform")[0].reset();
						$('#hk-message').hide();
						$('#hk-success').show();
					}
				}
			});
		});
	});
})(jQuery);
</script>

Xử lý dữ liệu trên server

Sau khi dữ liệu được gửi lên phía server, thì mình sẽ tiếp tục phải xử lý chúng. Bạn hãy thêm đoạn code dưới đây vào file functions.php nhé.

add_action('wp_ajax_RegisterAction', 'hk_handle_register_form');
add_action('wp_ajax_nopriv_RegisterAction', 'hk_handle_register_form');

function hk_handle_register_form() {
    $userData = [];
    if ( isset( $_POST['userData'] ) && is_array( $_POST['userData'] ) ) {
        $userData = $_POST['userData'];
    }

	if ( isset( $userData['_wpnonce'] ) && wp_verify_nonce( $userData['_wpnonce'], 'form_register' ) ) {
		$arr_signup = [];
		$arr_error  = [];

		if ( isset( $userData['email'] ) && $userData['email'] ) {
			$arr_signup['email'] = sanitize_text_field( $userData['email'] );

			if ( email_exists( $arr_signup['email'] ) ) {
				$arr_error['email'] = 'Địa chỉ email đã tồn tại';
			}
		} else {
			$arr_error['email'] = 'Bạn chưa nhập địa chỉ email';
		}

		if ( isset( $userData['username'] ) && $userData['username'] ) {
			$arr_signup['username'] = sanitize_text_field( $userData['username'] );

			if ( username_exists( $arr_signup['username'] ) ) {
				$arr_error['username'] = 'Username đã tồn tại';
			}
		} else {
			$arr_error['username'] = 'Bạn chưa nhập username';
		}

		if ( isset( $userData['password'] ) && $userData['password'] ) {
			$arr_signup['password'] = sanitize_text_field( $userData['password'] );
		} else {
			$arr_error['password'] = 'Bạn chưa nhập password';
		}

		if ( isset( $userData['repassword'] ) && $userData['repassword'] ) {
			$arr_signup['repassword'] = sanitize_text_field( $userData['repassword'] );

			if ( $arr_signup['password'] != $arr_signup['repassword'] ) {
				$arr_error['repassword'] = 'Xác nhận password chưa trùng nhau';
			}
		} else {
			$arr_error['repassword'] = 'Bạn chưa nhập xác nhận password';
		}


		if ( count( $arr_error ) ) {
			echo '<ul>';
			foreach ( $arr_error as $key => $error ) {
				echo '<li>'.$error.'</li>';
			}
			echo '</ul>';
		} else {
			$user_id = wp_create_user( $arr_signup['username'], $arr_signup['password'], $arr_signup['email'] );
			if ( $user_id ) {
				$arr_signup = [];
				echo 'success';
			}
		}

	}
    die(); 
}

Giải thích một chút

Ở dòng 6, lúc này mình kiểm tra xem dữ liệu có được gửi lên server chưa. Nếu đã có dữ liệu gửi lên thì mình sẽ gán dữ liệu đó vào biến $userData.

Ở dòng 10, đây là bước xác minh nonce như mình đã đề cập ở trên. Nếu xác minh nonce thành công, chúng ta mới bắt đầu đi đến bước xử lý dữ liệu.

Sau đó, mình sẽ sử dụng các câu lệnh diều kiện để kiểm tra dữ liệu đã được nhập chưa. Hoặc trường xác nhận mật khẩu và trường mật khẩu đã trùng khớp với nhau hay chưa...

Khi kiểm tra trường email thì các bạn hãy nhớ, kiểm tra xem địa chỉ email đã tồn tại trên hệ thống chưa. Ở trường hợp này minh sẽ sử dụng hàm email_exists để kiểm tra, nếu đã tồn tại thì show thông báo lỗi.

Ngoài ra, mình có sử dụng thêm hàm sanitize_text_field. Hàm này sẽ hỗ trợ bạn dọn dẹp chuỗi dữ liệu đầu vào của người dùng.

Khi tất cả dữ liệu đã được kiểm tra và hợp lệ, mình sẽ sử dụng hàm wp_create_user để tạo một người dùng mới. Hàm này sẽ nhận 3 tham số đầu vào:

• $username: Tên đăng nhập của người dùng
• $password: Mật khẩu của người dùng
• $email: Địa chỉ email của người dùng

Nếu trong tương lai bạn có nhu cầu phát triển một form đăng ký phức tạp với nhiều hơn 3 tham số đầu vào, thì bạn có thể dùng hàm wp_insert_user.

Vậy là xong. Các bạn có thể sử dụng CSS để style lại giao diện cho đẹp theo sở thích của các bạn nhé.

Lời kết

Mình hi vọng bài viết này sẽ giúp bạn hiểu rõ được bản chất của form đăng ký trong WordPress. Và từ đó các bạn có thể tha hồ xây dựng và tuỳ biến form đăng ký theo đúng nhu cầu hoặc sở thích của các bạn.

Đừng chỉ copy code của mình và áp dụng lên trang của các bạn mà không hiểu được cách mà nó hoạt động nhé. Vì đó cũng không phải là mục tiêu mà mình muốn các bạn hướng tới.

Nếu các bạn có góp ý, hoặc các bạn phát hiện ra sai sót của mình hãy comment ở bên dưới cho mình biết nhé. Đây là phần 2 của series custom tài khoản wordpress, rất mong nhận được sự ủng hộ của các bạn để mình có động lực ra thêm các bài viết mới trong tương lai.