Как создать полностью настроенную страницу входа в 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.
CSS стилиПроверка
На данный момент страница входа уже функционирует. Мы можем попытаться войти в систему, и в случае успеха мы будем перенаправлены на 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”) {
эхо

«;
}

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

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

Похожие записи

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *