Nếu website của bạn cho phép đăng ký thành viên thì chắc hẵn bạn sẽ muốn tạo một trang profile cho mỗi thành viên ở ngoài front-end.

Mặc định WordPress chưa cung cấp sẵn chức năng này nhưng nếu muốn bạn có thể sử dụng các plugins để hỗ trợ. Tuy nhiên mình đã thử qua khá nhiều plugin vẫn không thấy vừa ý với nhiều lý do như cách trình bày, ngôn ngữ, không cho bổ sung thông tin…

Trong bài viết này, mình sẽ giới thiệu một thủ thuật để bạn có thể tạo trang profile cho thành viên mà không cần dùng tới plugins. Bạn cũng có thể bổ sung thêm các trường thông tin cần thiết và tạo trang chỉnh sửa thông tin cá nhân của thành viên.

Bổ sung thêm thông tin thành viên

Bạn sử dụng code dưới đây chèn vào file functions.php để bổ sung thêm các trường thông tin mà bạn muốn thành viên cung cấp:

function add_contact_methods($profile_fields) {
   $profile_fields['ns'] = 'Năm sinh';
   $profile_fields['sdt'] = 'Số điện thoại';
   $profile_fields['dc'] = 'Địa chỉ';
   $profile_fields['nn'] = 'Nghề nghiệp';
   return $profile_fields;
}
add_filter('user_contactmethods', 'add_contact_methods');

Tạo trang profile cho thành viên

Sau khi đã bổ sung thêm các thông tin cần thiết, giờ ta sẽ tạo một trang để đưa các thông tin đó ra ngoài. Trước tiên, sử dụng đoạn code sau chèn vào file functions.php để tạo một shortcode hiển thị thông tin thành viên:


function profile(){ 
if ( !is_user_logged_in() ) { ?>
         <p class="warning">
            <?php echo 'Bạn phải đăng nhập mới có thể xem thông tin.'; ?>
         </p>
            <?php } else {
                $user_ID = get_current_user_id(); 
                $user_info = get_userdata($user_ID);
                    $username = $user_info->user_login;
                    $hoten = $user_info->last_name;
                    $ns = $user_info->ns;
                    $email = $user_info->user_email;
                    $sdt = $user_info->sdt;
                    $nn = $user_info->nn;
                    $dc = $user_info->dc;
                    $role = implode(', ', $user_info->roles);
                    $gioithieu = $user_info->description;
            ?>
          <p class="tendangnhap"><?php echo $username; ?></p>
          <p class="tendangnhap"><?php echo "Role: $role"; ?></p>
        <table width="100%" border="0">
          <tr>
                <td width="50%"><p class="userinfo hovaten">Họ và tên</p></td>
                <td width="50%"><p class="userinfo namsinh">Năm sinh</p></td>
          </tr>
          <tr>
                <td><p class="info"><?php echo $hoten; ?></p></td>
                <td><p class="info"><?php echo $ns; ?></p></td>
          </tr>
          <tr>
                <td><p class="userinfo e-mail">Email</p></td>
                <td><p class="userinfo dienthoai">Số điện thoại</p></td>
          </tr>
          <tr>
                <td><p class="info"><?php echo $email; ?></p></td>
                <td><p class="info"><?php echo $sdt; ?></p></td>
          </tr>
          <tr>
                <td><p class="userinfo nghe">Nghề nghiệp</p></td>
                <td><p class="userinfo diachi">Địa chỉ</p></td>
          </tr>
          <tr>
                <td><p class="info"><?php echo $nn; ?></p></td>
                <td><p class="info"><?php echo $dc; ?></p></td>
          </tr>
        </table>
             <p class="userinfo gioithieu">Giới thiệu</p>
             <p class="info"><?php echo $gioithieu; ?></p>
             <p class="profile-submit"><a href="http://tenmien.com/edit-profile/">Chỉnh sửa thông tin cá nhân</a></p>
<?php }}
add_shortcode( 'profile', 'profile' );

Địa chỉ http://tenmien.com/edit-profile/ trong đoạn code trên là địa chỉ trang chỉnh sửa profile mà bạn sẽ tạo ở bước dưới. Bây giờ chỉ cần vào Pages » Add New, tạo một trang mới và thêm shortcode [profile] vào nội dung là được. Tuy nhiên ta cần bổ sung một số lớp css để hiển thị đẹp hơn.

