سلام. نمیدونم چیزی در مورد ajax می دونید یا نه ، امروز میخوام یه توضیح مختصر از ajax بدم و یک کاربردش رو در وردپرس براتون بگم.در واقع امروز نحوه ایجاد فرم ورود به وردپرس با ajax بدون افزونه را می خواهیم یاد بگیریم. ajax به ما کمک می کند تا بخش هایی از صفحه را بدون بارگذاری کل صفحه (refresh) به روز رسانی کنیم. قطعا این قابلت بسیار کاربردی می باشد که خیلی ها دنبال آن هستند چون بارگذاری مجدد صفحات وب هزینه بر و زمانبر است و همچنین باعث می شود پهنای باند وب کاربر بسیار مصرف شود. پس قطعا استفاده از ajax بسیار مقرون به صرفه تر است. بسیاری از سایت های معروف مثل you tube, gmail,google maps,facebook از این فن آوری استفاده می کنند.
نحوه ایجاد فرم ورود به وردپرس با ajax بدون افزونه
فناوری AJAX چیست؟
واژه AJAX با تلفظ اي‌جکس يا اي‌ژاکس سرنام عبارت Asynchronous Java and XML و به معني ترکيب نامتقارن جاوا اسکريپت و XML است. ماهيت صفحات وب و پروتکل HTTP به گونه‌اي است که به طور معمول وقتي درحال وب‌گردي هستيم، به ازاي هر کنش و واکنش ميان ما و سايتي که در حال کار با آن هستيم، کل يک صفحه وب از نو بارگذاري و تازه‌سازي (refresh) مي‌شود.
حالا که با ajax اشنایی پیدا کردیم می خواهیم این امکان رو به کاربر بدیم که بوسیله ajax وارد سایت بشود و نیازی به رفتن به صفحه لاگین نباشد.
اینجا از 6 تابع زیر در پوسته استفاده می کنیم:
- wp_enqueue_script + wp_localize_script
- wp_nonce_field + check_ajax_referer
- is_user_logged_in + wp_signon
نحوه پیاده سازی بخش ورود
می توانید بصورت اختصاصی یک برگه با نام “ورود” ایجاد کنیم که فرم ورود را داخلش نمایش بدیم.(برا این کار میتوانیم از یک فایل با نام page-login.php و معرفی یه Template استفاده کنیم.) راه دیگه هم این است که فرم رو بصورت همیشگی در زیر بخش هدر یا سایدبار نمایش بدیم. راه سوم اینکه که یه جعبه ورود(لاگین باکس) ایجاد کنیم که کاربر با کلیک روی دکمه یا لینک “ورود” جعبه بریش نشان داده شود و کاربر اطلاعات رو تکمیل میکند و بصورت Ajax ورود رو انجام میدهد.
کد html مربوط به ajaxlogin
این فرم میتواند درهر قسمت تگ 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();
}
حالا باید قسمت جاوا اسکریپت و jquery را انجام بدهیم. این فایل هم با نام 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();
});
});
این بود اموزش نحوه ایجاد فرم ورود به وردپرس با ajax بدون افزونه ، سایر اموزش های مربوط به وردپرس را می توانید با مراجع به سایت ما یاد بگیرید.
با سلام و عرض و ادب
بسیار عالی بود سپاسگزارم
فقط اگر بخواهیم بعد از ورود، همون صفحه ای که در آن هستیم رفرش بشه و نره به صفحه اصلی سایت باید چه کدی و کجای کدهای بالا اضافه کرد؟
باز هم سپاسگزارم…