Tạo trang Xem và Sửa thông tin thành viên WordPress

Giúp thành viên của mình xem và sửa thông tin cá nhân ngay ngoài trang chủ một cách đơn giản và tiện lợi.

Tạo trang Xem và Sửa thông tin thành viên WordPress
3.3 (65.83%) 120 votes
Tạo trang Xem và Sửa thông tin thành viên WordPress

Thông thường khi sử dụng WordPress,Thành Viên cần phải vào trang quản trị mới có thể thay đổi thông tin. Nhưng Bạn hoàn toàn có thể giúp thành viên của mình sửa thông tin ấy ngay ngoài trang chủ một cách đơn giản và tiện lợi.

Tạo trang Xem và Sửa thông tin thành viên WordPress

Ưu điểm :

  • Giúp thành viên dễ dàng hơn trong việc quản trị thông tin của mình
  • Dễ dàng thay đổi cách hiển thị vì mỗi dòng code đều do bạn tạo ra
  • Không sử dụng plugin, Javascript nên trang sẽ load nhẹ hơn
  • Tạo cảm hứng cho các bạn thích trinh phục wordpress nâng cao, tự tạo chức năng

Bắt đầu Tạo trang Xem và Sửa thông tin thành viên WordPress nào!

Đầu tiên bạn tìm file : author.php trong thư mục Theme của mình, nếu chưa có thì bạn tạo nó nhé (File này mặc định sẽ là trang thông tin Thành Viên)

Cũng như các hướng dẫn khác, mình sẽ giải thích từng phần và có 1 file tổng hợp lại giúp bạn dễ hiểu hơn.

– Lấy thông tin thành viên

<?php
$user_id 	= get_current_user_id();
$author_vnkings = get_user_by( 'slug', get_query_var( 'author_name' ) );
$author_id = $author_vnkings->ID;
if($user_id == $author_id) {
// Hiển thị Form sửa thông tin thành viên
} else {
// Hiển thị thông tin thành viên
} ?>

Giải thích :

  • $user_id : Lấy ID của thành viên hiện tại
  • get_user_by() : Hàm này giúp bạn lấy thông tin của thành viên bạn đang xem
  • $author_id : Lấy ID của thành viên bạn đang xem
  • if($user_id == $author_id) : Nếu ID của bạn trùng với ID của thành viên đang xem (có nghĩa bạn đang xem thông tin của chính mình)
  • if:else : Nếu là bạn thì hiển thị ra khung chỉnh sửa thông tin, ngược lại sẽ hiển thị thông tin thành viên bạn đang xem

– Form Sửa thông tin thành viên

<form role="form" action="" id="user_profile" method="POST">
	<?php wp_nonce_field('user_profile_nonce', 'user_profile_nonce_field'); ?>
	<div class="form-group col-md-6">
		<label for="nickname">Họ Tên</label>
		<input type="text" class="form-control" id="nickname" name="nickname" placeholder="Họ Tên" value="<?php the_author_meta( 'nickname', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="email">Email</label>
		<input disabled type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="<?php the_author_meta( 'user_email', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="user_url">Website</label>
		<input type="text" class="form-control" id="user_url" name="user_url" placeholder="Website của bạn" value="<?php the_author_meta( 'user_url', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="facebook">Facebook</label>
		<input type="text" class="form-control" id="facebook" name="facebook" placeholder="Facebook của bạn" value="<?php the_author_meta( 'facebook', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="googleplus">Google Plus</label>
		<input type="text" class="form-control" id="googleplus" name="googleplus" placeholder="Google Plus của bạn" value="<?php the_author_meta( 'googleplus', $author_id ); ?>">
	</div>
	<div class="form-group col-md-6">
		<label for="twitter">Twitter</label>
		<input type="text" class="form-control" id="twitter" name="twitter" placeholder="Twitter của bạn" value="<?php the_author_meta( 'twitter', $author_id ); ?>">
	</div>
	<div class="form-group col-md-12">
		<label for="description">Mô tả về bạn</label>
		<textarea class="form-control" name="description" id="description" rows="3" cols="50"><?php the_author_meta( 'description', $author_id ); ?></textarea>
	</div>
	<div class="form-group col-md-6">
		<label for="pass1">Password</label>
		<input type="password" class="form-control" id="pass1" name="pass1" placeholder="Password">
	</div>
	<div class="form-group col-md-6">
		<label for="pass2">Nhập lại Password</label>
		<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Password">
	</div>
	<div class="form-group col-md-12"><button type="submit" class="btn btn-success">Cập nhật</button></div>
