Оформляем страницу авторизации WordPress на свой вкус

Страница авторизации WordPress сделано хорошо — она проста в обращении и хорошо выглядит для всех размеров экранов. Но что если вы создаете сайт для клиента, который хочет, чтобы при авторизации пользователи видели его логотип? Или у вас мульти-сайт, и вы хотите, чтобы пользователи видели ваше брендирование? К счастью, вы можете настроить вид страницы авторизации достаточно просто.

В этом руководстве я создал для этой цели плагин. Преимущество использования плагина в том, что вы можете добавить его в любой разрабатываемый WordPress-сайт, чтобы добавить свое оформление и логотип.

| Скачать исходники |

Вот так будет выглядеть конечный результат нашей работы:

Шаги, которые мы продемонстрируем в этом руководстве :

1. Добавление собственного логотипа
2. Стилизация страницы авторизации – логотип, ссылки и кнопки

Что вам понадобится для выполнения этого руководства

Чтобы выполнить это руководство, вам понадобится:

• Установленный WordPress
• Доступ к папке плагинов вашего сайта для добавления нового плагина
• Текстовый редактор для создания плагина

Настройка плагина

Для начала добавим описание плагина:

Шаг 1. Добавление собственного логотипа

Добавить ваш логотип или логотип вашего клиента на страницу авторизации и придать вашему WordPress-сайту профессиональный вид очень просто.

1. Сначала создайте папку media внутри папки вашего плагина, загрузите в него ваш логотип.
2. В файле плагина (или файле functions.php), добавьте следующую функцию, прикрепите ее к хуку login_enqueue_scripts:

Это добавит ваш логотип на страницу авторизации, вот как на этой картинке:

Шаг 2. Придайте стиль странице авторизации

Помимо добавления логотипа, вы также можете изменить его размер, добавить стиль для других элементов окна авторизации.

Логотип выше немного сплющен по длине. Я собираюсь изменить размер изображения. Отредактируйте код вашего плагина, чтобы он выглядел вот так:

Значение высоты будет зависеть от соотношения сторон вашего логотипа. Использование 300px и auto для свойства background-size необходимо для того, чтобы логотип по ширине подходил под поле логина, пропорции будут сохранены, а значение height будет соответствующим вашему логотипу.

Теперь мой логотип выглядит так:

Гораздо лучше! Но изменение размера изображений — не единственная вещь, которую я могу сделать со стилем. Как насчет изменения цветов?

Весь текст на странице авторизации отображается в форме ссылок, так что вам нужно добавить именно стиль ссылок. Отредактируйте ваш код, чтобы он выглядел вот так:

Этот код даст мне ссылки в цветах моего логотипа. Цвет ссылок бирюзовый, при наведении становится розовым:

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

Завершающий элемент окна авторизация — кнопка Войти, которая все еще синего цвета. Давайте изменим это. Отредактируйте ваш код вот так:

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

Заключение

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

Комментарии к записи: 7

Почему-то не приходят на почту мне рассылки, а ленту в Facebook нет времени листать.

Спасибо. Отличный метод. Я уже подумывал о покупке премиум-плагина для этих целей. Ладно не поторопился.

Кстати, пришлось делать некоторые правки. Ниже все стили. .login #login h1 a .login #nav a, .login #backtoblog a .login #nav a:hover, .login #backtoblog a:hover .login .button-primary .login .button-primary:hover .login .message input[type=»text»]:focus, input[type=»password»]:focus, input[type=»email»]:focus

Градиенты убрал, т. к. в дизайне сайта не используются.

Я так понимаю, что данная статья направлена на продвинутых программистов, тогда понятно, почему «всё так просто». Сайт нравится, но добрался до данной странице, которая ввела в полный ступор. А всё, выше написанное попроще, для полных чайников можно изобразить?, или Вы отправите изучать HTML — код?, так там такая книжка — сто лет буду изучать. Ну почему бы не разжевать куда эти коды вставлять, в какие файлы, где эти файлы искать и как в них вставлять. Или интернет-сообщество состоит только из программников?