ارزدیجیتال
حراجی دامنه های ویژهمشاهده
تبلیغات
تبلیغات تبلیغات
تبلیغات ژاکت, مرجع خرید قالب و افزونه وردپرسی اورجینال

آموزش ایجاد فرم ورود 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 کلیک کنید >

خرید ارز
مطلب مفیدی بود ؟
نویسنده : تیم محتوای 20اسکریپت 0 مقالات,آموزش,ترفند , وردپرس
لینک کوتاه مطلب : https://www.20script.ir/?p=27546
کلمات کلیدی پست :
مطالب مرتبط
11,702در دسترس قرار دادن پیشنمایش نوشته های وردپرس با Public Post Preview تاریخ : 2017/04/20
9,888آموزش تغییر عنوان ایمیل های ارسالی در وردپرس تاریخ : 2014/06/6
9,862نمایش پیغام دلخواه در صفحات مدیریت وردپرس تاریخ : 2016/04/6
9,962دانلود قالب قبلی سایت نالفا نسخه ۲.۲ تاریخ : 2014/10/3
6,556شیوع بدافزار WP-VCD در وردپرس و راه حل آن تاریخ : 2020/02/10
10,808حذف لینک پیشفرض تصاویر وردپرس تاریخ : 2017/09/5
8,940آموزش تست افزونه‌های وردپرس تاریخ : 2019/07/8
10,241غیرفعال کردن دکمه آپدیت افزونه‌ها در وردپرس تاریخ : 2017/07/7
7,720افزودن Preloding Animation به وردپرس تاریخ : 2020/01/29
29,598افزونه ایجاد افکت بر روی اسکرول صفحات Scroll Magic برای وردپرس تاریخ : 2023/07/14
7,900وردپرس ۵٫۰ و تغییرات احتمالی آن تاریخ : 2018/10/4
21,917افزونه ساخت منو سفارشی Uber Menu برای وردپرس تاریخ : 2013/11/21
برخی از قالب های وبلاگ - بیست اسکریپت
قالب عشق بین انگشت هاقالب عشق بین انگشت ها
قالب دخترونه و آرایشقالب دخترونه و آرایش
قالب زیبای ماشینقالب زیبای ماشین
قالب فانتزی و طنز چِشمقالب فانتزی و طنز چِشم
قالب دختر رویاییقالب دختر رویایی
قالب وبلاگ دکوراسیونقالب وبلاگ دکوراسیون
قالب وبلاگ کلبه و درختقالب وبلاگ کلبه و درخت
قالب دختر زیباقالب دختر زیبا
قالب پسرونه غمگینقالب پسرونه غمگین
قالب عاشقانه قلبقالب عاشقانه قلب
بیست اسکریپت
اسکریپت
profile
sourceforge
profile webmaster
profile check
checker list
checker
checker
upload file