Как создать AJAX-вход на WordPress без использования плагинов

Как создать AJAX-вход на Wordpress без использования плагинов

При выполнении AJAX на основе WordPress вы должны убедиться , что вы делаете это правильно . В этой статье вы столкнетесь с лучшим способом создания AJAX, как описано на Кодекс и многих других веб — сайтов .

Имейте ввиду, что WordPress содержит тонну функций, которые вы можете использовать, для того чтобы сделать работу сайта намного проще. В этой статье для обработки формы будут использоваться следующие функции:

  • wp_enqueue_script + wp_localize_script
  • wp_nonce_field + check_ajax_referer
  • is_user_logged_in + wp_signon

Следуя этой статье вы сможете создать форму входа, которая проверяет учетные данные пользователя.

Концепции входа

Во-первых, есть несколько способов, с помощью которых можно реализовать вход на своем сайте. Вы можете создать специальную страницу под названием «Логин» и отобразить форму на пустой странице с шаблоном page-login.php. Второй вариант является вызовом модального окна с формой входа при нажатии на кнопку/ссылку «Логин». Третий вариант, состоит в том, чтобы форма входа была все время видна: в шляпе сайта или на боковой панели. Именно этот вариант будет описан в этой статье, но вы можете легко применить эту технику для любого из вышеуказанных вариантов.

HTML-код формы

Форма должна быть размещена в нужном месте внутри тега <body>.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<?php if (is_user_logged_in()) { ?>
    <a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a>
<?php } else { ?>
   <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">
        <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?>
    </form>
<?php } ?>

Мы создали условие if (is_user_logged_in()), которое отображает форму входа если пользователь не вошел на сайте и ссылку на выход — если вошел. В конце формы находиться функция wp_nonce_field, которая создает скрытое поле с ИД «безопасности» и значением «Аякса-авторизации одноразового номера», но в виде хэша.

Стилизация формы

Это минимумальный код CSS, который вы можете поместить в вашем style.css.

1
2
3
4
5
6
7
8
9
form#login{
    background-color: #FFFFFF;
    padding: 40px 25px 25px 25px;
    width: 350px;
}
 
form#login p.status{
    display: none;
}

Отправка информации о пользователе с помощью AJAX

Когда пользователь заполняет форму со своим именем пользователя и паролем нам нужно отправить эти данные на сервер, проверить, если данные введены правильно и, основываясь на том факте, уведомить пользователя о том, что Вход был успешным, ну и естественно выполнить вход в систему или просто уведомить, что данные неверны.

Весь код на стороне сервера проверки будет помещен внутри файла functions.php темы. Мы создадим функцию, которая будет находиться в нашем файле JS, создадим новый объект JS под названием ajax_login_object и позволим пользователям без каких-либо привилегий (не вошедших в систему) вызвать нашу функцию.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
function ajax_login_init(){
 
    wp_register_script('ajax-login-script', get_template_directory_uri() . '/js/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' => __('Проверка данных...')
    ));
 
    // Позволяем пользователю без каких-либо привилегий запуск функции ajax_login () в AJAX
    add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
 
// Выполняем действие ajax_login_init, только если пользователь не вошел в систему
if (!is_user_logged_in()) {
    add_action('init', 'ajax_login_init');
}
 
function ajax_login(){
 
    // Сначала проверяем одноразовое значение скрытого поля безопасности и если оно выходит из строя - выполнение функции будет прервано
    check_ajax_referer( 'ajax-login-nonce', 'security' );
 
    // Получаем данные POST и выводим результат
    $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. Создайте файл с именем ajax-login-script.js и поместите его в папку вашего шаблона.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
jQuery(document).ready(function($) {
 
    // Выполнение AJAX-запроса при нажатии на кнопку Входа
    $('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', //вызов нашей функции 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 в WordPress!

Комментарии? Вопросы?



Опубликовано 19.12.2016 в Wordpress

Оставить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Back to Top