</form>

Bạn có thể thấy trong các input Value của mình đều có dạng:

<?php the_author_meta( 'tên_trường', $author_id ); ?>

Đây chính là hàm lấy ra thông tin của của thành viên.
Ví dụ bạn lấy ra email của thành viên :

<?php the_author_meta( 'user_email', $author_id ); ?>

Một số trường thành viên WordPress hỗ trợ:

  • nickname : Hiển thị họ tên
  • user_email : Hiển thị Email
  • user_url : Hiển thị Website
  • description : Mô tả ngắn thành viên

Ngoài ra bạn cũng có thể thêm Trường bằng cách thêm đoạn này vào file functions.php

function add_fields_user($profile_fields){
$profile_fields['googleplus'] = 'Google+';
$profile_fields['twitter'] = 'Twitter username';
$profile_fields['facebook'] = 'Facebook profile URL';
return $profile_fields;
}
add_filter('user_contactmethods', 'add_fields_user');

Tạo trang Xem và Sửa thông tin thành viên WordPress

– Xử lý thông tin khi sửa

if( isset( $_POST['user_profile_nonce_field'] ) && wp_verify_nonce( $_POST['user_profile_nonce_field'], 'user_profile_nonce' ) ) {
	if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) {
		if ( $_POST['pass1'] == $_POST['pass2'] )
			wp_update_user( array( 'ID' => $current_user->ID, 'user_pass' => esc_attr( $_POST['pass1'] ) ) );
		else
		 echo	$error[] = __('Mật khẩu của bạn không được cập nhật', 'profile');
	}
	/* Update thông tin user. */
	if ( !empty( $_POST['user_url'] ) ){
		wp_update_user( array( 'ID' => $current_user->ID, 'user_url' => esc_url( $_POST['user_url'] ) ) );
	}
	if ( !empty( $_POST['nickname'] ) ) {
	update_user_meta( $current_user->ID, 'nickname', esc_attr( $_POST['nickname'] ) ); }
	if ( !empty( $_POST['twitter'] ) ) {
	update_user_meta( $current_user->ID, 'twitter', esc_attr( $_POST['twitter'] ) ); }
	if ( !empty( $_POST['googleplus'] ) ) {
	update_user_meta( $current_user->ID, 'googleplus', esc_attr( $_POST['googleplus'] ) ); }
	if ( !empty( $_POST['facebook'] ) ) {
	update_user_meta( $current_user->ID, 'facebook', esc_attr( $_POST['facebook'] ) ); }
	if ( !empty( $_POST['description'] ) ){
	update_user_meta( $current_user->ID, 'description', esc_attr( $_POST['description'] ) ); }
	echo '<div class="alert alert-success"><strong>Bạn đã sửa thông tin cá nhân thành công!</strong></div>';
}

Giải thích

  • if( isset()) : Kiểm tra tồn tại và xác nhận nonce field
  • $_POST[‘tên trường’] : Lấy giá trị từ các trường trong form bên trên
  • wp_update_user() : Đưa thông tin vào cơ sở dữ liệu

– Hiển thị thông tin thành viên:

