Как создать и настроить страницу авторизации для WordPress
Отдельная страница авторизации помогает органично встроить процесс входа в дизайн сайта. Она делает взаимодействие с сервисом более удобным и избавляет пользователей от стандартного интерфейса wp-login.php.
Вы научитесь настраивать форму входа, проверять корректность ввода данных и добавлять понятные сообщения об ошибках. Вы сможете создать авторизацию, которая будет предсказуемой, аккуратной и полностью соответствовать стилю сайта.
Пользовательская страница авторизации
Итак, первое, что нам нужно, это создать шаблон пользовательской страницы входа. Для этого мы создаем страницу шаблона и называем ее, к примеру, page-login.php.
Затем, создаем новую страницу в панели администрирования и ставим постоянную ссылку для страницы авторизации.
WordPress автоматически подцепит шаблон page-login.php:
Форма входа
Поместите тег wp_login_form в код шаблона page-login.php для отображения формы авторизации:
<? php wp_login_form(); ?>Следующая часть необязательна, но в некоторых случаях она может быть использована. Мы можем настроить такие части формы, как страница для редиректа после успешной авторизации, поля смены пользователя и пароля и так далее:
<?php
$args = array(
'redirect' => home_url(),
'id_username' => 'user',
'id_password' => 'pass',
)
;?>
<?php wp_login_form( $args ); ?>Здесь же вы можете, к примеру, добавить такие штуки как логотип и описание вашего сайта:
<div class="login-branding">
<a href="#" class="login-logo">Hongkiat.com</a>
<p class="login-desc">
Тестовое описание сайта.
</p>
</div>
<div class="login-form">
<?php
$args = array(
'redirect' => home_url(),
'id_username' => 'user',
'id_password' => 'pass',
)
;?>
<?php wp_login_form( $args ); ?>
</div>Теперь приступим к настройке внешнего вида страницы с помощью CSS-стилей. В этом примере я покажу, как выглядит моя страница для входа.
У нее темный фон с голубой кнопкой, которые соответствуют теме сайта Hongkiat.com:
Проверка связки имя-пароль
В этой части страница уже функционирует. Мы можем попытаться авторизоваться, и если вход выполнен успешно, нас перебросит на страницу, которую мы указали в параметре redirect на предыдущем шаге. Но есть еще кое-что, на что мы обратим наше внимание.
Во-первых, страница wp-login.php до сих пор остается доступной. Стоит поставить редирект с wp-login.php на созданную нами страницу, чтобы наши клиенты могли на неё попасть.
Для этого нужно добавить следующий код в файл functions.php используемой вами темы WordPress:
function redirect_login_page() {
$login_page = home_url( '/login/' );
$page_viewed = basename($_SERVER['REQUEST_URI']);
if( $page_viewed == "wp-login.php" && $_SERVER['REQUEST_METHOD'] == 'GET') {
wp_redirect($login_page);
exit;
}
}
add_action('init','redirect_login_page');Не забудьте присвоить переменной $login_page значение адреса вашей страницы для входа.
Во-вторых, страница авторизации работает так как задумано только в случае, если попытка входа удалась. Но, что происходит, если вход не удался?
К примеру, введена неверная пара логин-пароль или оставлено пустое поле. Нас снова выбросит на wp-login.php.
Чтобы избежать этого добавляем следующую функцию в файл functions.php:
function login_failed() {
$login_page = home_url( '/login/' );
wp_redirect( $login_page . '?login=failed' );
exit;
}
add_action( 'wp_login_failed', 'login_failed' );
function verify_username_password( $user, $username, $password ) {
$login_page = home_url( '/login/' );
if( $username == "" || $password == "" ) {
wp_redirect( $login_page . "?login=empty" );
exit;
}
}
add_filter( 'authenticate', 'verify_username_password', 1, 3);Две эти функции выполняют несколько задач: переадресуют пользователей в случае неудачной попытки входа и дописывают к URL-адресу строки запроса login значение failed или empty:
Последняя проблема, которую мы решим это редирект к wp-login.php при выходе с сайта. Нам стоит определить страницу редиректа для корректного перехода при нажатии кнопки выхода:
function logout_page() {
$login_page = home_url( '/login/' );
wp_redirect( $login_page . "?login=false" );
exit;
}
add_action('wp_logout','logout_page');Сообщение об ошибке
Мы будем показывать пользователю сообщение, и когда случается ошибка, и когда он выходит с сайта при помощи query string, значение которой мы поместили в URL. Для того чтобы получить значение из строки запроса, мы будем использовать переменную $_GET.
Поместите код, приведенный ниже, в шаблон страницы авторизации:
$login = (isset($_GET['login']) ) ? $_GET['login'] : 0;Код, приведенный выше, проверяет, содержит ли переменная login что-либо и в противном случае приравнивает ее к значению 0.
Также мы будем отображать сообщения, основанные на значении переменной $error:
if ( $login === "failed" ) {
echo '<p class="login-msg"><strong>ERROR:</strong> Invalid username and/or password.</p>';
} elseif ( $login === "empty" ) {
echo '<p class="login-msg"><strong>ERROR:</strong> Username and/or Password is empty.</p>';
} elseif ( $login === "false" ) {
echo '<p class="login-msg"><strong>ERROR:</strong> You are logged out.</p>';
}И ниже, собственно, пример того, как может такое сообщение выглядеть:
Заключение
Осталось еще несколько вещей, которые мы можем добавить к странице авторизации. К примеру, ссылка на страницу для восстановления пароля, ссылка на страницу регистрации нового пользователя и персонализированные сообщения об ошибках.
Но с другой стороны, наша страница полностью функциональна, позволяет пользователям входить на сайт и выходить из него, и поэтому я считаю это неплохой точкой для старта. Далее можно добавлять тот функционал, который вы посчитаете нужным.
Надеюсь, это руководство окажется для вас полезным!
Комментарии
Спасибо, что научили делать переадресацию.