• Всплывающая форма авторизации на ajax без плагинов [готовое решение]

    Готовые решения4 комментария

    В данной статье мы сделаем для сайта на wp всплывающую  форму авторизации с использованием технологии ajax.

    Ajax будем использовать для проверки вводимых данных пользователем, то есть без перезагрузки страницы мы будем определять правильность ввода логина и пароля и выдавать соответствующие сообщения пользователю.

    Как это будет выглядеть:

    ajax_forma

    Первое что мы сделаем, это сделаем это создадим новый .php файл в папке с вашим шаблоном. Этот файл будет содержать html разметку нашей формы.

    Создаем файл header-login.php (в корневой папке вашего шаблона).

    Вставим следующий код в файл и сохраним:

    <?php
    if (!is_user_logged_in()) {
    ?>
    
    <div class="masck none"></div>
    <div class="login_box_center none">
    <div class="login_box">
    <h3>Войти</h3>
    <a href="#" class="close-form">Закрыть</a>
    <form id="login" action="login" method="post">
    <p class="status_login"></p>
    <div class="line">
    <i class="icon-user"></i>
    <input id="username" class="input_text" type="text" placeholder="Ваш логин" name="username" />
    </div>
    <div class="line">
    <i class="icon-key"></i>
    <input id="password" class="input_text" type="password" placeholder="Ваш пароль" name="password" />
    </div>
    <div class="line" style="display: none;">
    <input name="rememberme" type="checkbox" id="my-rememberme" checked="checked" value="forever" />
    </div>
    <div class="line cf">
    <input class="submit_button" type="submit" value="Войти" name="submit">
    <div class="login_link">
    <a class="reg_link" href="<?php bloginfo('url'); ?>/wp-login.php?action=register">Регистрация</a> /
    <a class="lost_pass_link" href="<?php bloginfo('url'); ?>/wp-login.php?action=lostpassword">Забыли пароль?</a>
    </div>
    </div>
    <?php wp_nonce_field('ajax-login-nonce', 'security'); ?>
    </form>
    </div>
    </div>
    
    <?php } ?>

     

    В данном файле мы выведем html код формы авторизации, если пользователь не авторизован.

    .masck .none — данный блок служит для затемнением фона, когда всплывает окно (по умолчанию скрыт класс .none).

    .login_box_center .none — блок с формой (по умолчанию скрыт класс .none).

     

    Следующим действием подключим данный файл к файлу header.php. Для этого сразу после открывающегося тега <body> пропишите следующий код:

    <?php get_template_part( 'header', 'login' ); ?>

     

    Теперь нам нужно прописать стили для нашей формы, для этого в файл style.css добавите следующие стили(стили можете прописать свои, главное оставить классы none .login_box_center и .masck .none)

    .masck {
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE 5.5+*/
    -moz-opacity: 0.5; /* Mozilla 1.6 и ниже */
    -khtml-opacity: 0.5; /* Konqueror 3.1, Safari 1.1 */
    opacity: 0.5; /* CSS3 - Mozilla 1.7b +, Firefox 0.9 +, Safari 1.2+, Opera 9+ */
    background: black;
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: 99980;
    }
    .login_box_center {
    margin-left: 50%;
    position: fixed;
    z-index: 99990;
    top: 250px;
    }
    .close-form {
    color: black;
    cursor: pointer;
    float: right;
    font-size: 14px;
    position: absolute;
    right: 15px;
    top: 9px;
    z-index: 99991;
    }
    .login_box {
    float: right;
    width: 368px;
    margin-left: -184px;
    background-color: #e1e1e1;
    background: white;
    padding: 10px 15px;
    }
    /* Form */
    #login{
    padding: 15px 0 25px;
    position: relative;
    width: 365px;
    }
    .status_login {
    color: #666;
    display: none;
    font-size: 14px;
    height: 25px;
    position: relative;
    text-align: center;
    width: 100%;
    }
    .line {
    position: relative;
    }
    .line i {
    position: absolute;
    left: 10px;
    top: 5px;
    color: #999999;
    font-size: 18px;
    }
    .line .input_text {
    background-color: rgb(255, 255, 255);
    border: 1px solid #ccc;
    box-shadow: 0 1px rgba(255, 255, 255, 1);
    display: block;
    font-size: 15px;
    height: 30px;
    margin: 0 0 10px;
    padding-left: 10px;
    width: 355px;
    }
    .line .input_text:focus {
    outline: none;
    /*border-color: #ff9900;*/
    }
    .login_box > h3 {
    font-size: 18px;
    line-height: 12px;
    }
    #login input:-webkit-autofill {
    background-color: rgb(255,255,255) !important;
    -webkit-box-shadow:0 0 0 50px white inset;
    }
    .submit_button {
    display: block;
    width: 100px;
    height: 30px;
    float: left;
    margin: 0 30px 0 0;
    position: relative;
    border: none;
    background:#106fe5;
    cursor: pointer;
    font-size: 14px;
    color: #f6f6f6;
    }
    /* User Login */
    .login_link {
    float: right;
    display: block;
    font-size: 13px;
    margin: 5px 0 0;
    text-shadow: 0 1px white;
    }
    .login_link a {
    padding: 0 5px;
    }
    .login_box img {
    float: left;
    margin: 65px 15px 0px 20px;
    }
    .login_box .user_aside {
    float: left;
    margin: 65px 0 0 0;
    }
    .user_aside .user_name {
    font-size: 15px;
    display: block;
    padding: 3px 0;
    }
    .user_aside .user_name strong {
    text-shadow: 0 1px white;
    }
    .user_aside a {
    text-shadow: 0 1px white;
    font-size: 13px;
    }
    .user_aside a:hover,
    .login_link a:hover {
    /*text-decoration: underline;*/
    }

     

    Добавим ссылку при нажатии на которую будет всплывать наша форма.

    <a id="login-ajax" href="#">Войти</a>

     

    Вы можете разместить ее в любом месте, или даже вообще не использовать ссылку, а например картинку, главное добавить к элементу id=»login-ajax»

    Теперь нам нужно прописать код js для того что бы наша форма открывалась и скрывалась(скрывалась по нажатию ссылки «Закрыть»).

    Для этого создадим .js файл в корневой попки вашей темы, назовем его ajax_form.js.

    Подключим js файл к нашему шаблону, для этого в файле functions.php пропишите следующий код:

    //  Ajax Login
    function ajax_login_init(){
    
    /* Подключаем скрипт для авторизации */
    wp_register_script('ajax-login-script', get_template_directory_uri() . '/ajax_form.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' => $_SERVER['REQUEST_URI'],
    'loadingmessage' => __('Идет проверка данных...')
    ));
    
    // Разрешаем запускать функцию ajax_login() пользователям без привелегий
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
    }
    
    // Выполняем авторизацию только если пользователь не вошел
    if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
    }

     

    Добавим следующий код открытия и закрытия формы:

    jQuery(document).ready(function() {
    //  open login form
    jQuery(document).on('click', '#login-ajax', function(event) {
    jQuery('.masck').removeClass('none');
    jQuery('.login_box_center').removeClass('none');
    return false;
    });
    //  close login form
    jQuery(document).on('click', '.close-form', function(event) {
    jQuery('.masck').addClass('none');
    jQuery('.login_box_center').addClass('none');
    return false;
    });
    
    // ниже ajax проверка
    
    });

     

    И так у нас есть форма которая открывается и закрывается. Теперь можно делать проверку на правильность ввода данных в нашу форму. Для этого нам нужно в файле ajax_form.js дописать после комментария следующий код:

    // ниже ajax проверка
    
    jQuery('.login_box #login').on('submit', function(e) {
    jQuery('.login_box .status_login').show().text(ajax_login_object.loadingmessage);
    jQuery.ajax({
    type: 'POST',
    dataType: 'json',
    url: ajax_login_object.ajaxurl,
    data: {
    'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
    'username': jQuery('.login_box #username').val(),
    'password': jQuery('.login_box #password').val(),
    'security': jQuery('.login_box #security').val()
    },
    success: function(data) {
    jQuery('.login_box .status_login').text(data.message);
    if (data.loggedin == true) {
    document.location.href = ajax_login_object.redirecturl;
    }
    }
    });
    e.preventDefault();
    });

     

    Теперь наша форма может послать запрос на проверку данных, осталось прописать саму проверку на php для этого в файл functions.php добавьте следующую функцию:

    function ajax_login(){
    
    // Первым делом проверяем параметр безопасности
    check_ajax_referer( 'ajax-login-nonce', 'security' );
    
    // Получаем данные из полей формы и проверяем их
    $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();
    }

     

    Вот и все! Форма готова!

    Если у вас возникли трудности или вопросы, можете задать их в комментариях.


    4 комментария

    • Seosko 18.05.2015

      Очень отличное и простое решение, давно искал подробную инфу по реализации регистрации и авторизации, спс.

    • Дмитрий 12.01.2016

      Было бы здорово еще ссылку на пример работающего скрипта, и архив для скачивания. А то многие скрипты мучаешься, собираешь, а запустить не можешь. Время жалко. А скрипт наверное прикольный у вас.

      • trubine 13.01.2016

        По моему все расписано что куда копировать, если есть вопросы — задавайте.
        По примеру, не могу предоставить так как на своих сайтах — нет, а предоставить сайт заказчика — так же не могу(ему это не понравится).

        • Дмитрий 13.01.2016

          Я не смог его собрать. Согласен, что програмюга из меня не ахти. Но если бы было хотя-бы расписано полностью по файлам, то было бы проще.

    Добавить комментарий

    Войти с помощью: