Ajax авторизация в WordPress без плагинов
Среди систем с помощью которых мы разрабатываем сайты, есть CMS система WordpPress и сегодня речь пойдет о том, как сделать форму ajax авторизации на wordpress без плагина. Передо мной стояла задача сделать максимально просто и быстро + возможности встраивания в дизайн и адаптации к любому шаблону.
Итак, поехали. Все наше творение будет состоять из html+php кода (вписываемый в шаблон код) и javascript с подключенным jQuery.
Создаем форму авторизации в нашей теме. К примеру выводить будем в header.php
Ниже приведена самая простая базовая разметка формы для wordpress.
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 | <div id="wlLoginDiv"> <?php //Если пользователь не авторизован if ( is_user_logged_in() ) { // показываем кнопку войти echo "<a href=".wp_logout_url( get_permalink() )." title='Выйти'>Войти</a>"; } else { // иначе показываем кнопку выйти echo "<a href='#' id='wlLoginLink' title='Выйти'>Войти</a>"; } ?> <!--Изначально прячем форму--> <form name="login-form" id="wlLoginForm" style="display: none;"> <!--Тут будет текст ошибки--> <p id="message" style="color:red"></p> <label>Логин<input placeholder="Ваш логин" type="text" name="log" id="my-user-login" value="" /></label> <label>Пароль<input type="Ваш пароль" name="pwd" id="my-user-pass" value="" /></label> <label><input name="rememberme" type="checkbox" id="my-rememberme" value="forever" />Запомнить меня</label> <input type="submit" name="wp-submit" id="my-submit" value="Войти"/> <?php wp_nonce_field('my-nonce'); ?> <input type="hidden" name="testcookie" value="1" /> </form> <div id="wlLoginResult" style="display: none;"> </div> </div> |
Теперь пишем javaScript код. Логика проста, пользователь кликает на ссылку «Войти», показываем форму входа, пользователь вводит данные, отсылаем данные помощью jquery ajax, получаем ответ и выводим ошибку или меняем ссылку «Войти» на «Выйти»
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 | jQuery(document).ready(function($){ //Скрываем\Показываем по клику форму входа $("#wlLoginLink").click(function(){ $("#wlLoginForm").toggle(200); }); // Обрабатываем нажатие кнопки $("#my-submit").click(function() { // turn loading screen on $('#login-result').toggle(); //После клика прячем форму $('#wlLoginForm').hide(200); //Данные для формы берем из #wlLoginForm var input_data = $('#wlLoginForm').serialize(); $.ajax({ type: "POST", timeout: "5000", url: "<?php echo site_url('wp-login.php','login_post'); ?>", data: input_data, success: function(msg) { // Если авторизация не удалась, пользователь будет перенаправлен на форму входа в wordpress/ var reg1 = /login_error/g; if (reg1.test(msg)) { jQuery('#message').html("<?php _e('Вы ввели неверный логин или пароль.Пожалуйста, повторите попытку.','wllogin'); ?>"); } else { // Авторизация удалась //Прячем загрузку $('#wlLoginResult').toggle(); //Меняем ссылку "Войти" на "Выйти" $("#wlLoginDiv").html("<a href='<?php echo wp_logout_url(home_url()); ?>' title='Logout'>Выйти</a>"); } } }); // Пряем загрузку $('#wlLoginResult').toggle(); // prevent actual submission of form return false; }); }); |
Для наглядности добавлена визуализация процесса загрузки (маленький крутящийся кружочек).Оформляем его на css
1 2 3 4 5 | #wlLoginDiv {position: relative;} #wlLoginForm {position: absolute;} #wlLoginResult {display: block; width: 16px; height: 16px; background: url('loading.gif');} |
На этом минимальный набор для ajax авторизации в wordpress без плагина, собран! Буду рад ответить на ваши вопросы в комментариях.
Комментарии
11.04.2016 в 14:09
Не работает на WP 4
Консоль пишет:
wlajaxform.js:18 Uncaught ReferenceError: wlAjax is not defined