Как создать и настроить страницу авторизации для WordPress

Многим из вас наверняка хорошо известна страница 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>';  
}

И ниже, собственно, пример того, как может такое сообщение выглядеть:

Заключение

Осталось еще несколько вещей, которые мы можем добавить к странице авторизации. К примеру, ссылка на страницу для восстановления пароля, ссылка на страницу регистрации нового пользователя и персонализированные сообщения об ошибках.

Но с другой стороны, наша страница полностью функциональна, позволяет пользователям входить на сайт и выходить из него, и поэтому я считаю это неплохой точкой для старта. Далее можно добавлять тот функционал, который вы посчитаете нужным.

Надеюсь, это руководство окажется для вас полезным!