При выполнении 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-код формы
Форма должна быть размещена в нужном месте внутри тега
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <?php if (is_user_logged_in()) { ?> <a class="login_button" href="<?php echo wp_logout_url( home_url() ); ?>">Выйти</a> <?php } else { ?> <form id="login" action="login" method="post"> <h1>Форма входа</h1> <label for="username">Логин</label> <input id="username" name="username" type="text" /> <label for="password">Пароль</label> <input id="password" name="password" type="password" /> <a class="lost" href="<?php echo wp_lostpassword_url(); ?>">Забыли пароль?</a> <input class="submit_button" name="submit" type="submit" value="Вход" /> <?php wp_nonce_field( 'ajax-login-nonce', 'security' ); ?> </form> |
Мы создали условие if (is_user_logged_in()), которое отображает форму входа если пользователь не вошел на сайте и ссылку на выход – если вошел. В конце формы находиться функция wp_nonce_field, которая создает скрытое поле с ИД “безопасности” и значением “Аякса-авторизации одноразового номера”, но в виде хэша.
Стилизация формы
Это минимумальный код CSS, который вы можете поместить в вашем style.css.
1 2 3 4 5 6 7 8 9 | 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 и позволим пользователям без каких-либо привилегий (не вошедших в систему) вызвать нашу функцию.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | 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 и поместите его в папку вашего шаблона.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | 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!
Комментарии? Вопросы?