Всплывающая форма авторизации на 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

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

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

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