هربار بحث Ajax پیش میاد مطمئن میشیم که میتونیم یه عمل رو خیلی بهتر و جالب تر انجام بدیم. خودم وقتی با Ajax آشنا شدم خیلی خوشم اومد و با این تکنولوژی میشه خیلی کار رو سریع تر، بهینه تر، جالب تر و خیلی تر های دیگه… تو این آموزش میخوایم برای قیمت پوسته یا حتی زمانی که خودمون پوسته مینویسیم این امکان رو داخل وردپرس قرار بدیم که کاربر بوسیه Ajax به سایت وارد بشه و نیازی به رفتن به صفحه لاگین خود وردپرس نباشه. یعنی یه کد که فرم ورود با ajax رو پیاده سازی کنه. هم بهینه تر و هم زیباتر…
مثل این:
تو این آموزش هم فقط از ۶ تابع زیر در پوسته استفاده میکنیم:
- wp_enqueue_script + wp_localize_script
- wp_nonce_field + check_ajax_referer
- is_user_logged_in + wp_signon
پس با این آموزش میتونین یه ورود ای جکسی رو به سایت ایجاد بکنین پس شروع میکنیم.
چگونگی پیاده سازی بخش ورود
به طور کلی رورش های مختلفی هست که ما “بخش ورود” رو روی وبسایت پیاده سازی کنیم. میتونین بصورت اختصاصی یه برگه با نام “ورود” ایجاد کنیم که فرم ورود رو داخلش نمایش بدیم.(برا این کار میتونیم از یه فایل با نام page-login.php و معرفی یه Template استفاده کنیم.) راه دیگه هم اینه که فرم رو بصورت همیشگی در زیر بخش هدر یا سایدبار نمایش بدیم. راه سوم اینکه که یه جعبه ورود(لاگین باکس) ایجاد کنیم که کاربر با کلیک روی دکمه یا لینک “ورود” جعبه براش نشون داده میشه و کاربر اطلاعات رو تکمیل میکنه و بصورت Ajax ورود رو انجام میده.
بخش HTML مربوط به Ajax Login
فرم ما میتونه هز جای تگ body قرار بگیره و من پیشنهاد میکنم که در فایل header.php پوسته شما و بعد از شروع تگ body قرار بگیره:
<body>
<form id="login" action="login" method="post">
<h1>صفحه ورود</h1>
<p class="status"></p>
<label for="username">نام کاربری:</label>
<input id="username" type="text" name="username">
<label for="password">گذرواژه:</label>
<input id="password" type="password" name="password">
<a class="lost" href="<?php echo wp_lostpassword_url(); ?>">آیا گذرواژه خود را فراموش کرده اید؟</a>
<input class="submit_button" type="submit" value="ورود" name="submit">
<a class="close" href="">بستن</a>
<?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
</form>
... همونطور که میبینین از یک تابع wp_nonce_field که یک فیلد مخفی برای امنیت با مقدار ajax-login-nonce البته هش شده ایجاد میکنه استفاده میکنیم. حالا اگه صفحه رو رفرش کنین یه صفحه و فرم زشت رو میبینین ولی ما باید یه دکمه یا لینک بذاریم که که با کلیک روی اون این فرم بصورت یه جعبه شناور نمایش داده بشه. این کد رو هم میتونین داخل 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 } ?>خب حالا باید برین سراغ استایل دادن و اینکه با کلیک چه اتفاقی بیفته.
استایل بخش فرم ورود با ajax
این کد ها هم استایل ما که میتونین داخل style.css قرار بدین:
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;
}ارسال اطلاعات کاربر با Ajax
وقتی کاربر اطلاعات نام کاربری و گذرواژه رو تکمیل کرد و ارسال کرد اگه اطلاعات درست بود و لاگین انجام بشه که پیام لاگین موفقیت آمیز رو نشون بده در غیر این صورت پیام خطا رو نشون بده.
تمام پردازش سمت سرور رو داخل فایل functions.php قرار میدیم. یه تابع ایجاد میکنیم که فایل JS مارو لود کنه بعدشم یه شی ajax_login_script برای اطلاعات مورد نیاز برای درخواست Ajax در وردپرس ایجاد میکنیم و همچنین کاری میکنیم تا کاربرایی که لاگین هم نکردن بتونن درخواست Ajax بدن.
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');
} حتما به wp_ajax_nopriv_ajaxlogin توجه کنید که مهمترین بخش کاره. اگه nopriv رو نذارین فقط کاربرایی که لاگین کردن میتونن تابع ajax_login رو صدا بزنن که مطمئنا ما این رو نمیخوایم. تایع ajax_login هم پردازش POST رو انجام میده. اول مقدار nonce رو تایید میکنه و بعدش عمل لاگین انجام میشه و نتیجه بصورت json ارسال میشه:
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();
} حالا باید قسمت جاوا اسکریپت و جی کوئری رو انجام بدیم. این فایل هم با نام 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();
});
});موفق باشید…