<div class="info_author col-md-8">
	<ul class="list-group vnk_label">
		<li class="list-group-item"><label for="nickname">Họ Tên:</label> <?php the_author_meta( 'nickname', $author_id ); ?></li>
		<li class="list-group-item"><label for="user_url">Website:</label> <a rel="nofollow" href="<?php the_author_meta( 'user_url', $author_id ); ?>"><?php the_author_meta( 'user_url', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="user_url">Facebook:</label> <a rel="nofollow" href="<?php the_author_meta( 'facebook', $author_id ); ?>"><?php the_author_meta( 'facebook', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="user_url">Google+:</label> <a rel="nofollow" href="<?php the_author_meta( 'googleplus', $author_id ); ?>"><?php the_author_meta( 'googleplus', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="user_url">Twitter:</label> <a rel="nofollow" href="<?php the_author_meta( 'twitter', $author_id ); ?>"><?php the_author_meta( 'twitter', $author_id ); ?></a></li>
		<li class="list-group-item"><label for="description">Chia sẻ về tôi</label>: <?php the_author_meta( 'description', $author_id ); ?></li>
	</ul>
</div>

Cuối cùng ta có 1 file author.php hoàn chỉnh:

<?php get_header();?>
<div class="panel panel-default">
	<div class="panel-heading">
		<h1 style="font-size:21px;">Thông tin thành viên</h1>
	</div>
	<div class="panel-body">
		<?php
		$user_id 	= get_current_user_id();
		$author_vnkings = get_user_by( 'slug', get_query_var( 'author_name' ) );
		$author_id = $author_vnkings->ID;
		if($user_id == $author_id) { ?>
		<?php			
			if( isset( $_POST['user_profile_nonce_field'] ) && wp_verify_nonce( $_POST['user_profile_nonce_field'], 'user_profile_nonce' ) ) {
			if ( !empty($_POST['pass1'] ) && !empty( $_POST['pass2'] ) ) {
				if ( $_POST['pass1'] == $_POST['pass2'] )
					wp_update_user( array( 'ID' => $current_user->ID, 'user_pass' => esc_attr( $_POST['pass1'] ) ) );
				else
				 echo	$error[] = __('Mật khẩu của bạn không được cập nhật', 'profile');
			}
			/* Update thông tin user. */
			if ( !empty( $_POST['user_url'] ) ){
				wp_update_user( array( 'ID' => $current_user->ID, 'user_url' => esc_url( $_POST['user_url'] ) ) );
			}
			if ( !empty( $_POST['nickname'] ) ) {
			update_user_meta( $current_user->ID, 'nickname', esc_attr( $_POST['nickname'] ) ); }
			if ( !empty( $_POST['twitter'] ) ) {
			update_user_meta( $current_user->ID, 'twitter', esc_attr( $_POST['twitter'] ) ); }
			if ( !empty( $_POST['googleplus'] ) ) {
			update_user_meta( $current_user->ID, 'googleplus', esc_attr( $_POST['googleplus'] ) ); }
			if ( !empty( $_POST['facebook'] ) ) {
			update_user_meta( $current_user->ID, 'facebook', esc_attr( $_POST['facebook'] ) ); }
			if ( !empty( $_POST['description'] ) ){
			update_user_meta( $current_user->ID, 'description', esc_attr( $_POST['description'] ) ); }
			echo '<div class="alert alert-success"><strong>Bạn đã sửa thông tin cá nhân thành công!</strong></div>';
		}
		?>
		<form role="form" action="" id="user_profile" method="POST">
			<?php wp_nonce_field('user_profile_nonce', 'user_profile_nonce_field'); ?>
			<div class="form-group col-md-6">
				<label for="nickname">Họ Tên</label>
				<input type="text" class="form-control" id="nickname" name="nickname" placeholder="Họ Tên" value="<?php the_author_meta( 'nickname', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="email">Email</label>
				<input disabled type="email" class="form-control" id="email" name="email" placeholder="Enter email" value="<?php the_author_meta( 'user_email', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="user_url">Website</label>
				<input type="text" class="form-control" id="user_url" name="user_url" placeholder="Website của bạn" value="<?php the_author_meta( 'user_url', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="facebook">Facebook</label>
				<input type="text" class="form-control" id="facebook" name="facebook" placeholder="Facebook của bạn" value="<?php the_author_meta( 'facebook', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="googleplus">Google Plus</label>
				<input type="text" class="form-control" id="googleplus" name="googleplus" placeholder="Google Plus của bạn" value="<?php the_author_meta( 'googleplus', $author_id ); ?>">
			</div>
			<div class="form-group col-md-6">
				<label for="twitter">Twitter</label>
				<input type="text" class="form-control" id="twitter" name="twitter" placeholder="Twitter của bạn" value="<?php the_author_meta( 'twitter', $author_id ); ?>">
			</div>
			<div class="form-group col-md-12">
				<label for="description">Mô tả về bạn</label>
				<textarea class="form-control" name="description" id="description" rows="3" cols="50"><?php the_author_meta( 'description', $author_id ); ?></textarea>
			</div>
			<div class="form-group col-md-6">
				<label for="pass1">Password</label>
				<input type="password" class="form-control" id="pass1" name="pass1" placeholder="Password">
			</div>
			<div class="form-group col-md-6">
				<label for="pass2">Nhập lại Password</label>
				<input type="password" class="form-control" id="pass2" name="pass2" placeholder="Password">
			</div>
			<div class="form-group col-md-12"><button type="submit" class="btn btn-success">Cập nhật</button></div>
		</form>
		<?php } else { ?>
		<div class="col-md-4">
			<a href="<?php echo get_author_posts_url($author_id); ?>">
			<?php $avatar = get_user_meta( $author_id,  'lovendpic', true); 
			 $image	=	wp_get_attachment_image_src($avatar, 'medium');?>
				<?php if(!empty($image)){ ?>
				<img style="border:1px solid #ccc;padding:2px;border-radius:5px;" alt="<?php echo $useridname; ?>" id="avatar-img" src="<?php echo $image[0]; ?>">
				<?php } else { ?>
				<img style="border:1px solid #ccc;padding:2px;border-radius:5px;width:100%;height:auto;" alt="<?php echo $useridname; ?>" id="avatar-img" src="https://wordpress.vnkings.com/wp-content/uploads/2015/11/logo.png">
				<?php } ?>
			</a>
		</div>
		<div class="info_author col-md-8">
			<ul class="list-group vnk_label">
				<li class="list-group-item"><label for="nickname">Họ Tên:</label> <?php $vnkings_name = the_author_meta( 'nickname', $author_id ); if(isset($vnkings_name)){echo $vnkings_name;} ?></li>
				<li class="list-group-item"><label for="user_url">Website:</label> <a rel="nofollow" href="<?php the_author_meta( 'user_url', $author_id ); ?>"><?php the_author_meta( 'user_url', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="user_url">Facebook:</label> <a rel="nofollow" href="<?php the_author_meta( 'facebook', $author_id ); ?>"><?php the_author_meta( 'facebook', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="user_url">Google+:</label> <a rel="nofollow" href="<?php the_author_meta( 'googleplus', $author_id ); ?>"><?php the_author_meta( 'googleplus', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="user_url">Twitter:</label> <a rel="nofollow" href="<?php the_author_meta( 'twitter', $author_id ); ?>"><?php the_author_meta( 'twitter', $author_id ); ?></a></li>
				<li class="list-group-item"><label for="description">Chia sẻ về tôi</label>: <?php the_author_meta( 'description', $author_id ); ?></li>
			</ul>
		</div>
		<?php } ?>
	</div>
</div>
<?php get_footer();?>

Tạo trang Xem và Sửa thông tin thành viên WordPress

Như vậy với những bước bên trên bạn đã tạo ra được trang Xem hoặc sửa thành viên theo phong cách của mình rồi. Nếu có bất kỳ câu hỏi nào hãy gửi vào khung bình luận cho mình nhé 🙂

Chúc các bạn thành công!

Bài liên quan

  1. hiện tai code mình chạy hết nhưng khi mình tạo 1 user mới thì sửa thông tin user đó thì nó vẫn hiện thông tin user chính của mình như vậy là sao hả admin

  2. mình làm theo code nhưng mà ko thấy ra được kết quả như ý muốn bạn ơi.
    1. Khi chưa đăng nhập mà vào trang author.php thì hiện ra form cập nhật thông tin.
    2. Chưa đăng nhập mà vẫn thay đổi thông tin được thì mình không hiểu là nó thay đổi ở tài khoản nào?
    3. Khi đăng nhập rồi mà vào trang author.php thì xuất thông tin ra không đúng.

    • Đầu tiên ta lấy ra ID của thành viên đang đăng nhập và ID của Author:

      <?php
      $user_id 	= get_current_user_id();
      $author_vnkings = get_user_by( 'slug', get_query_var( 'author_name' ) );
      $author_id = $author_vnkings->ID;
      $current_user = wp_get_current_user();
      ?>
      

      Tiếp theo bạn dùng hàm check thành viên này có phải author page này không để cho phép chỉnh sửa thông tin:

      <?php if(is_user_logged_in()) { if($user_id == $author_id) { ?>
  3. Làm sao để thêm một trường khác nữa ví dụ như ảnh đại diện chẳng hạn. Em thử thêm mà nó không lưu được 🙁

Bình luận bài viết

Bạn có thể dùng các thẻ HTML này:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

X

Tạo live chat facebook cho website

Bạn cần tư vấn ?