تبلیغات تبلیغات
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات

آموزش ایجاد فرم ورود Ajax در وردپرس

مقالات,آموزش,ترفند , وردپرس

صفحه لاگین در وب سایت ها همیشه دارای اهمیتی خاص بوده و هست و البته خواهد بود چرا که کاربران وب سایت وقتی قرار است از صفحه لاگین استفاده کنند بسیار روی این موضوع و ظاهر این صفحه حساس هستند.بهتر است ابتدا کمی در مورد ajax صحبت کنیم. قطعا نمی توان ajax را به سادگی توصیف کرد اما می توان به طور ساده آن را توضیح داد.

 

آموزش ایجاد فرم ورود Ajax در وردپرس

 

هدف ما در آموزش امروز این است که به شما بیاموزیم که چگونه می توانید یک فرم ایجکس برای قسمت ورود سایت خود ساخته و از آن استفاده کنید.برای انجام این کار سه روش متفاوت وجود دارد که در زیر به آن ها می پردازیم و یک به یک آن ها را مورد بررسی قرار خواهیم داد اما پیش از آن باید در مورد چیستی ایجکس کمی توضیحات ارائه شود.

 

ایجکس چیست و در ایجاد فرم ها در سایت چه نقشی دارد؟

قابلیت ایجکس در وب سایت ها سبب زیبا تر شدن لود فرم ها و بخش های مختلف سایت میشود و افکت هایی را روی ان ها قرار میدهد تا از حالت یکنواخت خارج شوند. حال در این آموزش ما با استفاده از همین قابلیت برنامه نویسی برای شما ایجاد صفحه ورود را اموزش خواهیم داد.

 

برای این کار روش های زیر موجود است:

  • در روش اول شما میتوانید از یک برگه برای ورود استفاده کنید. یعنی یک برگه ایجاد کرده و به کاربران نمایش دهید.
  • در روش دوم میتوانید فرم ورود را در بخش ابزارک ها برای کاربران به نمایش بگذارید.
  • در روش سوم هم میتوانید یک پاپ آپ برای نمایش فرم ها داشته باشید.

 

در این اموزش روش سوم را مورد بررسی قرار میدهیم چون روش های اول و دوم در قالب های وردپرس موجود است.

در ابتدا و برای شروع باید کد های html فرم را در تگ body قالب قرار دهید که بهترین مکان ان فایل header.php است.این کد ها به صورت زیر است:

 

<body>
     
<form id="login" action="login" method="post">
        <h۱>ورود به سایت</h۱>
         
 
 
        <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="Login" name="submit">
        <a class="close" href="">(بستن)</a>
        <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
    </form>

 

در ادامه یک دکمه نیز برای ورود نیاز داریم که میتوانید در هر قسمت از صفحه که مد نظر دارید قرار دهید و با استفاده از css آن را تنظیم کنید:

 

<?php if (is_user_logged_in()) { ?>
    <a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>">خروج</a>
<?php } else { ?>
    <a class="login_button" id="show_login" href="">ورود</a>
<?php } ?>

 

در مرحله بعد نیاز است که اطلاعات به سرور ارسال شود تا درستی اطلاعات مورد تائید قرار گرفته و فرم کاربر را به داخل سایت هدایت کند.برای این منظور شما باید کد زیر را در فایل 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' => __('در حال ارسال اطلاعات ، لصفا صبر کنید...')
    ));
 
    // 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');
}

 

کد فوق را در انتهای فایل فانکشن قالب وردپرس خود قرار دهید. اما یک تابع دیگر نیز نیاز است تا اعتبار سنجی اطلاعات را انجام دهد که به صورت زیر است:

 

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'=>__('نام کاربر یا رمز عبور اشتباه است.')));
    } else {
        echo json_encode(array('loggedin'=>true, 'message'=>__(ورود موفقیت آمیز ، در حال انتقال...')));
    }
 
    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(۵۰۰);
        $('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();
    });
 
});

 

در ادامه یک نمونه استایل برای فرم شما اماده کرده ایم که میتوانید استفاده کنید تا خود فرم سایت خود را استایل دهی نمائید.

 

form#login{
    display: none;
    background-color: #FFFFFF;
    position: fixed;
    top: ۲۰۰px;
    padding: ۴۰px ۲۵px ۲۵px ۲۵px;
    width: ۳۵۰px;
    z-index: ۹۹۹;
    left: ۵۰%;
    margin-left: -۲۰۰px;
}
 
form#login p.status{
    display: none;
}
 
.login_overlay{
    height: ۱۰۰%;
    width: ۱۰۰%;
    background-color: #F۶F۶F۶;
    opacity: ۰.۹;
    position: fixed;
    z-index: ۹۹۸;
}

 

خب به همین سادگی یک فرم بسیار خوب و شیک و حرفه ای برای وب سایت خود طراحی کردیم.

این مقاله چقدر براتون مفید بود؟

از ۱ تا ۵ امتیاز بدید.

میانگین رتبه 0 / 5. تعداد رای : 0

تا حالا کسی رای نداده! اولین نفر شما باشید.

دانلود

هاست ارزان، لایت اسپید، سرور مجازی منطبق با اسکریپت های 20script کلیک کنید >
هاست وردپرس پرسرعت لیموهاست - آپ تایم 99% - مخصوص وردپرس خرید هاست >
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=27546
کلمات کلیدی پست :
مطالب مرتبط
6,907افزونه وردپرس مترجم وب سایت Ajax Translator تاریخ : 2015/06/30
3,780افزودن css و جاوا اسکریپت سفارشی به قالب وردپرس تاریخ : 2019/09/14
6,359دانلود قالب میزبانی وب Aox Host برای وردپرس تاریخ : 2017/11/21
5,938آموزش ساخت برگه سفارشی در وردپرس تاریخ : 2018/02/15
13,580آموزش درج تاریخ بروزرسانی مطالب در وردپرس تاریخ : 2016/09/16
49,063بهترین افزونه های رایگان برای نمایش سایت وردپرس بر روی موبایل تاریخ : 2014/06/10
8,842دانلود قالب وردپرس وان اسکریپت نسخه 1394 تاریخ : 2016/01/8
3,900۲۵ سوال مهم در وردپرس که باید پاسخ آن را بدانید تاریخ : 2018/11/21
9,453آموزش راستچین کردن قالب وردپرس تاریخ : 2017/12/17
4,004آموزش هماهنگ سازی قالب با ووکامرس تاریخ : 2019/11/2
7,857اشتراک گذاری آسان مطالب با افزونه Sociable تاریخ : 2016/04/7
3,668نمایش اعلان سفارشی در پیشخوان وردپرس تاریخ : 2019/11/25
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت ها
قالب دخترونه و آرایش
قالب زیبای ماشین
قالب فانتزی و طنز چِشم
قالب دختر رویایی
قالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درخت
قالب دختر زیبا
قالب پسرونه غمگین
قالب عاشقانه قلب
تبلیغات
تبلیغات