Ajax авторизация в WordPress без плагинов

Среди систем с помощью которых мы разрабатываем сайты, есть CMS система WordpPress и сегодня речь пойдет о том, как сделать форму ajax авторизации на wordpress без плагина. Передо мной стояла задача сделать максимально просто и быстро + возможности встраивания в дизайн и адаптации к любому шаблону.

Итак, поехали. Все наше творение будет состоять из html+php кода (вписываемый в шаблон код) и javascript с подключенным jQuery.

Создаем форму авторизации в нашей теме. К примеру выводить будем в header.php

Ниже приведена самая простая базовая разметка формы для wordpress.

<div id="wlLoginDiv">
<?php
//Если пользователь не авторизован
if ( is_user_logged_in() ) {
// показываем кнопку войти
echo "<a href=".wp_logout_url( get_permalink() )." title='Выйти'>Войти</a>";
} else {
// иначе показываем кнопку выйти
echo "<a href='#' id='wlLoginLink' title='Выйти'>Войти</a>";
}
?>
<!--Изначально прячем форму-->
<form name="login-form" id="wlLoginForm" style="display: none;">

<!--Тут будет текст ошибки-->
<p id="message" style="color:red"></p>

<label>Логин<input placeholder="Ваш логин" type="text" name="log" id="my-user-login" value="" /></label>
<label>Пароль<input type="Ваш пароль" name="pwd" id="my-user-pass" value="" /></label>

<label><input name="rememberme" type="checkbox" id="my-rememberme" value="forever" />Запомнить меня</label>
<input type="submit" name="wp-submit" id="my-submit" value="Войти"/>
<?php wp_nonce_field('my-nonce'); ?>
<input type="hidden" name="testcookie" value="1" />
</form>
<div id="wlLoginResult" style="display: none;">
</div>
</div>

Теперь пишем javaScript код. Логика проста, пользователь кликает на ссылку «Войти», показываем форму входа, пользователь вводит данные, отсылаем данные помощью jquery ajax, получаем ответ и выводим ошибку или меняем ссылку «Войти» на «Выйти»

jQuery(document).ready(function($){
//Скрываем\Показываем по клику форму входа
$("#wlLoginLink").click(function(){
$("#wlLoginForm").toggle(200);
});
// Обрабатываем нажатие кнопки
$("#my-submit").click(function() {
// turn loading screen on
$('#login-result').toggle();
//После клика прячем форму
$('#wlLoginForm').hide(200);
//Данные для формы берем из #wlLoginForm
var input_data = $('#wlLoginForm').serialize();
$.ajax({
type: "POST",
timeout: "5000",
url: "<?php echo site_url('wp-login.php','login_post'); ?>",
data: input_data,
success: function(msg) {
// Если авторизация не удалась, пользователь будет перенаправлен на форму входа в wordpress/
var reg1 = /login_error/g;
if (reg1.test(msg)) {
jQuery('#message').html("<?php _e('Вы ввели неверный логин или пароль.Пожалуйста, повторите попытку.','wllogin'); ?>");
}
else {
// Авторизация удалась
//Прячем загрузку
$('#wlLoginResult').toggle();
//Меняем ссылку "Войти" на "Выйти"
$("#wlLoginDiv").html("<a href='<?php echo wp_logout_url(home_url()); ?>' title='Logout'>Выйти</a>");
}
}
});
// Пряем загрузку
$('#wlLoginResult').toggle();
// prevent actual submission of form
return false;
});
});

Для наглядности добавлена визуализация процесса загрузки (маленький крутящийся кружочек).Оформляем его на css

#wlLoginDiv {position: relative;}

#wlLoginForm {position: absolute;}

#wlLoginResult {display: block; width: 16px; height: 16px; background: url('loading.gif');}

На этом минимальный набор для ajax авторизации в wordpress без плагина, собран! Буду рад ответить на ваши вопросы в комментариях.

Последняя редакция 28 января, 2023 в 11:01