В данной статье мы сделаем для сайта на wp всплывающую форму авторизации с использованием технологии ajax.
Ajax будем использовать для проверки вводимых данных пользователем, то есть без перезагрузки страницы мы будем определять правильность ввода логина и пароля и выдавать соответствующие сообщения пользователю.
Как это будет выглядеть:
Первое что мы сделаем, это сделаем это создадим новый .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();
}
Вот и все! Форма готова!
Если у вас возникли трудности или вопросы, можете задать их в комментариях.
Очень отличное и простое решение, давно искал подробную инфу по реализации регистрации и авторизации, спс.
Было бы здорово еще ссылку на пример работающего скрипта, и архив для скачивания. А то многие скрипты мучаешься, собираешь, а запустить не можешь. Время жалко. А скрипт наверное прикольный у вас.
По моему все расписано что куда копировать, если есть вопросы — задавайте.
По примеру, не могу предоставить так как на своих сайтах — нет, а предоставить сайт заказчика — так же не могу(ему это не понравится).
Я не смог его собрать. Согласен, что програмюга из меня не ахти. Но если бы было хотя-бы расписано полностью по файлам, то было бы проще.