При выполнении AJAX на основе WordPress вы должны убедиться , что вы делаете это правильно . В этой статье вы столкнетесь с лучшим способом создания AJAX, как описано на Кодекс и многих других веб – сайтов .
Имейте ввиду, что WordPress содержит тонну функций, которые вы можете использовать, для того чтобы сделать работу сайта намного проще. В этой статье для обработки формы будут использоваться следующие функции:
- wp_enqueue_script + wp_localize_script
- wp_nonce_field + check_ajax_referer
- is_user_logged_in + wp_signon
Следуя этой статье вы сможете создать форму входа, которая проверяет учетные данные пользователя.
Концепции входа
Во-первых, есть несколько способов, с помощью которых можно реализовать вход на своем сайте. Вы можете создать специальную страницу под названием “Логин” и отобразить форму на пустой странице с шаблоном page-login.php. Второй вариант является вызовом модального окна с формой входа при нажатии на кнопку/ссылку “Логин”. Третий вариант, состоит в том, чтобы форма входа была все время видна: в шляпе сайта или на боковой панели. Именно этот вариант будет описан в этой статье, но вы можете легко применить эту технику для любого из вышеуказанных вариантов.
HTML-код формы
Форма должна быть размещена в нужном месте внутри тега
Выйти
Мы создали условие if (is_user_logged_in()), которое отображает форму входа если пользователь не вошел на сайте и ссылку на выход – если вошел. В конце формы находиться функция wp_nonce_field, которая создает скрытое поле с ИД “безопасности” и значением “Аякса-авторизации одноразового номера”, но в виде хэша.
Стилизация формы
Это минимумальный код CSS, который вы можете поместить в вашем style.css.
form#login{
background-color: #FFFFFF;
padding: 40px 25px 25px 25px;
width: 350px;
}
form#login p.status{
display: none;
}
Отправка информации о пользователе с помощью AJAX
Когда пользователь заполняет форму со своим именем пользователя и паролем нам нужно отправить эти данные на сервер, проверить, если данные введены правильно и, основываясь на том факте, уведомить пользователя о том, что Вход был успешным, ну и естественно выполнить вход в систему или просто уведомить, что данные неверны.
Весь код на стороне сервера проверки будет помещен внутри файла functions.php темы. Мы создадим функцию, которая будет находиться в нашем файле JS, создадим новый объект JS под названием ajax_login_object и позволим пользователям без каких-либо привилегий (не вошедших в систему) вызвать нашу функцию.
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' => home_url(),
'loadingmessage' => __('Проверка данных...')
));
// Позволяем пользователю без каких-либо привилегий запуск функции ajax_login () в AJAX
add_action( 'wp_ajax_nopriv_ajaxlogin', 'ajax_login' );
}
// Выполняем действие ajax_login_init, только если пользователь не вошел в систему
if (!is_user_logged_in()) {
add_action('init', 'ajax_login_init');
}
function ajax_login(){
// Сначала проверяем одноразовое значение скрытого поля безопасности и если оно выходит из строя - выполнение функции будет прервано
check_ajax_referer( 'ajax-login-nonce', 'security' );
// Получаем данные POST и выводим результат
$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();
}
Все, что осталось, это сделать кнопку “Войти” и функцию отправки данных формы с помощью AJAX. Создайте файл с именем ajax-login-script.js и поместите его в папку вашего шаблона.
jQuery(document).ready(function($) {
// Выполнение AJAX-запроса при нажатии на кнопку Входа
$('form#login').on('submit', function(e){
$('form#login p.status').show().text(ajax_login_object.loadingmessage);
$.ajax({
type: 'POST',
dataType: 'json',
url: ajax_login_object.ajaxurl,
data: {
'action': 'ajaxlogin', //вызов нашей функции wp_ajax_nopriv_ajaxlogin
'username': $('form#login #username').val(),
'password': $('form#login #password').val(),
'security': $('form#login #security').val() },
success: function(data){
$('form#login p.status').text(data.message);
if (data.loggedin == true){
document.location.href = ajax_login_object.redirecturl;
}
}
});
e.preventDefault();
});
});
Ура! У вас получилось! Статья отображает один из простейших способов создания AJAX в WordPress!
Комментарии? Вопросы?
