В этой статье мы рассмотрим, как создать свою страницу авторизации. При этом будет вкратце затронут вопрос создания своего плагина, работа с шорт-кодом.
Пример формы – здесь.
Функции, которые нам могут быть полезными, но не обязательно все их использовать. Все функции буду приведены без подробного описания. Примечание: эти функции будут использоваться при создании формы, которая будет обращаться к сайту посредством AJAX.
Функция проверки наличия логина в базе – username_exists($user_login).
Эта функция будет полезна в момент регистрации нового пользователя. Если пользователь есть в базе WP, то вернет true, иначе false.
Пример текстового поля формы ввода логина:
|
1 2 3 |
<input type="text" name="log" id="user_login" > |
Все вводимые данные, в любых видах форм, мы получаем через переменную $_POST. Например, в нашем примере $user_login=$_POST[“log”], где log, это значение переменной, которая берется из текстового поля (input ) нашей формы с названием log: (name=”log”).
Функция создания пользователя – wp_create_user($user_login,$pwd,$user_email), где $user_login – логин, $pwd – пароль, $user_email – почта
Функция обновления пароля – wp_set_password($pwd,$user_id). К авторизации эта функция не относится, но будет полезна при создании страницы профиля пользователя или для сброса/установки нового пароля. Для обновления пароля нам понадобится найти id пользователя, тут есть разные варианты.
Например, получим id по логину:
|
1 2 3 4 |
$user=get_user_by(‘login’, $user_login); $user_id-$user->ID; |
можно по e-mail:
|
1 2 3 4 |
$user=get_user_by(‘email’, $user_email); $user_id-$user->ID; |
Можно еще получить id непосредственно из таблицы wp_users.
Создадим запрос к таблице wp_users, где в условии отбора будет стоять логин, по которому мы хотим получить id пользователя:
|
1 2 3 4 5 6 |
$user_login=$_POST["log"]; $zapros="select * from wp_users where user_login='$user_login'"; $rezultat=$wpdb->get_results($zapros); $user_id=$rezultat[0]->id; |
Функция проверки пароля – wp_check_password($pas,$hash), с помощью это функции мы можем проверить, соответствует ли введенный пароль, паролю, который записан в базе.
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
$user = get_user_by('login', $user_login); $user_id = $user->ID;//Получаем id пользователя $user = get_userdata($user_id); $hash = $user->data->user_pass;//Получаем хэш пароля if(wp_check_password($pas,$hash)){//если пароли совпадают //Код, если пароль совпал } else{ //Код, если пароль не совпал } |
Функция генерации пароля – wp_generate_password(). По умолчанию генерируется пароль из 12 символов, если хотим увеличить длину пароля и исключить такие редкие символы, как !@#$%^&*(), то
|
1 2 3 |
$pwd=wp_generate_password(16,false); |
а если наоборот хотим усложнить, и включить в пароль такие символы, как –_ []{}<>~`+=,.;:/?|:,то
|
1 2 3 |
$pwd=wp_generate_password(16,true,true); |
У WP есть своя функция, с помощью которой мы можем вызывать форму авторизации в любом месте, – wp_login_form($args).
Если эту функцию внедрить в код, то у вас появиться форма авторизации на сайт.
Например, создадим страницу и с помощью шорт-кода разместим форму регистрации.
Лучше всего будет, если все манипуляции с формой авторизации/регистрации мы реализуем в виде отдельного плагина.
Для создания своего плагина нужно создать папку в директории /wp-content/plugins/, например, создадим папку wp_login, а в ней создадим одноименный файл wp_login.php. Для всех манипуляций с файлами вашего сайте, используйте ftp клиент вашего хостера или ftp клиент под Windows или Linux, например FileZilla. Кстати, есть более интересный и универсальный вариант работы с файлами вашего сайта, можно установить плагин файлового менеджера WP File Manager
Далее, минимум, что должен содержать наш файл плагина, это его название
|
1 2 3 4 5 6 7 8 9 10 |
<?php /* Plugin Name: wp_login Description: Плагин авторизации Version: 1.0 Author: ddr64.link */ |
Сохраните файл wp_login.php и активируйте плагин в WP. Далее, весь код будет размещаться в нашем файле wp_login.php.
Создадим шорт-код с формой авторизации
|
1 2 3 4 5 6 7 |
function wp_login_site(){ wp_login_form(); } add_shortcode( 'wp_login', 'wp_login_site' ); |
Теперь, когда мы сохраним все изменения, можем создать страницу в WP, и вставить шорт-код – [wp_login] , после чего можно просмотреть созданную страницу. У вас появится форма авторизации, и скорее всего она у вас будет без стилевого оформления, но при этом сами классы будут присутствовать.
Код, который генерирует wp_login_form()
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<form name="loginform" id="loginform" action="/wp-login.php" method="post"> <p class="login-username"> <label for="user_login">Имя пользователя или e-mail</label> <input type="text" name="log" id="user_login" class="input" value="" size="20"> </p> <p class="login-password"> <label for="user_pass">Пароль</label> <input type="password" name="pwd" id="user_pass" class="input" value="" size="20"> </p> <p class="login-remember"><label><input name="rememberme" type="checkbox" id="rememberme"value="forever"> Запомнить меня</label></p> <p class="login-submit"> <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary" value="Войти"> <input type="hidden" name="redirect_to" value="/?page_id=2907&preview=true"> </p> </form> |
Как видно, в коде есть классы, к которым вы можете подвязать свои стили, и привести форму к желаемому виду. Примечание: вы можете и не использовать wp_login_form(), а придумать свой код формы.
Стили формы лучше прописать в отдельно файле css, который мы подключим в нашем плагине. Для это вначале создадим папку css, а в ней создадим файл style.css.
В файла wp_login.php, пропишем доступ к нашему css файлу.
|
1 2 3 |
wp_enqueue_style('style-login', plugins_url("css/style.css", __FILE__)); |
Например, можно добавить вот такой стиль:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
#loginform p > label{ display:block; cursor:unset !important; color:#333 !important; } #loginform p > input{ width:100%; border:1px solid #ddd; border-radius:5px; } .login-submit{ text-align:center; } .login-submit input{ width:100px !important; } |
Получим следующий внешний вид:
Пример – здесь
В функцию wp_login_form() можно передавать параметры, в виде массива. Пример:
|
1 2 3 4 5 6 7 8 |
wp_login_form( array( 'echo' => false, 'redirect' => $_SERVER['HTTP_REFERER'], ) } |
В этом примере, echo принимает два параметра: true или false, что означает, как будет обрабатываться вывод функции wp_login_form(), будет ли сама форма помещена в переменную, или сразу ее вывести на экран. ‘redirect’ указывает, куда перейти после успешной авторизации.
Следующая задача будет состоять в обработке всех ошибок входа, а также добавим условия проверки, не зарегистрирован ли пользователь, чтобы повторно не выводить форму авторизации.
В начало функции wp_login_site() добавим следующий код:
|
1 2 3 4 5 |
if (is_user_logged_in()) { return sprintf( "Вы уже авторизованы на сайте - <a href='%s'>Выйти</a>", wp_logout_url()); } |
И ниже добавим код обработки всех ошибок:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
if (isset($_GET['avtor_error'])) { switch($_GET['avtor_error']) { case 'empty_username': $r .= '<p class="error_vhod">Вы не указали свой e-mail(Логин)!</p>'; break; case 'empty_password': $r .= '<p class="error_vhod">Пожалуйста, введите пароль!</p>'; break; case 'invalid_username': $r .= '<p class="error_vhod">Такой пользователь не существует!</p>'; break; case 'incorrect_password': $r .= "<p class='error_vhod'>Неверный пароль!</p>"; break; case 'empty_username,empty_password': $r .= "<p class='error_vhod'>Заполните необходимые поля!</p>"; break; } } |
Для того, чтобы ошибки возвращались на страницу авторизации, добавим следующий код в наш плагин:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
add_action( 'authenticate', 'form_page_login',101,3); function form_page_login($user,$username,$password){ $referrer = $_SERVER['HTTP_REFERER']; if($_SERVER['REQUEST_METHOD'] === 'POST') { if(is_wp_error($user)){ $error_codes = join(',', $user->get_error_codes()); $login_url = add_query_arg('avtor_error', $error_codes, $referrer); wp_redirect($login_url); exit; } } return $user; } |
Итог кода по странице авторизации:
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
<?php /* Plugin Name: wp_login Description: Плагин авторизации Version: 1.0 Author: ddr64.link */ wp_enqueue_style('style-login', plugins_url("css/style.css", __FILE__)); function wp_login_site(){ if (is_user_logged_in()) { return sprintf( "<a href='%s'>Выйти</a>", wp_logout_url()); } if (isset($_GET['avtor_error'])) { switch($_GET['avtor_error']) { case 'empty_username': $r .= '<p class="error_vhod">Вы не указали свой e-mail(Логин)!</p>'; break; case 'empty_password': $r .= '<p class="error_vhod">Пожалуйста, введите пароль!</p>'; break; case 'invalid_username': $r .= '<p class="error_vhod">Такой пользователь не существует!</p>'; break; case 'incorrect_password': $r .= "<p class='error_vhod'>Неверный пароль!</p>"; break; case 'empty_username,empty_password': $r .= "<p class='error_vhod'>Заполните необходимые поля!</p>"; break; } } $r .='<div class="login_form_avtoriz">'; $r .='<h3>Вход на сайт</h3>'; $r .= wp_login_form( array( 'echo' => false, 'redirect' => $_SERVER['HTTP_REFERER'], ) ); $r .='<a href='.esc_url(wp_lostpassword_url(get_permalink())). 'title="Забыли пароль?">Забыли пароль?</a>'; $r .='</div>'; return $r; } add_shortcode( 'wp_login', 'wp_login_site' ); add_action( 'authenticate', 'form_page_login',101,3); function form_page_login($user,$username,$password){ $referrer = $_SERVER['HTTP_REFERER']; if($_SERVER['REQUEST_METHOD'] === 'POST') { if(is_wp_error($user)){ $error_codes = join(',', $user->get_error_codes()); $login_url = add_query_arg('avtor_error', $error_codes, $referrer); wp_redirect($login_url); exit; } } return $user; } ?> |
Файл со стилями style.css
|
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 |
.login_form_avtoriz{ width:230px; margin:0 auto; } .login_form_avtoriz a{ display:block; text-align:center; } #loginform p > label{ display:block; cursor:unset !important; color:#333 !important; } #loginform p > input{ width:100%; border:1px solid #ddd; border-radius:5px; } .login-submit{ text-align:center; } .login-submit input{ width:100px !important; } .error_vhod{ color:red; font-weight:bold; text-align:center; } |
Используя шорт-код, можно интегрировать в тему авторизацию на сайте. Для этого нужно вставить следующий код, в тему вашего сайта:
<?php echo do_shortcode("[wp_login]"); ?>
Авторизацию можно сделать и виде виджета, но сам виджет мы создавать не будем, можно воспользоваться плагином, который позволяет создавать виджеты и вставлять в них php код, например PHP Code Widget
Теперь, думаю разумно было-бы, если мы авторизируемся со странице, на которой размещена форма авторизации, возвращаться обратно на страницу, с которой мы перешли. А, если авторизируемся, например, с сайдбара, то остаться на этой же странице.
Для этого можно использовать шорт-код с передачей параметра, который в свою очередь будет обрабатываться функцией wp_login_site();. Например, на странице авторизации шорт-код будет
[wp_login] , а в виджете
[wp_login url=1]
В функцию wp_login_site() мы теперь будем передавать параметр, поэтому теперь будет такой вид wp_login_site($atts), $atts – будет принимать значение url=1.
Далее, нужно добавить условие обработки нашего параметра, имя и значение параметра шорт-кода, можете придумать своё
|
1 2 3 4 5 6 7 8 9 10 11 12 |
//Управляем переходом с помощью параметра шорт-кода $params = shortcode_atts( array( // в массиве указываем значения параметра по умолчанию 'url' => 0, ), $atts ); if($params['url']==0){ $redirect=$_SERVER['HTTP_REFERER']; } elseif($params['url']==1){ $redirect=$_SERVER['REQUEST_URI']; } |
Получается, если мы параметр не указали, то url равно нулю, а если указали, то принимаем его и проверяем на совпадения условия, в моем случае, я передал 1. Переменная $redirect будет тогда принимать одно из двух значений, вернуться на предыдущую страницу – $_SERVER[‘HTTP_REFERER’], или вернуться на текущую – $_SERVER[‘REQUEST_URI’]. Осталось изменить в функции wp_login_form(), $_SERVER[‘HTTP_REFERER’] меняем на переменную $redirect
|
1 2 3 4 5 6 7 8 |
$r .= wp_login_form( array( 'echo' => false, 'redirect' => $redirect,//Меняем $_SERVER['HTTP_REFERER'] ) ); |
Итог кода по странице авторизации:
|
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 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 |
<?php /* Plugin Name: wp_login Description: Плагин авторизации Version: 1.0 Author: ddr64.link */ wp_enqueue_style('style-login', plugins_url("css/style.css", __FILE__)); function wp_login_site($atts){ if (is_user_logged_in()) { return sprintf( "<a href='%s'>Выйти</a>", wp_logout_url()); } //Управляем переходом с помощью параметра шорт-кода $params = shortcode_atts( array( // в массиве указываем значения параметров по умолчанию 'url' => 0, ), $atts ); if($params['url']==0){ $redirect=$_SERVER['HTTP_REFERER']; } elseif($params['url']==1){ $redirect=$_SERVER['REQUEST_URI']; } // if (isset($_GET['avtor_error'])) { switch($_GET['avtor_error']) { case 'empty_username': $r .= '<p class="error_vhod">Вы не указали свой e-mail(Логин)!</p>'; break; case 'empty_password': $r .= '<p class="error_vhod">Пожалуйста, введите пароль!</p>'; break; case 'invalid_username': $r .= '<p class="error_vhod">Такой пользователь не существует!</p>'; break; case 'incorrect_password': $r .= "<p class='error_vhod'>Неверный пароль!</p>"; break; case 'empty_username,empty_password': $r .= "<p class='error_vhod'>Заполните необходимые поля!</p>"; break; } } $r .='<div class="login_form_avtoriz">'; $r .='<h3>Вход на сайт</h3>'; $r .= wp_login_form( array( 'echo' => false, 'redirect' => $redirect, ) ); $r .='<a href='.esc_url(wp_lostpassword_url(get_permalink())). 'title="Забыли пароль?">Забыли пароль?</a>'; $r .='</div>'; return $r; } add_shortcode( 'wp_login', 'wp_login_site' ); add_action( 'authenticate', 'form_page_login',101,3); function form_page_login($user,$username,$password){ $referrer = $_SERVER['HTTP_REFERER']; if($_SERVER['REQUEST_METHOD'] === 'POST') { if(is_wp_error($user)){ $error_codes = join(',', $user->get_error_codes()); $login_url = add_query_arg('avtor_error', $error_codes, $referrer); wp_redirect($login_url); exit; } } return $user; } ?> |
Продолжение следует…
