Ajax login вход регистрация
Ajax 2016-11-11
194362
Санкт-Петербург
+79051803960
support@servicecore.ru
В файл functious.php
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' => $_SERVER['REQUEST_URI'],
'loadingmessage' => __('Проверяются данные, секундочку...')
));
// Разрешаем запускать функцию ajax_login() пользователям
add_action( 'wp_ajax_ajaxlogin' , 'ajax_login' ); // Для зарегистрированных пользователей
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' ); // Для не зарегистрированных пользователей
}
// Выполняем авторизацию только если пользователь не вошел
if (!is_user_logged_in()) {
add_action('init', '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) ){
echo json_encode(array('loggedin'=>false, 'message'=>__('Неправильный логин или пароль!')));
} else {
echo json_encode(array('loggedin'=>true, 'message'=>__('Отлично! Идет перенаправление...')));
}
wp_die();
}
В Файл style.css
.login_box {
float: right;
width: 330px;
margin: 0 0 30px 0;
background-color: #f6f4f4;
}
/* Form */
#login{
padding: 30px 10px 35px 10px;
position: relative;
}
.status_login {
display: none;
position: absolute;
top: 5px;
left: 10px;
text-align: center;
font-size: 12px;
color: #666;
}
.line {
position: relative;
}
.line i {
position: absolute;
left: 10px;
top: 5px;
color: #999999;
font-size: 18px;
}
.line .input_text {
display: block;
height: 30px;
margin: 0 0 10px;
font-size: 15px;
padding-left: 45px;
box-shadow: 0 1px rgba(255,255,255,1);
border: 1px solid #ccc;
background-color: rgb(255,255,255);
}
.line .input_text:focus {
outline: none;
border-color: #ff9900;
}
#login input:-webkit-autofill {
background-color: rgb(255,255,255) !important;
-webkit-box-shadow:0 0 0 50px white inset;
}
.submit_button {
display: block;
height: 30px;
float: left;
margin: 0 30px 0 0;
position: relative;
border: none;
background-color: #1688CA;
border-bottom: 1px solid #fff;
border-top: 1px solid #0071AD;
background-image: -moz-linear-gradient(top, #3382AF, #1688CA);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#3382AF), to(#1688CA));
background-image: -webkit-linear-gradient(top, #3382AF, #1688CA);
background-image: -o-linear-gradient(top, #3382AF, #1688CA);
background-image: linear-gradient(top, #3382AF, #1688CA);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3382AF', endColorstr='#ff1688CA', GradientType=0);
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: 10px 15px 10px 20px;
}
.login_box .user_aside {
float: left;
margin: 10px 0 0 0;
}
.user_aside .user_name {
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;
}
В шаблон страницы
<div class="login_box">
<?php global $user_ID, $user_identity, $user_level;
if (is_user_logged_in()) {
echo get_avatar( $user_ID, 50 ); ?>
<div class="user_aside">
<span class="user_name">Привет <strong><em><?php echo $user_identity; ?></em></strong></span>
<!-- <a class="login_button" href="<?php //bloginfo('url'); ?>/wp-admin/">Консоль</a> -->
<a class="login_button" href="<?php bloginfo('url'); ?>/wp-admin/profile.php">Профиль</a>
<a class="logout_button" href="<?php echo wp_logout_url( $_SERVER['REQUEST_URI'] ); ?>">Выйти</a>
</div>
<?php }
else { ?>
<form id="login" action="login" method="post">
<p class="status_login"></p>
<div class="line">
<i class="fa fa-user"></i>
<input id="username" class="input_text" type="text" placeholder="Ваш логин" name="username" />
</div>
<div class="line">
<i class="fa fa-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>
<?php } ?>
</div>
В файл ajax-login-script.js
jQuery(document).ready(function($) {
$('.login_box #login').on('submit', function(e){
$('.login_box .status_login').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //calls wp_ajax_nopriv_ajaxlogin
'username': $('.login_box #username').val(),
'password': $('.login_box #password').val(),
'security': $('.login_box #security').val()
},
success: function(data){
$('.login_box .status_login').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});
Напишите свой комментарий