Code chức năng đăng nhập trong wordpress

70 / 100

Code chức năng đăng nhập trong wordpress

Code chức năng đăng nhập trong wordpress

Các bước code chức năng đăng nhập trong wordpress

Code chức năng đăng nhập trong wordpress

Mình sẽ hướng dẫn các bạn đăng nhập sử dụng ajax nhé. Vì mình thấy hiện tại thì phương pháp này sử dụng cũng khá nhiều nên mình hướng dẫn luôn. Để code chức năng đăng nhập wordpress bạn làm lần lượt qua các bước sau:

Bước 1: Tạo form đăng nhập gồm tài khoản và mật khẩu mình sử dụng bootstrap nhé còn code bạn html là gì thì bạn tự thay nhé chú ý đặt đúng name của input là được

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<form>
   <fieldset class="form-group">
      <label for="formGroupExampleInput">Tên đăng nhập</label>
      <input type="text" class="form-control username" id="formGroupExampleInput" placeholder="Tài khoản">
   </fieldset>
   <fieldset class="form-group">
      <label for="formGroupExampleInput2">Mật khẩu</label>
      <input type="password" class="form-control password" id="formGroupExampleInput2" placeholder="Mật khẩu">
   </fieldset>
   <div class="modal-footer">
      <!--   <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> -->
      <button type="button" class="btn btn-primary submit-btn">Đăng nhập</button>
   </div>
</form>

Bước 2: Viết code js xử lý get form lấy thông tin đầu vào và gửi ajax đến server. Thêm code vào file footer.php

<script type="text/javascript">
   $(document).ready(function(){
      $('.submit-btn').on('click', function(){
        $('.mes-err').remove();
                   var check = true;
            var user = $('.username').val(),
                pass = $('.password').val();
            if(!user){
                $('.username').after('<p class="mes-err">Tài khoản không được để trống</p>');
                check = false;
            }
            if(!pass){
                $('.password').after('<p class="mes-err">Mật khẩu không được để trống</p>');
                check = false;
            }
            if(check==true){
                $('.mes-err').remove();
   
    $.ajax({
                   type : "post",
                   dataType : "json",
                   url : '<?php echo admin_url('admin-ajax.php');?>',
                   data : {
                       action: "rodilogin",
                       username : user,
        password : pass
                   },
                   context: this,
                   beforeSend: function(){
                       
                   },
                   success: function(res) {
                      if(res.data.loggedin == false){
                          $('.modal-footer').before('<p class="mes-err">'+res.data.message+'</p>')
                      }else{
                            window.location.reload();
                      }
                         
                   },
                   
                   })
                   return false;
            }  
      });
   })
</script>

Bước 3: Viết code file functions.php xử lý thông tin đăng nhập mà client gửi lên thông qua ajax và hàm wp_signon() . Bạn có thể đọc qua hàm wp_signon tại đây

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
add_action( 'wp_ajax_rodilogin', 'rodilogin_init' );
add_action( 'wp_ajax_nopriv_rodilogin', 'rodilogin_init' );
function rodilogin_init() {
    // check_ajax_referer( 'ajax-login-nonce', 'security' );
    $user = (isset($_POST['username']))?esc_attr($_POST['username']) : '';
    $pass = (isset($_POST['password']))?esc_attr($_POST['password']) : '';
    $info = array();
    $info['user_login'] = $user;
    $info['user_password'] = $pass;
    $info['remember'] = true;
    $user_signon = wp_signon( $info, false );
    if ( !is_wp_error($user_signon) ){
        wp_set_current_user($user_signon->ID);
        wp_set_auth_cookie($user_signon->ID);
        wp_send_json_success(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
    }else{
        wp_send_json_success(array('loggedin'=>false, 'message'=>__('Tài khoản hoặc mật khẩu không đúng')));
    }
   
    die();
}

Các bước chỉ đơn giản vậy thôi việc của bạn chỉ cần coppy code và chạy hưởng thụ thôi nhé. Nếu bạn gặp phải thắc mắc cần hỗ trợ vui lòng để lại bình luận hoặc liên hệ với mình để mình  hướng dẫn nhé. Chúc tất cả các bạn làm thành công.