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