Hướng dẫn chi tiết cách code chức năng đăng nhập trong wordpress cho người mới bắt đầu. Như các bạn đã biết tại blog của mình cũng đã chia sẻ rất nhiều bài hướng dẫn về lập trình wordpress. Vừa rồi mình có nhận được một yêu cầu của 1 bạn cần hướng dẫn về xử lý đăng nhập wordpress. Mình tìm kiếm cũng thấy rất nhiều bạn đang cần tính năng này, vì thế mình chia sẻ luôn tip hướng dẫn code chức năng đăng nhập wordpress mời các bạn tham khảo.
Các bước 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
<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
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.