/*user profile*/
.userinfo {
    border-bottom: 1px solid #CCC;
    padding: 0px !important;
    margin-left: 10px;
    font-weight:bold;
}
.info {
    padding: 5px 0px 10px 20px !important;
    background:#FFF;
}
.info input, .info select{
    background:#FFF;
    width: 210px;
    padding: 5px;
}
.info textarea {
    background:#FFF;
    padding: 5px;
    color: #333 !important;
    font-style:normal !important;
}
.profile-submit {
    text-align:center;
    margin-top: 20px;
}
.profile-submit input {
    color: #099;
}
.profile-submit a{
    border:1px solid #ccc;
    padding: 7px;
    color: #099;
    text-decoration:none;
    font-weight: bold;
}
.profile-submit a:hover {
    color: #FFF;
    background: #099;
}
.hovaten {
    background:url(images/hoten.png) left no-repeat;
    padding-left: 28px !important;
}
.namsinh {
    background:url(images/namsinh.png) left no-repeat;
    padding-left: 28px !important;
}
.e-mail {
    background:url(images/email.png) left no-repeat;
    padding-left: 28px !important;
}
.dienthoai {
    background:url(images/dienthoai.png) left no-repeat;
    padding-left: 24px !important;
}
.nghe {
    background:url(images/nghe.png) left no-repeat;
    padding-left: 28px !important;
}
.diachi {
    background:url(images/diachi.png) left no-repeat;
    padding-left: 28px !important;
}
.gioithieu {
    background:url(images/gioithieu.png) left no-repeat;
    padding-left: 28px !important;
}
.matkhau {
    background:url(images/matkhau.png) left no-repeat;
    padding-left: 24px !important;
}
.ava, .tendangnhap {
    text-align: center;
}
.tendangnhap {
    font-size: 24px;
    font-weight: bold;
}

Kết quả ta sẽ được như thế này:

Tiếp theo ta sẽ tạo một trang cho phép thành viên chỉnh sửa thông tin. Thêm đoạn code dưới đây vào file functions.php:


function profile_edit(){
global $current_user, $wp_roles;
get_currentuserinfo();
require_once( ABSPATH . WPINC . '/registration.php' );
$error = array();
if ( 'POST' == $_SERVER['REQUEST_METHOD'] && !empty( $_POST['action'] ) && $_POST['action'] == 'update-user' ) {
  
    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
            $error[] = __('Mật khẩu không khớp nhau.', 'profile');
    }
    if ( !empty( $_POST['url'] ) )
        update_user_meta( $current_user->ID, 'user_url', esc_url( $_POST['url'] ) );
    if ( !empty( $_POST['email'] ) ){
        if (!is_email(esc_attr( $_POST['email'] )))
            $error[] = __('Địa chỉ email không khả dụng.  Vui lòng thử lại.', 'profile');
        elseif(email_exists(esc_attr( $_POST['email'] )) != $current_user->id )
            $error[] = __('Email này đã được sử dụng cho một tài khoản khác.  Vui lòng thử lại.', 'profile');
        else{
            wp_update_user( array ('ID' => $current_user->ID, 'user_email' => esc_attr( $_POST['email'] )));
        }
    }
    if ( !empty( $_POST['last-name'] ) )
        update_user_meta($current_user->ID, 'last_name', esc_attr( $_POST['last-name'] ) );
    if ( !empty( $_POST['user_email'] ) )
        update_user_meta($current_user->ID, 'user_email', esc_attr( $_POST['user_email'] ) );
    if ( !empty( $_POST['ns'] ) )
        update_user_meta($current_user->ID, 'ns', esc_attr( $_POST['ns'] ) );
    if ( !empty( $_POST['sdt'] ) )
        update_user_meta($current_user->ID, 'sdt', esc_attr( $_POST['sdt'] ) );
    if ( !empty( $_POST['dc'] ) )
        update_user_meta($current_user->ID, 'dc', esc_attr( $_POST['dc'] ) );
    if ( !empty( $_POST['nn'] ) )
        update_user_meta($current_user->ID, 'job', esc_attr( $_POST['nn'] ) );
    if ( !empty( $_POST['description'] ) )
        update_user_meta( $current_user->ID, 'description', esc_attr( $_POST['description'] ) );
    if ( count($error) == 0 ) {
        do_action('edit_user_profile_update', $current_user->ID);
        wp_redirect('http://tenmien.com/profile/');
        exit;
    }
}
    if ( !is_user_logged_in() ) : ?>
                    <p class="warning">
                        <?php _e('Bạn phải đăng nhập mới có thể xem trang này.', 'profile'); ?>
                    </p><!-- .warning -->
            <?php else : 
                if ( count($error) > 0 ) echo '<p class="error">' . implode("<br />", $error) . '</p>'; ?>
            <?php
                $myAv = new simple_local_avatars();
                $myAv->edit_user_profile($profileuser);
            ?>
                <form method="post" id="adduser" action="<?php the_permalink(); ?>">
                    <table width="100%" border="0">
  <tr>
    <td width="50%"><p class="userinfo hovaten"><label for="last-name"><?php _e('Họ và tên', 'profile'); ?></label></p></td>
    <td width="50%"><p class="userinfo namsinh"><label for="ns"><?php _e('Năm sinh', 'profile'); ?></label></p></td>
  </tr>
  <tr>
    <td><p class="info"><input class="text-input" name="last-name" type="text" id="last-name" value="<?php the_author_meta( 'last_name', $current_user->ID ); ?>" /></p></td>
    <td><p class="info"><input class="text-input" name="ns" type="date" id="ns" value="<?php the_author_meta( 'ns', $current_user->ID ); ?>" /></p></td>
  </tr>
  <tr>
    <td><p class="userinfo e-mail"><label for="dc"><?php _e('Email', 'profile'); ?></label></p></td>
    <td><p class="userinfo dienthoai"><label for="sdt"><?php _e('Số điện thoại', 'profile'); ?></label></p></td>
  </tr>
  <tr>
    <td><p class="info"><input class="text-input" name="email" type="email" id="email" value="<?php the_author_meta( 'user_email', $current_user->ID ); ?>" /></p></td>
    <td><p class="info"><input class="text-input" name="sdt" type="number" id="sdt" value="<?php the_author_meta( 'sdt', $current_user->ID ); ?>" /></p></td>
  </tr>
  <tr>
    <td><p class="userinfo nghe"><label for="nn"><?php _e('Nghề nghiệp', 'profile'); ?></label></p></td>
    <td><p class="userinfo diachi"><label for="dc"><?php _e('Địa chỉ', 'profile'); ?></label></p></td>
  </tr>
  <tr>
    <td><p class="info"><select size="1" name="nn" value="<?php the_author_meta( 'nn', $current_user->ID ); ?>">
                                <option value="">Lựa chọn....</option>
                                <option value="Giáo viên">Giáo viên</option>
                                <option value="Học sinh">Học sinh</option>
                                <option value="Sinh viên">Sinh viên</option>
                                <option value="Nghề khác">Nghề khác</option>
                        </select></p></td>
    <td><p class="info"><input class="text-input" name="dc" type="text" id="dc" value="<?php the_author_meta( 'dc', $current_user->ID ); ?>" /></p></td>
  </tr>
  <tr>
    <td><p class="userinfo matkhau"><label for="pass1"><?php _e('Mật khẩu mới', 'profile'); ?> </label></p></td>
    <td><p class="userinfo matkhau"><label for="pass2"><?php _e('Lập lại mật khẩu', 'profile'); ?></label></p></td>
  </tr>
  <tr>
    <td><p class="info"><input class="text-input" name="pass1" type="password" id="pass1" />
                    </p></td>
    <td><p class="info"><input class="text-input" name="pass2" type="password" id="pass2" /></p></td>
  </tr>
