Login Ajax WordPress không dùng Plugin

Khi làm bất cứ điều gì dựa trên AJAX với WordPress bạn cần phải chắc chắn rằng bạn đang làm đúng . Trong bài viết này, bạn sẽ đi qua một số kỹ thuật được coi là cách tốt nhất để làm AJAX, như mô tả trên Codexnhiều trang web khác .

Một điều cần lưu ý ở đây là WordPress có một giai điệu của các chức năng mà bạn có thể sử dụng để làm cho công việc của bạn dễ dàng hơn nhiều. Đối với tính năng đăng nhập người dùng không đau các chức năng này sẽ được sử dụng trong bài viết này:

  • wp_enqueue_script + wp_localize_script
  • wp_nonce_field + check_ajax_referer
  • is_user_logged_in + wp_signon

Bằng cách làm theo bài viết này bạn sẽ có thể tạo ra một hộp đăng nhập đẹp mà bật ra trên nhấp chuột và kiểm tra thông tin người dùng.

khái niệm nhập

Trước hết, có một vài cách mà bạn có thể thực hiện đăng nhập vào trang web của bạn. Bạn có thể tạo ra một trang đặc biệt gọi là “Đăng nhập” và hiển thị các hình thức trên một trang trắng với trang login.php mẫu (loại những gì bạn có mặc định khi tham quan / wp-admin). Lựa chọn thứ hai là để giữ cho các hình thức đăng nhập có thể nhìn thấy tất cả các thời gian trên tiêu đề hoặc trong thanh bên. Lựa chọn thứ ba là để gọi một hộp đăng nhập khi bạn nhấn chuột vào “Đăng nhập” nút / link.Đây là tùy chọn đó sẽ được mô tả trong bài viết này, nhưng bạn có thể dễ dàng áp dụng kỹ thuật này trên bất kỳ khái niệm nhập bạn muốn.

đánh dấu HTML

Mẫu phải được đặt bất cứ nơi nào bên trong <body> thẻ và cho phần này nó được ưa thích bạn đặt nó ngay từ đầu. Thẻ thường được tìm thấy trong header.php tập tin của chủ đề của bạn.

header.php

<body>
<form id="login" action="login" method="post">
<h1>Site Login</h1>
<p class="status"></p>
<label for="username">Username</label>
<input id="username" type="text" name="username">
<label for="password">Password</label>
<input id="password" type="password" name="password">
<a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Lost your password?</a>
<input class="submit_button" type="submit" value="Login" name="submit">
<a class="close" href="">(close)</a>
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>

Vào cuối những hình thức có một wp_nonce_field chức năng mà tạo ra một lĩnh vực ẩn với ID “an ninh” và giá trị “ajax-login-nonce” nhưng ở dạng băm. Nếu bạn làm mới trang của bạn sau khi áp dụng các mã trên, bạn sẽ thấy một hình thức HTML xấu xí trên đầu. Chúng tôi cũng cần một nút đăng nhập, vì vậy nơi mà bất cứ nơi nào bạn muốn.

header.php

<?php if (is_user_logged_in()) { ?>
<a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>">Logout</a>
<?php } else { ?>
<a class="login_button" id="show_login" href="">Login</a>
<?php } ?>

Đó là một phần HTML, chúng ta hãy đi trước và phong cách của nó nên hình thức chỉ xuất hiện khi người dùng nhấp vào liên kết đăng nhập.

Tạo kiểu ô đăng nhập

Đây là yêu cầu tối thiểu CSS mà bạn có thể đặt bên trong style.css của bạn. Sử dụng điều này như là một điểm khởi đầu cho phong cách của bạn, hoặc nếu bạn muốn có một hình thức theo kiểu hoàn toàn chỉ cần nhấp vào “mở rộng mã” ở góc dưới bên phải.

style.css

form#login{
display: none;
background-color: #FFFFFF;
position: fixed;
top: 200px;
padding: 40px 25px 25px 25px;
width: 350px;
z-index: 999;
left: 50%;
margin-left: -200px;
}
form#login p.status{
display: none;
}
.login_overlay{
height: 100%;
width: 100%;
background-color: #F6F6F6;
opacity: 0.9;
position: fixed;
z-index: 998;
}
form#login{
display: none;
background-color: #FFFFFF;
border-radius: 8px;
font-family: Arial, Helvetica, sans-serif;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
position: fixed;
top: 200px;
padding: 40px 25px 25px 25px;
width: 350px;
z-index: 999;
left: 50%;
margin-left: -200px;
color: #878787;
font-size: 11px;
}
form#login h1{
color: #333333;
font-family: 'Georgia', 'Times New Roman', Times, serif;
font-size: 27px;
font-weight: 100;
text-align: center;
line-height: 1;
margin: 0 0 30px 0;
}
form#login input#username,
form#login input#password{
border: 1px solid #EDEDED;
border-radius: 3px 3px 3px 3px;
box-shadow: 0 0 3px rgba(0, 0, 0, 0.1) inset;
color: #333333;
font-size: 15px;
padding: 10px 10px 10px 13px;
width: 325px;
margin: 7px 0 30px 0;
background-color: #F9F9F9;
font-family: 'Georgia', 'Times New Roman', Times, serif;
}
form#login input#username:focus,
form#login input#password:focus{
background-color: #FFF;
}
form#login input.submit_button{
font-size: 13px;
color: #FFF;
border: 1px solid #b34336;
background-color: #e25c4c;
border-radius: 3px;
text-shadow: 0 1px 0 #ba3f31;
padding: 9px 31px 9px 31px;
background: -moz-linear-gradient(top, #ea6656, #df5949);
border-top: 1px solid #bb483a;
border-bottom: 1px solid #a63b2e;
float: right;
box-shadow: 0 1px 0 #E87A6E inset;
}
form#login a{
text-decoration: none;
}
form#login a.close{
color: #DCDCDC;
position: absolute;
right: 15px;
top: 15px;
}
form#login a.lost{
color: #B4B2B2;
float: left;
margin: 10px 0 0 0;
}
form#login p.status{
text-align: center;
margin: -25px 0 20px 0;
display: none;
}
a.login_button{
font-family: Arial, Helvetica, sans-serif;
padding: 5px 7px 5px 7px;
background-color: #FFF;
border-radius: 3px;
border: 1px solid #DCDCDC;
color: #333;
text-decoration: none;
font-size: 11px;
}
.login_overlay{
height: 100%;
width: 100%;
background-color: #F6F6F6;
opacity: 0.9;
position: fixed;
z-index: 998;
}

