Hướng dẫn xây dựng trang thông tin người dùng WordPress

Chào các bạn! Các bài viết trước mình đã hướng dẫn các bạn xây dựng thành công form đăng nhập, đăng ký và quên mật khẩu.

Hôm nay để tiếp nối series Custom tài khoản WordPress mình sẽ hướng dẫn các bạn tạo trang thông tin người dùng WordPress. Cho phép người dùng có thể chỉnh sửa thông tin cá nhân của họ ở bên ngoài giao diện.

Tạo trang thông tin người dùng WordPress

Giống như các bài viết trước, mình sẽ tạo một trang mới có tiêu đề là Thông tin người dùng và đường dẫn là domain/thong-tin-nguoi-dung. Sau đó hay tạo một file PHP trong theme hiện tại của bạn với tên page-thong-tin-nguoi-dung.php. Khi tạo file thành công, hãy thêm đoạn code dưới đây vào nhé.

<?php get_header(); ?>

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

        <?php
        if ( ! is_user_logged_in() ) {

            echo 'Bạn chưa đăng nhập. Vui lòng <a href="/dang-nhap">đăng nhập</a>.';

        } else {

            $current_user = wp_get_current_user();

        ?>
            <h1><?php the_title(); ?></h1>
            <hr>
            <form id="hk-userinfo">
                <?php wp_nonce_field( 'form_userinfo' ); ?>
                <div id="hk-message"></div>
                <p id="hk-success" style="display:none">Cập nhập thành công</p>
                <p>
                    <input type="text" name="first_name" id="first_name" placeholder="Họ" value="<?php echo $current_user->user_firstname; ?>">
                </p>
                <p>
                    <input type="text" name="last_name" id="last_name" placeholder="Tên" value="<?php echo $current_user->user_lastname; ?>">
                </p>
                <p>
                    <input type="url" name="url" id="url" placeholder="Website" value="<?php echo $current_user->user_url; ?>">
                </p>
                <p>
                    <textarea name="description" id="description" cols="30" rows="10" placeholder="Tiểu sử"><?php echo $current_user->user_description; ?></textarea>
                </p>
                <p class="text-center mb-0">
                    <button class="form-submit" type="submit">
                        Lưu thay đổi
                    </button>
                </p>
            </form>

        <?php } ?>

    </div>
</main>

<?php get_footer(); ?>

Giải thích về code tạo trang cập nhập thông tin người dùng WordPress

Giống như các bài viết cũ. Ở đây mình cũng sử dụng câu lệnh điều kiện ở dòng 7 để kiểm tra người dùng đã đăng nhập chưa. Và ở dòng 19, mình vẫn tiếp tục sử dụng hàm wp_nonce_field với mục đích bảo mật.

Nhưng các bạn hãy chú ý một hàm mới đó là wp_get_current_user. Mình sử dụng hàm này để lấy ra được thông tin của người dùng hiện tại đang đăng nhập. Từ đó mình sẽ sử dụng thuộc tính value trong thẻ input để gán giá trị vào.

Mục đích của việc này là để nếu người dùng đã điền dữ liệu vào và lưu trữ rồi, thì chúng phải được hiển thị ra cho người dùng thấy.

Cuối cùng, đây là giao diện mà bạn sẽ nhận được:

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

Sau khi người dùng nhập dữ liệu vào form, thì tiếp theo chúng ta phải gửi dữ liệu lên phía server. Mình sẽ vẫn tiếp tục sử dụng AJAX để gởi dữ liệu. Nếu các bạn chưa tìm hiểu qua AJAX là gì thì có thể thao khảo các bài viết AJAX trong WordPress nhé.

Hãy thêm đoạn code dưới đây vào file footer.php. Nếu theme của bạn đã khai báo jQuery rồi thì hãy xoá dòng đầu tiên đi.

<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-userinfo').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': 'UpdateUserInfo',
					'userData': data
				},
				dataType: "html",
				beforeSend: function() {},
				success: function (response) {
					$('#hk-message')(response);
					if (response == 'success') {
						$("#hk-userinfo")[0].reset();
						$('#hk-message').hide();
						$('#hk-success').show();
					}
				}
			});
		});
	});
})(jQuery);
</script>

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

Khi dữ liệu được gửi lên server thành công, thì chúng ta sẽ bắt đầu xử lý chúng. Các bạn hãy thêm đoạn code dưới đây vào file functions.php nhé.

add_action('wp_ajax_UpdateUserInfo', 'hk_handle_UpdateUserInfo');

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

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

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

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

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

		if ( isset( $userData['description'] ) && $userData['description'] ) {
			$arr_data['description'] = sanitize_text_field( $userData['description'] );
		} else {
			$arr_error['description'] = 'Bạn chưa nhập Tiểu sử';
		}

		if ( count( $arr_error ) ) {
			echo '<ul>';
			foreach ( $arr_error as $key => $error ) {
				echo '<li>'.$error.'</li>';
			}
			echo '</ul>';
		} else {
			$user_id = get_current_user_id();

			$user_data = wp_update_user( array (
				'ID'          => $user_id,
				'first_name'  => $arr_data['first_name'],
				'last_name'   => $arr_data['last_name'],
				'description' => $arr_data['description'],
				'user_url'    => $arr_data['url'],
			) );

			if ( ! is_wp_error( $user_data ) ) {
				$arr_data = [];
				echo 'success';
			}
		}

	}
    die(); 
}

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

Nếu đã đọc các bài viết trước của mình, chắc hẳn các bạn đã quen với code xử lý dữ liệu ở trên.

Tại dòng 44, mình sử dụng hàm get_current_user_id để lấy ra ID của người dùng hiện tại.

Tại dòng 46 đến dòng 52 mình sử dụng hàm wp_update_user để thực hiện việc cập nhật dữ liệu người dùng. Bạn có thể vào tài liệu của WordPress để tham khảo thêm các trường dữ liệu khác nhé.

Và kết quả ở trang quản trị người dùng trong admin sẽ như vậy:

Lời kết

Vậy là mình đã hướng dẫn xong cho các bạn cách xây dựng một trang thông tin người dùng cơ bản. Mình hi vọng mọi người có thể xây dựng được một trang đúng nhu cầu hoặc sở thích.

Bài viết này cũng là bài viết thứ 4 trong chuỗi series custom tài khoản WordPress. Rất mong là bài viết của mình sẽ giúp các bạn củng cố kiến thức về lập trình trong WordPress. Nếu các bạn phát hiện ra sai sót của mình trong bài viết, hoặc góp ý thì comment ở bên dưới nha. 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.