# 152: Стилизация страницы входа в WordPress (Lodge) - CSS-хитрости

Anonim

Наш «виджет» для The Lodge на боковой панели сайта (отображается на большинстве страниц, включая домашнюю) имеет два состояния. Один для случая, когда пользователь вышел из системы, а другой, когда пользователь вошел в систему. Состояние выхода имеет форму входа прямо на нем, поэтому текущие участники могут легко войти в систему.

Раньше мы использовали встроенную функцию wp_login_form (), что довольно здорово для WordPress, но мы хотим получить некоторый контроль над разметкой. Это позволит нам добавлять классы и многое другое, чтобы стилизовать его так, как мы хотим.

Однако есть ряд ситуаций, в которых наша настраиваемая форма входа не будет работать, и нам нужно будет использовать представление входа WordPress по умолчанию. То есть то, что вы видите при посещении /wp-login.php. Например, если вы введете неверный пароль, вы будете перенаправлены на эту страницу. Или, если вы хотите зарегистрироваться на сайте (не проходя через Restrict Content Pro) или даже сбросить пароль, вы сделаете это на странице /wp-login.php. Так что я думаю, что было бы лучше, если бы мы сделали эту страницу такой, чтобы она выглядела как профессиональная операция, а не просто «какой-то сайт WordPress». Плюс здесь мы можем использовать наш фирменный стиль, а именно нашу снежную хижину.

Чтобы получить контроль, мы используем пару «ловушек» WordPress в нашем файле functions.php, чтобы загрузить собственный файл CSS. Это все, что нам нужно, чтобы получить контроль над дизайном.

Остальное время мы тратим на использование этого CSS-файла для оформления страницы входа. Мы делаем кабину довольно размытой, что, на мой взгляд, здорово выглядит. Это вроде как говорит: «Хижина там! Авторизуйтесь и все станет ясно! ». В качестве приятного бонуса размытые фотографии в формате JPG.webp можно установить на довольно низкое качество, что хорошо, потому что мы используем их довольно большие в качестве фонового изображения на всю страницу.