Как создать полностью настроенную страницу входа в WordPress

Я полагаю, что многие из вас знакомы со страницей входа в WordPress по адресу wp-login.php. Это выглядит красиво, и работает отлично. Но когда дело доходит до создания веб-сайта для клиентов, вам может потребоваться более настраиваемая страница входа в систему, чтобы она прекрасно вписывалась в дизайн веб-сайта в целом. Кроме того, наличие настроенной страницы входа может также дать вашим клиентам хорошее представление о ваших навыках.

Если это то, чего вы хотите достичь на своем сайте, вот как вы можете создать полностью настроенную страницу входа в WordPress.

Пользовательская страница входа
Сначала нам нужно создать собственный шаблон страницы для страницы входа в систему. Для этого вы можете создать новый шаблон страницы и назвать его, например, page-login.php. Затем создайте новую страницу из бэкэнда WordPress и установите постоянную ссылку для входа в систему, чтобы WordPress автоматически принимал шаблон page-login.php для этой страницы.
Форма входа
Поместите тег wp_login_form в шаблон страницы page-login.php для отображения формы входа.

Следующее является необязательным, но может быть полезно в определенных случаях. Вы можете настроить несколько вещей для формы входа в систему, например, указать перенаправление URL после успешного входа пользователя, изменить идентификатор имени пользователя и поле ввода пароля.

home_url (),
    ‘id_username’ => ‘user’,
    ‘id_password’ => ‘pass’,
   )
;?>

Кроме того, вы также можете добавить что-то в сторону. Например, это может быть ваш логотип и небольшое описание вашего сайта.

Теперь давайте сделаем форму лучше с помощью CSS. Вы можете сделать CSS самостоятельно в соответствии с требованиями вашего сайта. В этом примере, вот как выглядит моя форма входа. Он имеет черный фон с синей кнопкой, которая очень хорошо вписывается в тему сайта Hongkiat.com.
Проверка
На данный момент страница входа уже функционирует. Мы можем попытаться войти в систему, и в случае успеха мы будем перенаправлены на URL, который мы указали в параметре redirect выше. Но есть кое-что, к чему мы должны обратиться.

Во-первых, страница wp-login.php по-прежнему доступна. Было бы лучше перенаправить wp-login.php на нашу новую страницу входа в систему, чтобы предоставить нашим клиентам унифицированную работу.

Для этого вы можете добавить следующие коды в functions.php вашей темы.

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);
Выход;
}
}
add_action ( ‘инициализации’, ‘redirect_login_page’);

Не забудьте изменить переменную $ login_page на свою страницу входа (спасибо Монтане Флинн за Подсказка),

Во-вторых, страница входа в систему может работать должным образом, когда мы успешно вошли в систему. Но если произойдет ошибка, например, при отправке недопустимых комбинаций пользователя и пароля или при заполнении пустого поля, мы также будем выброшены в wp-login.php. Чтобы решить эту проблему, добавьте следующие функции в functions.php.

функция login_failed () {
$ login_page = home_url (‘/ login /’);
wp_redirect ($ login_page. ‘? login = fail’);
Выход;
}
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”);
        Выход;
    }
}
add_filter («authenticate», «verify_username_password», 1, 3);

Эти две функции выполняют две задачи. Они перенаправят пользователя после сбоя и добавят строку запроса на вход в URL со значением сбой или пусто.
Последняя проблема – мы также будем перенаправлены на wp-login.php, когда выйдем с сайта. Итак, нам также нужно указать URL-адрес перенаправления при выходе из системы, вот так.

function logout_page () {
$ login_page = home_url (‘/ login /’);
wp_redirect ($ login_page. “? login = false”);
Выход;
}
add_action ( ‘wp_logout’, ‘logout_page’);

Сообщение об ошибке
Мы отобразим сообщение об ошибке, показывающее пользователю, когда произошла ошибка, и когда они вышли из системы с помощью Строка запроса что мы вставили в URL. Чтобы получить значение из строки запроса на вход в систему выше, мы можем использовать $ _GET.

Поместите этот код ниже в шаблон страницы входа.

$ login = (isset ($ _ GET[‘login’]))? $ _GET[‘login’] : 0;

Приведенный выше код проверит, содержит ли переменная входа значение, в противном случае он будет установлен на 0. Затем мы будем отображать различные уведомления в зависимости от значения $ error, например, так.

if ($ login === “fail”) {
эхо

ОШИБКА: Неверное имя пользователя и / или пароль.

«;
} elseif ($ login === “empty”) {
эхо

ОШИБКА: Имя пользователя и / или пароль пустые.

«;
} elseif ($ login === “false”) {
эхо

ОШИБКА: Вы вышли из системы.

«;
}

А ниже показано, как выглядит сообщение об ошибке.
Вывод
Есть несколько вещей, которые мы могли бы сделать, чтобы улучшить нашу страницу входа, например, добавив ссылку «Забыли пароль», «Зарегистрировать ссылку» и персонализированное сообщение об ошибке. Но на данный момент он работает достаточно хорошо, чтобы наши пользователи могли входить и выходить из системы, и это также может быть хорошим началом для создания более продвинутой страницы входа.

Мы надеемся, что вы найдете этот урок полезным.