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.
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.
Ư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');
– 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://vnfaster.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();?>
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
- Đưa trình soạn thảo WordPress 5.0 về phiên bản cũ không dùng plugin
- Thêm chức năng lọc theo Meta Fields trong Dashboard WordPress
- Sửa lỗi không hiển thị Page Template để chọn khi tạo Trang ở WordPress version 4.9
- Thêm reCAPTCHA vào form đăng nhập đăng ký WordPress
- Quản lý thời gian hoạt động cho Vip Member trong WordPress
- Hiển thị bài viết mới theo Category trong WordPress
- Tự tùy biến trang Single theo Category trong WordPress
- Tạo giao diện khác nhau cho từng Category trong WordPress
Bình luận bài viết
Dịch vụ
- Thiết kế website
- Tối ưu Code, tối ưu SEO
- Code chức năng Nâng cao
- Viết Plugin theo yêu cầu
Good like
Bạn cũng tạo thử cho trang của mình đi nàooooo!!!!
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
Bạn đã làm đúng các bước trên chưa?
Hiện tại với các bước trên mình làm hoàn toàn bình thường, đã test lại mọi thứ vẫn ổn, bạn xem lại các bước xem nhé
minh cung bi nhu vay
Bạn nhớ code như trên trong file author.php nhé
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:
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) { ?>Bác ơi, khi mình tạo xong rồi thì làm sao để lấy cái đường dẫn url user mà nhét vào cái nav-menu khi user đăng nhập ạ ?
Khi tạo trang ở phần Page, bạn có thấy chữ Xem, ấn vô đó là lấy được link nó đó.
bài viết hay quá ^^ cảm ơn bạn nhiều nha, mình làm được rồi nè
http://imgur.com/psXi7wh
http://imgur.com/SaO9IBr
Chúc mừng bạn nhé!!!
MÌnh muốn thêm 2 khung 1 là upload media và 2 là chọn color nữa thì phải là thế nào nhỉ?
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 🙁
Chào bạn, mình đã tạo form giống như bạn nhưng sao không thấy chổ sửa vậy ta
vui lòng hỗ trợ giúp
thanks
Chào bạn, Bạn đã làm đúng theo hướng dẫn hoặc copy code full ở dưới cùng bài viết chưa bạn nhỉ?
Khi đăng nhập phải đúng là link author của bạn thì mới hiện phần sửa bạn ạ.
Bạn ơi. Tạo cái dropdownlist phụ thuộc nhau thì làm như thế nào bạn nhỉ? Ví dụ 1 cái là chọn tỉnh thành và 1 cái là quận huyện thuộc tỉnh thành đã chọn. Cảm ơn bạn nhiều.
Chào bạn, bạn có thêm thư viện Js này bạn nhé:
http://myqianlan.com/country-state-select.js/
Bạn ơi cho mình hỏi giờ mình muốn thay đổi avatar ngoài trang author thì phải làm sao ạ
mình có thấy bài viết về thay đổi avatar bên trong quản trị rồi
cho hỏi, a có đoạn css của file này ko, của em làm nó vỡ giao diện hết