Gửi thông tin người dùng thông qua AJAX

Khi người dùng điền vào mẫu với tên truy cập và mật khẩu của mình, chúng tôi cần phải gửi dữ liệu đến máy chủ, xem nếu dữ liệu được chèn là chính xác và dựa trên thực tế, thông báo cho người dùng rằng các đăng nhập thành công và thực hiện đăng nhập hoặc chỉ thông báo cho ông rằng dữ liệu của mình là không chính xác.

Tất cả các phía máy chủ đang kiểm tra sẽ được đặt bên trong các chủ đề của functions.php file.Chúng tôi sẽ tạo ra một chức năng mà sẽ bao gồm các tập tin JS của chúng tôi, tạo ra một đối tượng mới được gọi là JS ajax_login_object và cho phép người dùng không có đặc quyền (chưa đăng nhập) để gọi chức năng của chúng tôi.

functions.php

function ajax_login_init(){
wp_register_script('ajax-login-script', get_template_directory_uri() . '/ajax-login-script.js', array('jquery') );
wp_enqueue_script('ajax-login-script');
wp_localize_script( 'ajax-login-script', 'ajax_login_object', array(
'ajaxurl' => admin_url( 'admin-ajax.php' ),
'redirecturl' => home_url(),
'loadingmessage' => __('Sending user info, please wait...')
));
// Enable the user with no privileges to run ajax_login() in AJAX
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
// Execute the action only if the user isn't logged in
if (!is_user_logged_in()) {
add_action('init', 'ajax_login_init');
}

Chú ý wp_ajax_nopriv_ajaxlogin móc, đó là phần quan trọng nhất. Nếu bạn bỏ qua “nopriv” và sử dụng wp_ajax_ajaxlogin sau đó chỉ có người dùng đã đăng nhập có thể truy cập vào các chức năng.Chúng tôi tiếp tục bằng cách làm cho một chức năng thu thập các dữ liệu nhận được từ phương thức POST, kiểm tra nếu nonce là hợp lệ và sau đó cố gắng để thực hiện đăng nhập người dùng với các dữ liệu nhận được.

functions.php

function ajax_login(){
// First check the nonce, if it fails the function will break
check_ajax_referer( 'ajax-login-nonce', 'security' );
// Nonce is checked, get the POST data and sign user on
$info = array();
$info['user_login'] = $_POST['username'];
$info['user_password'] = $_POST['password'];
$info['remember'] = true;
$user_signon = wp_signon( $info, false );
if ( is_wp_error($user_signon) ){
echo json_encode(array('loggedin'=>false, 'message'=>__('Wrong username or password.')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=>__('Login successful, redirecting...')));
}
die();
}

Tất cả những gì còn lại là làm cho các nút “login” cho thấy hình thức của chúng tôi và gửi dữ liệu mẫu với AJAX đến chức năng trên. Tạo một tập tin gọi là “ajax-login-script.js” và đặt nó bên trong thư mục theme của bạn.

ajax-login-script.js

jQuery(document).ready(function($) {
// Show the login dialog box on click
$('a#show_login').on('click', function(e){
$('body').prepend('<div class="login_overlay"></div>');
$('form#login').fadeIn(500);
$('div.login_overlay, form#login a.close').on('click', function(){
$('div.login_overlay').remove();
$('form#login').hide();
});
e.preventDefault();
});
// Perform AJAX login on form submit
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});

Đó là nó! Bạn có tìm kiếm hình thức đăng nhập AJAX đẹp bây giờ. Điều phủ cách tốt nhất để làm AJAX trong WordPress nhưng bạn cũng nên xem xét thêm một xác nhận lối vào mẫu.

Login Ajax Wordpress không dùng Plugin

Nguồn bài viết: http://natko.com/wordpress-ajax-login-without-a-plugin-the-right-way/

Thêm bình luận
0 Trả lời

Trả lời của bạn

Bằng cách gửi bài trả lời của bạn, bạn đồng ý với Chính sách bảo mậtđiều khoản dịch vụ.