AJAX-форма авторизации на сайте WordPress

Wordpress

Добрый день! Сегодня речь пойдет о том как сделать свою абсолютно любую форму авторизации.

Сначала создадим HTML-форму для авторизации. В моем случае это форма в модальном окне.

HTML форма авторизации

<form id="ajax-login-form" method="post">
    <label for="username">Имя пользователя:</label>
    <input type="text" id="username" name="username" required>
    <input type="hidden" id="security" name="security" value="<?php echo wp_create_nonce('ajax-login-nonce'); ?>">


    <label for="password">Пароль:</label>
    <input type="password" id="password" name="password" required>

    <input type="submit" value="Войти">
    <div id="login-message"></div>
</form>

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

jQuery(document).ready(function($) {
    $('#ajax-login-form').on('submit', function(e) {
        e.preventDefault();

        var formData = {
            action: 'ajax_login',
            username: $('#username').val(),
            password: $('#password').val(),
            security: $('#security').val()
        };

        $.ajax({
            type: 'POST',
            url: ajax_login_object.ajax_url,
            data: formData,
            success: function(response) {
                if (response.success) {
                    $('#login-message').html('&lt;wp-p&gt;Вы успешно вошли!&lt;/wp-p&gt;');
                    // Перенаправление или обновление страницы
                    window.location.href = response.data.redirect_url;
                } else {
                    $('#login-message').html('&lt;wp-p&gt;' + response.data.message + '&lt;/wp-p&gt;');
                }
            },
            error: function() {
                $('#login-message').html('&lt;wp-p&gt;Произошла ошибка. Попробуйте еще раз.&lt;/wp-p&gt;');
            }
        });
    });
});

Теперь добавим PHP-код для обработки AJAX-запроса. Вы можете добавить этот код в файл functions.php вашей темы.

function ajax_login_init() {
    wp_register_script('ajax-login-script', get_template_directory_uri() . '/js/ajax-login.js', array('jquery'), null, true);
    wp_localize_script('ajax-login-script', 'ajax_login_object', array(
        'ajax_url' => admin_url('admin-ajax.php')
    ));
    wp_enqueue_script('ajax-login-script');
}
add_action('wp_enqueue_scripts', 'ajax_login_init');

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)) {
        wp_send_json_error(array('message' => 'Неверное имя пользователя или пароль.'));
    } else {
        wp_set_current_user($user_signon->ID);
        wp_send_json_success(array('redirect_url' => home_url()));
    }
}
add_action('wp_ajax_nopriv_ajax_login', 'ajax_login');
add_action('wp_ajax_ajax_login', 'ajax_login');

Теперь у вас есть AJAX-форма авторизации на сайте WordPress. Пользователи смогут авторизоваться без перезагрузки страницы, что улучшит пользовательский опыт

Разработка сайтов на Wordpress