</table>
     <p class="userinfo gioithieu"><label for="description"><?php _e('Giới thiệu bản thân', 'profile') ?></label></p>
      <p class="info"><textarea name="description" id="description" rows="3" cols="75"><?php the_author_meta( 'description', $current_user->ID ); ?></textarea></p>
      <p class="profile-submit">
                        <?php echo $referer; ?>
                        <input name="updateuser" type="submit" id="updateuser" class="submit button" value="<?php _e('Cập nhật', 'profile'); ?>" />
                        <?php wp_nonce_field( 'update-user' ) ?>
                        <input name="action" type="hidden" id="action" value="update-user" />
                    </p>
                </form><!-- #adduser -->
            <?php endif; 
}
add_shortcode( 'edit-profile', 'profile_edit' );

Bạn nhớ thay đổi dòng http://tenmien.com/profile/ trong đoạn code trên thành địa chỉ trang profile bạn đã tạo ở trên. Giờ bạn tạo một trang mới và thêm shortcode [edit-profile] vào nội dung. Kết quả bạn sẽ được như thế này:

Cũng khá đẹp mắt phải không :D. Hy vọng bài viết này sẽ giúp bạn tạo được một trang profile cho thành viên vứa ý. Tuy nhiên vì thủ thuật này sử dụng khá nhiều đoạn code nên bạn phải biết chút ít về code để có thể chỉnh sửa lại cho phù hợp với website của bạn. Chúc bạn thành công!

Nguồn: raynoblog

  • Wordpress
  • January 23, 2016
  • 0 comment
  • 150 lượt xem

Recent posts

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Cảnh báo thủ đoạn hack iCloud mới cực kỳ tinh vi, sử dụng chính công cụ do Apple tạo ra

Người dùng có thể mất quyền truy cập tài khoản iCloud nếu “sa lưới” vào hình thức lừa đảo mới […]

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Ngoại hình iPhone 16 Pro lộ diện, thiết kế tuyệt đẹp

Bản vẽ thiết kế được cho là của iPhone 16 Pro cho thấy dòng iPhone thế hệ mới của Apple […]

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Apple tăng gấp đôi tuổi thọ pin cho iPhone 15 nhờ iOS 17.4

Tuổi thọ pin iPhone được xác định thông qua chu kỳ sạc/xả, với con số 500 để về 80%. Tuy […]

Rối loạn về tin đồn iPhone màn hình gập của Apple

Rối loạn về tin đồn iPhone màn hình gập của Apple

Báo cáo mới nhất cho hay, Apple vẫn chưa từ bỏ iPhone màn hình gập nhưng cũng không gấp gáp […]

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Nhiều mẫu iPhone cũ ‘gặp nguy’, người dùng nên chuẩn bị tâm lý mua máy mới

Một rò rỉ mới cho biết phiên bản cập nhật iOS 18 mà Apple phát hành vào mùa thu 2024 […]

© 2021 Tạp Chí CNTT. Mr Hoang