فرم ورود ajax در وردپرس

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

بوسیله صابر اعظمی 1

صفحه لاگین در وب سایت ها همیشه دارای اهمیتی خاص بوده و هست و البته خواهد بود چرا که کاربران وب سایت وقتی قرار است از صفحه لاگین استفاده کنند بسیار روی این موضوع و ظاهر این صفحه حساس هستند.بهتر است ابتدا کمی در مورد 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 قاب ورپرس خود قرار دهید :

بیشتر بخوانید : افزونه چت آنلاین و پشتیبانی Crisp وردپرس 

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: ۹۹۸;
}



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





            


    


            

            



        

            

            



        

            

            



        

            

            



        

            

            



        

    

    


            

            



        

            

            



        

            

            



        

            

            



        

            

            



        

    



                



            3/5 - (2 امتیاز)
صابر اعظمی 148 پست 52 دیدگاه

کارشناس سئو
علاقه مند به حوزه دیجیتال مارکتینگ

مطالب مرتبط بیشتر از نویسنده
1 نظر
  1. علی می گوید

    با سلام و عرض و ادب
    بسیار عالی بود سپاسگزارم
    فقط اگر بخواهیم بعد از ورود، همون صفحه ای که در آن هستیم رفرش بشه و نره به صفحه اصلی سایت باید چه کدی و کجای کدهای بالا اضافه کرد؟
    باز هم سپاسگزارم…

    پاسخ
ارسال یک پاسخ

آدرس ایمیل شما منتشر نخواهد شد.